config

2026-06-13 11:25:03 +03:00 · 2022-03-23 22:32:38 -07:00
1486 changed files with 45261 additions and 98959 deletions
@@ -14,6 +14,7 @@
    ]
  ],
  "plugins": [
+    "lodash",
    "styled-components",
    [
      "@babel/plugin-proposal-decorators",
@@ -34,14 +35,6 @@
            "displayName": false
          }
        ]
-      ],
-      "ignore": [
-        "**/*.test.ts"
-      ]
-    },
-    "development": {
-      "ignore": [
-        "**/*.test.ts"
      ]
    }
  }
@@ -1,111 +1,54 @@
 version: 2.1

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

 jobs:
  build:
-    <<: *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
-    environment:
-      NODE_ENV: production
-    steps:
-      - checkout
-      - restore_cache:
-          key: dependency-cache-{{ checksum "package.json" }}
+          command: yarn test
      - run:
-          name: build-vite
-          command: yarn vite:build
-      - run:
-          name: Send bundle stats to RelativeCI
-          command: npx relative-ci-agent
+          name: build-webpack
+          command: yarn build:webpack
  build-image:
    executor: docker-publisher
    steps:
@@ -126,50 +69,65 @@ jobs:
          name: Initialize Docker buildx
          command: |
            docker buildx install
-            docker context create docker-multiarch
            docker run --rm --privileged multiarch/qemu-user-static --reset -p yes
-            docker buildx create --name docker-multiarch --platform linux/amd64,linux/arm/v6,linux/arm/v7,linux/arm64/v8,linux/ppc64le,linux/s390x docker-multiarch
+            docker rm -f buildx_buildkit_docker-multiarch0
+            docker buildx create --name docker-multiarch --platform linux/amd64,linux/arm/v7,linux/arm64/v8,linux/ppc64le,linux/s390x
            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 .
+          name: Build Docker image
+          command: docker buildx build -t $IMAGE_NAME:latest --platform linux/amd64,linux/arm/v7,linux/arm64/v8,linux/ppc64le,linux/s390x .
      - run:
-          name: Login to Docker Hub
-          command: echo "$DOCKERHUB_PASS" | docker login -u "$DOCKERHUB_USERNAME" --password-stdin
+          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: Publish base Docker Image to Docker Hub
-          command: docker push $BASE_IMAGE_NAME:latest
+          name: Load archived Docker image
+          command: docker load -i /tmp/workspace/image.tar
      - 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 .
+          name: Publish Docker Image to Docker Hub
+          command: |
+            echo "$DOCKERHUB_PASS" | docker login -u "$DOCKERHUB_USERNAME" --password-stdin
+            IMAGE_TAG=${CIRCLE_TAG/v/''}
+            docker tag $IMAGE_NAME:latest $IMAGE_NAME:$IMAGE_TAG
+            docker push $IMAGE_NAME:latest
+            docker push $IMAGE_NAME:$IMAGE_TAG
+  publish-tag:
+    executor: docker-publisher
+    steps:
+      - attach_workspace:
+          at: /tmp/workspace
+      - setup_remote_docker:
+          version: 20.10.6
+      - run:
+          name: Load archived Docker image
+          command: docker load -i /tmp/workspace/image.tar
+      - run:
+          name: Publish Docker Image to Docker Hub
+          command: |
+            echo "$DOCKERHUB_PASS" | docker login -u "$DOCKERHUB_USERNAME" --password-stdin
+            IMAGE_TAG=${CIRCLE_TAG/v/''}
+            docker tag $IMAGE_NAME:latest $IMAGE_NAME:$IMAGE_TAG
+            docker push $IMAGE_NAME:$IMAGE_TAG

 workflows:
  version: 2
-  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:
@@ -178,3 +136,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,25 +10,15 @@ 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.
-URL=https://app.outline.dev:3000
+URL=http://localhost:3000
 PORT=3000

 # See [documentation](docs/SERVICES.md) on running a separate collaboration
@@ -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
@@ -99,10 +86,10 @@ OIDC_USERINFO_URI=
 OIDC_USERNAME_CLAIM=preferred_username

 # Display name for OIDC authentication
-OIDC_DISPLAY_NAME=OpenID Connect
+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,9 +126,9 @@ MAXIMUM_IMPORT_SIZE=5120000
 # requests and this ends up being duplicative
 DEBUG=http

-# Configure lowest severity level for server logs. Should be one of
-# error, warn, info, http, verbose, debug and silly
-LOG_LEVEL=info
+# 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
@@ -154,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
@@ -166,22 +150,14 @@ SMTP_HOST=
 SMTP_PORT=
 SMTP_USERNAME=
 SMTP_PASSWORD=
-SMTP_FROM_EMAIL=hello@example.com
-SMTP_REPLY_EMAIL=hello@example.com
+SMTP_FROM_EMAIL=
+SMTP_REPLY_EMAIL=
 SMTP_TLS_CIPHERS=
 SMTP_SECURE=true

+# Custom logo that displays on the authentication screen, scaled to height: 60px
+# TEAM_LOGO=https://example.com/images/logo.png
+
 # The default interface language. See translate.getoutline.com for a list of
 # available language codes and their rough percentage translated.
 DEFAULT_LANGUAGE=en_US
-
-# Optionally enable rate limiter at application web server
-RATE_LIMITER_ENABLED=true
-
-# Configure default throttling parameters for rate limiter
-RATE_LIMITER_REQUESTS=1000
-RATE_LIMITER_DURATION_WINDOW=60
-
-# Iframely API config
-IFRAMELY_URL=
-IFRAMELY_API_KEY=
@@ -3,7 +3,6 @@
  "parserOptions": {
    "sourceType": "module",
    "extraFileExtensions": [".json"],
-    "project": "./tsconfig.json",
    "ecmaFeatures": {
      "jsx": true
    }
@@ -13,38 +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,
-    "no-console": "error",
-    "arrow-body-style": ["error", "as-needed"],
-    "spaced-comment": "error",
-    "object-shorthand": "error",
    "no-mixed-operators": "off",
    "no-useless-escape": "off",
-    "es/no-regexp-lookbehind-assertions": "error",
-    "react/self-closing-comp": ["error", {
-      "component": true,
-      "html": true
-    }],
-    "@typescript-eslint/no-floating-promises": "error",
-    "@typescript-eslint/await-thenable": "error",
-    "@typescript-eslint/no-misused-promises": [
-      "error",
-      {
-        "checksVoidReturn": false
-      }
-    ],
    "@typescript-eslint/no-unused-vars": [
      "error",
      {
@@ -1,8 +1,8 @@
 blank_issues_enabled: false
 contact_links:
  - name: Feature request
-    url: https://github.com/outline/outline/discussions/new?category=ideas
+    url: https://github.com/outline/outline/discussions/new
    about: Request a feature to be added to the project
  - name: Self hosting questions
-    url: https://github.com/outline/outline/discussions/new?category=self-hosting
+    url: https://github.com/outline/outline/discussions/new
    about: Ask questions and discuss running Outline with community members
@@ -1,15 +0,0 @@
-# To get started with Dependabot version updates, you'll need to specify which
-# package ecosystems to update and where the package manifests are located.
-# Please see the documentation for all configuration options:
-# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
-
-version: 2
-updates:
-  - package-ecosystem: "npm" # See documentation for possible values
-    directory: "/" # Location of package manifests
-    open-pull-requests-limit: 5
-    ignore:
-      - dependency-name: "*"
-        update-types: ["version-update:semver-major"]
-    schedule:
-      interval: "weekly"
@@ -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,61 +0,0 @@
-# Image Actions will run in the following scenarios:
-# - on Pull Requests containing images (not including forks)
-# - on pushing of images to `main` (for forks)
-# - on demand (https://github.blog/changelog/2020-07-06-github-actions-manual-triggers-with-workflow_dispatch/)
-# - at 11 PM every Sunday in anything gets missed with any of the above scenarios
-# For Pull Requests, the images are added to the PR.
-# For other scenarios, a new PR will be opened if any images are compressed.
-name: Compress images
-on:
-  pull_request:
-    paths:
-      - "**.jpg"
-      - "**.jpeg"
-      - "**.png"
-      - "**.webp"
-  push:
-    branches:
-      - main
-    paths:
-      - "**.jpg"
-      - "**.jpeg"
-      - "**.png"
-      - "**.webp"
-  workflow_dispatch:
-  schedule:
-    - cron: "00 20 * * 0"
-permissions: {}
-jobs:
-  build:
-    permissions:
-      contents: write
-      pull-requests: write #  to comment on pull request
-
-    name: calibreapp/image-actions
-    runs-on: ubuntu-latest
-    # Only run on main repo on and PRs that match the main repo.
-    if: |
-      github.repository == 'outline/outline' &&
-      (github.event_name != 'pull_request' ||
-       github.event.pull_request.head.repo.full_name == github.repository)
-    steps:
-      - name: Checkout Branch
-        uses: actions/checkout@v2
-      - name: Compress Images
-        id: calibre
-        uses: calibreapp/image-actions@main
-        with:
-          githubToken: ${{ secrets.GITHUB_TOKEN }}
-          # For non-Pull Requests, run in compressOnly mode and we'll PR after.
-          compressOnly: ${{ github.event_name != 'pull_request' }}
-      - name: Create Pull Request
-        # If it's not a Pull Request then commit any changes as a new PR.
-        if: |
-          github.event_name != 'pull_request' &&
-          steps.calibre.outputs.markdown != ''
-        uses: peter-evans/create-pull-request@v3
-        with:
-          title: "chore: Auto Compress Images"
-          branch-suffix: timestamp
-          commit-message: "chore: Compressed inefficient images automatically"
-          body: ${{ steps.calibre.outputs.markdown }}
@@ -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
@@ -1,4 +0,0 @@
-#!/usr/bin/env sh
-. "$(dirname "$0")/_/husky.sh"
-
-npx lint-staged
@@ -1,63 +0,0 @@
-{
-  "workerIdleMemoryLimit": "0.75",
-  "projects": [
-    {
-      "displayName": "server",
-      "roots": ["<rootDir>/server", "<rootDir>/plugins"],
-      "moduleNameMapper": {
-        "^@server/(.*)$": "<rootDir>/server/$1",
-        "^@shared/(.*)$": "<rootDir>/shared/$1"
-      },
-      "setupFiles": [
-        "<rootDir>/__mocks__/console.js",
-        "<rootDir>/server/test/env.ts"
-      ],
-      "setupFilesAfterEnv": ["<rootDir>/server/test/setup.ts"],
-      "testEnvironment": "node",
-      "runner": "@getoutline/jest-runner-serial"
-    },
-    {
-      "displayName": "app",
-      "roots": ["<rootDir>/app"],
-      "moduleNameMapper": {
-        "^~/(.*)$": "<rootDir>/app/$1",
-        "^@shared/(.*)$": "<rootDir>/shared/$1",
-        "^.*[.](gif|ttf|eot|svg)$": "<rootDir>/__test__/fileMock.js",
-        "^uuid$": "<rootDir>/node_modules/uuid/dist/index.js"
-      },
-      "modulePaths": ["<rootDir>/app"],
-      "setupFiles": ["<rootDir>/__mocks__/window.js"],
-      "setupFilesAfterEnv": ["<rootDir>/app/test/setup.ts"],
-      "testEnvironment": "jsdom",
-      "testEnvironmentOptions": {
-        "url": "http://localhost"
-      }
-    },
-    {
-      "displayName": "shared-node",
-      "roots": ["<rootDir>/shared"],
-      "moduleNameMapper": {
-        "^@server/(.*)$": "<rootDir>/server/$1",
-        "^@shared/(.*)$": "<rootDir>/shared/$1"
-      },
-      "setupFiles": ["<rootDir>/__mocks__/console.js"],
-      "setupFilesAfterEnv": ["<rootDir>/shared/test/setup.ts"],
-      "testEnvironment": "node"
-    },
-    {
-      "displayName": "shared-jsdom",
-      "roots": ["<rootDir>/shared"],
-      "moduleNameMapper": {
-        "^~/(.*)$": "<rootDir>/app/$1",
-        "^@shared/(.*)$": "<rootDir>/shared/$1",
-        "^.*[.](gif|ttf|eot|svg)$": "<rootDir>/__test__/fileMock.js",
-        "^uuid$": "<rootDir>/node_modules/uuid/dist/index.js"
-      },
-      "setupFiles": ["<rootDir>/__mocks__/window.js"],
-      "testEnvironment": "jsdom",
-      "testEnvironmentOptions": {
-        "url": "http://localhost"
-      }
-    }
-  ]
-}
@@ -1,26 +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:18-alpine AS runner
-
-RUN apk update && apk add --no-cache curl && apk add --no-cache ca-certificates
-
-LABEL org.opencontainers.image.source="https://github.com/outline/outline"
+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,19 +0,0 @@
-ARG APP_PATH=/opt/outline
-FROM node:18-alpine AS deps
-
-ARG APP_PATH
-WORKDIR $APP_PATH
-COPY ./package.json ./yarn.lock ./
-COPY ./patches ./patches
-
-RUN yarn install --no-optional --frozen-lockfile --network-timeout 1000000 && \
-  yarn cache clean
-
-COPY . .
-ARG CDN_URL
-RUN yarn build
-
-RUN rm -rf node_modules
-
-RUN yarn install --production=true --frozen-lockfile --network-timeout 1000000 && \
-  yarn cache clean
@@ -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

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

 build:
@@ -7,26 +7,26 @@
  <img width="1640" alt="screenshot" src="https://user-images.githubusercontent.com/380914/110356468-26374600-7fef-11eb-9f6a-f2cc2c8c6590.png">
 </p>
 <p align="center">
-  <a href="https://circleci.com/gh/outline/outline" rel="nofollow"><img src="https://circleci.com/gh/outline/outline.svg?style=shield"></a>
+  <a href="https://circleci.com/gh/outline/outline" rel="nofollow"><img src="https://circleci.com/gh/outline/outline.svg?style=shield&amp;circle-token=c0c4c2f39990e277385d5c1ae96169c409eb887a"></a>
  <a href="http://www.typescriptlang.org" rel="nofollow"><img src="https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg" alt="TypeScript"></a>
  <a href="https://github.com/prettier/prettier"><img src="https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat" alt="Prettier"></a>
  <a href="https://github.com/styled-components/styled-components"><img src="https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg" alt="Styled Components"></a>
  <a href="https://translate.getoutline.com/project/outline" alt="Localized"><img src="https://badges.crowdin.net/outline/localized.svg"></a>
 </p>

-This is the source code that runs [**Outline**](https://www.getoutline.com) and all the associated services. If you want to use Outline then you don't need to run this code, we offer a hosted version of the app at [getoutline.com](https://www.getoutline.com). You can also find documentation on using Outline in [our guide](https://docs.getoutline.com/s/guide).
+This is the source code that runs [**Outline**](https://www.getoutline.com) and all the associated services. If you want to use Outline then you don't need to run this code, we offer a hosted version of the app at [getoutline.com](https://www.getoutline.com).

 If you'd like to run your own copy of Outline or contribute to development then this is the place for you.

 # Installation

-Please see the [documentation](https://docs.getoutline.com/s/hosting/) for running your own copy of Outline in a production configuration.
+Please see the [documentation](https://app.getoutline.com/share/770a97da-13e5-401e-9f8a-37949c19f97e/) for running your own copy of Outline in a production configuration.

 If you have questions or improvements for the docs please create a thread in [GitHub discussions](https://github.com/outline/outline/discussions).

 # Development

-There is a short guide for [setting up a development environment](https://docs.getoutline.com/s/hosting/doc/local-development-5hEhFRXow7) if you wish to contribute changes, fixes, and improvements to Outline.
+There is a short guide for [setting up a development environment](https://app.getoutline.com/share/770a97da-13e5-401e-9f8a-37949c19f97e/doc/local-development-5hEhFRXow7) if you wish to contribute changes, fixes, and improvements to Outline.

 ## Contributing

@@ -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;
@@ -3,7 +3,13 @@
  "description": "Open source wiki and knowledge base for growing teams",
  "website": "https://www.getoutline.com/",
  "repository": "https://github.com/outline/outline",
-  "keywords": ["wiki", "team", "node", "markdown", "slack"],
+  "keywords": [
+    "wiki",
+    "team",
+    "node",
+    "markdown",
+    "slack"
+  ],
  "success_url": "/",
  "formation": {
    "web": {
@@ -37,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
@@ -88,7 +98,7 @@
    },
    "OIDC_DISPLAY_NAME": {
      "description": "Display name for OIDC authentication",
-      "value": "OpenID Connect",
+      "value": "OpenID",
      "required": false
    },
    "OIDC_SCOPES": {
@@ -96,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
    },
@@ -182,15 +192,15 @@
      "required": false
    },
    "GOOGLE_ANALYTICS_ID": {
-      "description": "G-xxxx (optional)",
+      "description": "UA-xxxx (optional)",
      "required": false
    },
    "SENTRY_DSN": {
      "description": "An API key for Sentry if you wish to collect error reporting (optional)",
      "required": false
    },
-    "SENTRY_TUNNEL": {
-      "description": "A sentry tunnel URL for bypassing ad blockers in the UI (optional)",
+    "TEAM_LOGO": {
+      "description": "A logo that will be displayed on the signed out home page",
      "required": false
    },
    "DEFAULT_LANGUAGE": {
@@ -199,4 +209,4 @@
      "required": false
    }
  }
-}
+}
@@ -1,11 +1,6 @@
 {
  "extends": [
-    "../.eslintrc",
-    "plugin:react/recommended",
-    "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,31 +1,20 @@
-import {
-  CollectionIcon,
-  EditIcon,
-  PadlockIcon,
-  PlusIcon,
-  StarredIcon,
-  TrashIcon,
-  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 CollectionDeleteDialog from "~/components/CollectionDeleteDialog";
-import DynamicCollectionIcon from "~/components/Icons/CollectionIcon";
+import DynamicCollectionIcon from "~/components/CollectionIcon";
 import { createAction } from "~/actions";
 import { CollectionSection } from "~/actions/sections";
 import history from "~/utils/history";

-const ColorCollectionIcon = ({ collection }: { collection: Collection }) => (
-  <DynamicCollectionIcon collection={collection} />
-);
+const ColorCollectionIcon = ({ collection }: { collection: Collection }) => {
+  return <DynamicCollectionIcon collection={collection} />;
+};

 export const openCollection = createAction({
  name: ({ t }) => t("Open collection"),
-  analyticsName: "Open collection",
  section: CollectionSection,
  shortcut: ["o", "c"],
  icon: <CollectionIcon />,
@@ -45,7 +34,6 @@ export const openCollection = createAction({

 export const createCollection = createAction({
  name: ({ t }) => t("New collection"),
-  analyticsName: "New collection",
  section: CollectionSection,
  icon: <PlusIcon />,
  keywords: "create",
@@ -62,9 +50,7 @@ export const createCollection = createAction({
 });

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

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

 export const openDocument = createAction({
  name: ({ t }) => t("Open document"),
-  analyticsName: "Open document",
  section: DocumentSection,
  shortcut: ["o", "d"],
  keywords: "go to",
@@ -61,11 +35,8 @@ export const openDocument = createAction({
        // cache if the document is renamed
        id: path.url,
        name: path.title,
-        icon: function _Icon() {
-          return stores.documents.get(path.id)?.isStarred ? (
-            <StarredIcon />
-          ) : null;
-        },
+        icon: () =>
+          stores.documents.get(path.id)?.isStarred ? <StarredIcon /> : null,
        section: DocumentSection,
        perform: () => history.push(path.url),
      }));
@@ -74,21 +45,18 @@ export const openDocument = createAction({

 export const createDocument = createAction({
  name: ({ t }) => t("New document"),
-  analyticsName: "New document",
  section: DocumentSection,
  icon: <NewDocumentIcon />,
  keywords: "create",
-  visible: ({ currentTeamId, stores }) =>
-    !!currentTeamId && stores.policies.abilities(currentTeamId).createDocument,
-  perform: ({ activeCollectionId, inStarredSection }) =>
-    history.push(newDocumentPath(activeCollectionId), {
-      starred: inStarredSection,
-    }),
+  visible: ({ activeCollectionId, stores }) =>
+    !!activeCollectionId &&
+    stores.policies.abilities(activeCollectionId).update,
+  perform: ({ activeCollectionId }) =>
+    activeCollectionId && history.push(newDocumentPath(activeCollectionId)),
 });

 export const starDocument = createAction({
  name: ({ t }) => t("Star"),
-  analyticsName: "Star document",
  section: DocumentSection,
  icon: <StarredIcon />,
  keywords: "favorite bookmark",
@@ -101,19 +69,18 @@ export const starDocument = createAction({
      !document?.isStarred && stores.policies.abilities(activeDocumentId).star
    );
  },
-  perform: async ({ activeDocumentId, stores }) => {
+  perform: ({ activeDocumentId, stores }) => {
    if (!activeDocumentId) {
      return;
    }

    const document = stores.documents.get(activeDocumentId);
-    await document?.star();
+    document?.star();
  },
 });

 export const unstarDocument = createAction({
  name: ({ t }) => t("Unstar"),
-  analyticsName: "Unstar document",
  section: DocumentSection,
  icon: <UnstarredIcon />,
  keywords: "unfavorite unbookmark",
@@ -127,231 +94,37 @@ export const unstarDocument = createAction({
      stores.policies.abilities(activeDocumentId).unstar
    );
  },
-  perform: async ({ activeDocumentId, stores }) => {
+  perform: ({ activeDocumentId, stores }) => {
    if (!activeDocumentId) {
      return;
    }

    const document = stores.documents.get(activeDocumentId);
-    await document?.unstar();
-  },
-});
-
-export const publishDocument = createAction({
-  name: ({ t }) => t("Publish"),
-  analyticsName: "Publish document",
-  section: DocumentSection,
-  icon: <PublishIcon />,
-  visible: ({ activeDocumentId, stores }) => {
-    if (!activeDocumentId) {
-      return false;
-    }
-    const document = stores.documents.get(activeDocumentId);
-    return (
-      !!document?.isDraft && stores.policies.abilities(activeDocumentId).update
-    );
-  },
-  perform: async ({ activeDocumentId, stores, t }) => {
-    if (!activeDocumentId) {
-      return;
-    }
-
-    const document = stores.documents.get(activeDocumentId);
-    if (document?.publishedAt) {
-      return;
-    }
-
-    if (document?.collectionId) {
-      await document.save(undefined, {
-        publish: true,
-      });
-      stores.toasts.showToast(t("Document published"), {
-        type: "success",
-      });
-    } else if (document) {
-      stores.dialogs.openModal({
-        title: t("Publish document"),
-        isCentered: true,
-        content: <DocumentPublish document={document} />,
-      });
-    }
-  },
-});
-
-export const unpublishDocument = createAction({
-  name: ({ t }) => t("Unpublish"),
-  analyticsName: "Unpublish document",
-  section: DocumentSection,
-  icon: <UnpublishIcon />,
-  visible: ({ activeDocumentId, stores }) => {
-    if (!activeDocumentId) {
-      return false;
-    }
-    return stores.policies.abilities(activeDocumentId).unpublish;
-  },
-  perform: async ({ activeDocumentId, stores, t }) => {
-    if (!activeDocumentId) {
-      return;
-    }
-
-    const document = stores.documents.get(activeDocumentId);
-
-    await document?.unpublish();
-
-    stores.toasts.showToast(t("Document unpublished"), {
-      type: "success",
-    });
-  },
-});
-
-export const subscribeDocument = createAction({
-  name: ({ t }) => t("Subscribe"),
-  analyticsName: "Subscribe to document",
-  section: DocumentSection,
-  icon: <SubscribeIcon />,
-  visible: ({ activeDocumentId, stores }) => {
-    if (!activeDocumentId) {
-      return false;
-    }
-
-    const document = stores.documents.get(activeDocumentId);
-
-    return (
-      !document?.isSubscribed &&
-      stores.policies.abilities(activeDocumentId).subscribe
-    );
-  },
-  perform: async ({ activeDocumentId, stores, t }) => {
-    if (!activeDocumentId) {
-      return;
-    }
-
-    const document = stores.documents.get(activeDocumentId);
-
-    await document?.subscribe();
-
-    stores.toasts.showToast(t("Subscribed to document notifications"), {
-      type: "success",
-    });
-  },
-});
-
-export const unsubscribeDocument = createAction({
-  name: ({ t }) => t("Unsubscribe"),
-  analyticsName: "Unsubscribe from document",
-  section: DocumentSection,
-  icon: <UnsubscribeIcon />,
-  visible: ({ activeDocumentId, stores }) => {
-    if (!activeDocumentId) {
-      return false;
-    }
-
-    const document = stores.documents.get(activeDocumentId);
-
-    return (
-      !!document?.isSubscribed &&
-      stores.policies.abilities(activeDocumentId).unsubscribe
-    );
-  },
-  perform: async ({ activeDocumentId, stores, currentUserId, t }) => {
-    if (!activeDocumentId || !currentUserId) {
-      return;
-    }
-
-    const document = stores.documents.get(activeDocumentId);
-
-    await document?.unsubscribe(currentUserId);
-
-    stores.toasts.showToast(t("Unsubscribed from document notifications"), {
-      type: "success",
-    });
-  },
-});
-
-export const downloadDocumentAsHTML = createAction({
-  name: ({ t }) => t("HTML"),
-  analyticsName: "Download document as HTML",
-  section: DocumentSection,
-  keywords: "html export",
-  icon: <DownloadIcon />,
-  iconInContextMenu: false,
-  visible: ({ activeDocumentId, stores }) =>
-    !!activeDocumentId && stores.policies.abilities(activeDocumentId).download,
-  perform: async ({ activeDocumentId, stores }) => {
-    if (!activeDocumentId) {
-      return;
-    }
-
-    const document = stores.documents.get(activeDocumentId);
-    await document?.download(ExportContentType.Html);
-  },
-});
-
-export const downloadDocumentAsPDF = createAction({
-  name: ({ t }) => t("PDF"),
-  analyticsName: "Download document as PDF",
-  section: DocumentSection,
-  keywords: "export",
-  icon: <DownloadIcon />,
-  iconInContextMenu: false,
-  visible: ({ activeDocumentId, stores }) =>
-    !!activeDocumentId &&
-    stores.policies.abilities(activeDocumentId).download &&
-    env.PDF_EXPORT_ENABLED,
-  perform: ({ activeDocumentId, t, stores }) => {
-    if (!activeDocumentId) {
-      return;
-    }
-
-    const id = stores.toasts.showToast(`${t("Exporting")}…`, {
-      type: "loading",
-      timeout: 30 * 1000,
-    });
-
-    const document = stores.documents.get(activeDocumentId);
-    document
-      ?.download(ExportContentType.Pdf)
-      .finally(() => id && stores.toasts.hideToast(id));
-  },
-});
-
-export const downloadDocumentAsMarkdown = createAction({
-  name: ({ t }) => t("Markdown"),
-  analyticsName: "Download document as Markdown",
-  section: DocumentSection,
-  keywords: "md markdown export",
-  icon: <DownloadIcon />,
-  iconInContextMenu: false,
-  visible: ({ activeDocumentId, stores }) =>
-    !!activeDocumentId && stores.policies.abilities(activeDocumentId).download,
-  perform: async ({ activeDocumentId, stores }) => {
-    if (!activeDocumentId) {
-      return;
-    }
-
-    const document = stores.documents.get(activeDocumentId);
-    await document?.download(ExportContentType.Markdown);
+    document?.unstar();
  },
 });

 export const downloadDocument = createAction({
  name: ({ t, isContextMenu }) =>
    isContextMenu ? t("Download") : t("Download document"),
-  analyticsName: "Download document",
  section: DocumentSection,
  icon: <DownloadIcon />,
  keywords: "export",
-  children: [
-    downloadDocumentAsHTML,
-    downloadDocumentAsPDF,
-    downloadDocumentAsMarkdown,
-  ],
+  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({
  name: ({ t, isContextMenu }) =>
    isContextMenu ? t("Duplicate") : t("Duplicate document"),
-  analyticsName: "Duplicate document",
  section: DocumentSection,
  icon: <DuplicateIcon />,
  keywords: "copy",
@@ -378,17 +151,7 @@ export const duplicateDocument = createAction({
 * of the collection for all collection members to see.
 */
 export const pinDocumentToCollection = createAction({
-  name: ({ activeDocumentId = "", t, stores }) => {
-    const selectedDocument = stores.documents.get(activeDocumentId);
-    const collectionName = selectedDocument
-      ? stores.documents.getCollectionForDocument(selectedDocument)?.name
-      : t("collection");
-
-    return t("Pin to {{collectionName}}", {
-      collectionName,
-    });
-  },
-  analyticsName: "Pin document to collection",
+  name: ({ t }) => t("Pin to collection"),
  section: DocumentSection,
  icon: <PinIcon />,
  iconInContextMenu: false,
@@ -407,19 +170,13 @@ export const pinDocumentToCollection = createAction({
      return;
    }

-    try {
-      const document = stores.documents.get(activeDocumentId);
-      await document?.pin(document.collectionId);
+    const document = stores.documents.get(activeDocumentId);
+    await document?.pin(document.collectionId);

-      const collection = stores.collections.get(activeCollectionId);
+    const collection = stores.collections.get(activeCollectionId);

-      if (!collection || !location.pathname.startsWith(collection?.url)) {
-        stores.toasts.showToast(t("Pinned to collection"));
-      }
-    } catch (err) {
-      stores.toasts.showToast(err.message, {
-        type: "error",
-      });
+    if (!collection || !location.pathname.startsWith(collection?.url)) {
+      stores.toasts.showToast(t("Pinned to collection"));
    }
  },
 });
@@ -430,7 +187,6 @@ export const pinDocumentToCollection = createAction({
 */
 export const pinDocumentToHome = createAction({
  name: ({ t }) => t("Pin to home"),
-  analyticsName: "Pin document to home",
  section: DocumentSection,
  icon: <PinIcon />,
  iconInContextMenu: false,
@@ -452,23 +208,16 @@ export const pinDocumentToHome = createAction({
    }
    const document = stores.documents.get(activeDocumentId);

-    try {
-      await document?.pin();
+    await document?.pin();

-      if (location.pathname !== homePath()) {
-        stores.toasts.showToast(t("Pinned to team home"));
-      }
-    } catch (err) {
-      stores.toasts.showToast(err.message, {
-        type: "error",
-      });
+    if (location.pathname !== homePath()) {
+      stores.toasts.showToast(t("Pinned to team home"));
    }
  },
 });

 export const pinDocument = createAction({
  name: ({ t }) => t("Pin"),
-  analyticsName: "Pin document",
  section: DocumentSection,
  icon: <PinIcon />,
  children: [pinDocumentToCollection, pinDocumentToHome],
@@ -477,18 +226,16 @@ export const pinDocument = createAction({
 export const printDocument = createAction({
  name: ({ t, isContextMenu }) =>
    isContextMenu ? t("Print") : t("Print document"),
-  analyticsName: "Print document",
  section: DocumentSection,
  icon: <PrintIcon />,
-  visible: ({ activeDocumentId }) => !!(activeDocumentId && window.print),
+  visible: ({ activeDocumentId }) => !!activeDocumentId,
  perform: async () => {
-    queueMicrotask(window.print);
+    window.print();
  },
 });

 export const importDocument = createAction({
  name: ({ t }) => t("Import document"),
-  analyticsName: "Import document",
  section: DocumentSection,
  icon: <ImportIcon />,
  keywords: "upload",
@@ -509,8 +256,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];
@@ -537,7 +284,6 @@ export const importDocument = createAction({

 export const createTemplate = createAction({
  name: ({ t }) => t("Templatize"),
-  analyticsName: "Templatize document",
  section: DocumentSection,
  icon: <ShapesIcon />,
  keywords: "new create template",
@@ -546,271 +292,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",
-  name: ({ t }) => t(`Open random document`),
-  analyticsName: "Open random document",
-  section: DocumentSection,
-  icon: <ShuffleIcon />,
-  perform: ({ stores, activeDocumentId }) => {
-    const documentPaths = stores.collections.pathsToDocuments.filter(
-      (path) => path.type === "document" && path.id !== activeDocumentId
-    );
-    const documentPath =
-      documentPaths[Math.round(Math.random() * documentPaths.length)];
-
-    if (documentPath) {
-      history.push(documentPath.url);
-    }
-  },
-});
-
-export const searchDocumentsForQuery = (searchQuery: string) =>
-  createAction({
-    id: "search",
-    name: ({ t }) =>
-      t(`Search documents for "{{searchQuery}}"`, { searchQuery }),
-    analyticsName: "Search documents",
-    section: DocumentSection,
-    icon: <SearchIcon />,
-    perform: () => history.push(searchPath(searchQuery)),
-    visible: ({ location }) => location.pathname !== searchPath(),
-  });
-
-export const moveDocument = createAction({
-  name: ({ t }) => t("Move"),
-  analyticsName: "Move document",
-  section: DocumentSection,
-  icon: <MoveIcon />,
-  visible: ({ activeDocumentId, stores }) => {
-    if (!activeDocumentId) {
-      return false;
-    }
-    return !!stores.policies.abilities(activeDocumentId).move;
-  },
-  perform: ({ activeDocumentId, stores, t }) => {
-    if (activeDocumentId) {
-      const document = stores.documents.get(activeDocumentId);
-      if (!document) {
-        return;
-      }
-
-      stores.dialogs.openModal({
-        title: t("Move {{ documentType }}", {
-          documentType: document.noun,
-        }),
-        isCentered: true,
-        content: <DocumentMove document={document} />,
-      });
-    }
-  },
-});
-
-export const archiveDocument = createAction({
-  name: ({ t }) => t("Archive"),
-  analyticsName: "Archive document",
-  section: DocumentSection,
-  icon: <ArchiveIcon />,
-  visible: ({ activeDocumentId, stores }) => {
-    if (!activeDocumentId) {
-      return false;
-    }
-    return !!stores.policies.abilities(activeDocumentId).archive;
-  },
-  perform: async ({ activeDocumentId, stores, t }) => {
-    if (activeDocumentId) {
-      const document = stores.documents.get(activeDocumentId);
-      if (!document) {
-        return;
-      }
-
-      await document.archive();
-      stores.toasts.showToast(t("Document archived"), {
-        type: "success",
-      });
-    }
-  },
-});
-
-export const deleteDocument = createAction({
-  name: ({ t }) => t("Delete"),
-  analyticsName: "Delete document",
-  section: DocumentSection,
-  icon: <TrashIcon />,
-  dangerous: true,
-  visible: ({ activeDocumentId, stores }) => {
-    if (!activeDocumentId) {
-      return false;
-    }
-    return !!stores.policies.abilities(activeDocumentId).delete;
-  },
-  perform: ({ activeDocumentId, stores, t }) => {
-    if (activeDocumentId) {
-      const document = stores.documents.get(activeDocumentId);
-      if (!document) {
-        return;
-      }
-
-      stores.dialogs.openModal({
-        title: t("Delete {{ documentName }}", {
-          documentName: document.noun,
-        }),
-        isCentered: true,
-        content: (
-          <DocumentDelete
-            document={document}
-            onSubmit={stores.dialogs.closeAllModals}
-          />
-        ),
-      });
-    }
-  },
-});
-
-export const permanentlyDeleteDocument = createAction({
-  name: ({ t }) => t("Permanently delete"),
-  analyticsName: "Permanently delete document",
-  section: DocumentSection,
-  icon: <CrossIcon />,
-  dangerous: true,
-  visible: ({ activeDocumentId, stores }) => {
-    if (!activeDocumentId) {
-      return false;
-    }
-    return !!stores.policies.abilities(activeDocumentId).permanentDelete;
-  },
-  perform: ({ activeDocumentId, stores, t }) => {
-    if (activeDocumentId) {
-      const document = stores.documents.get(activeDocumentId);
-      if (!document) {
-        return;
-      }
-
-      stores.dialogs.openModal({
-        title: t("Permanently delete {{ documentName }}", {
-          documentName: document.noun,
-        }),
-        isCentered: true,
-        content: (
-          <DocumentPermanentDelete
-            document={document}
-            onSubmit={stores.dialogs.closeAllModals}
-          />
-        ),
-      });
-    }
-  },
-});
-
-export const openDocumentComments = createAction({
-  name: ({ t }) => t("Comments"),
-  analyticsName: "Open comments",
-  section: DocumentSection,
-  icon: <CommentIcon />,
-  visible: ({ activeDocumentId, stores }) => {
-    const can = stores.policies.abilities(activeDocumentId ?? "");
-    return (
-      !!activeDocumentId &&
-      can.read &&
-      !can.restore &&
-      !!stores.auth.team?.getPreference(TeamPreference.Commenting)
-    );
-  },
-  perform: ({ activeDocumentId, stores }) => {
-    if (!activeDocumentId) {
-      return;
-    }
-
-    stores.ui.toggleComments(activeDocumentId);
-  },
-});
-
-export const openDocumentHistory = createAction({
-  name: ({ t }) => t("History"),
-  analyticsName: "Open document history",
-  section: DocumentSection,
-  icon: <HistoryIcon />,
-  visible: ({ activeDocumentId, stores }) => {
-    const can = stores.policies.abilities(activeDocumentId ?? "");
-    return !!activeDocumentId && can.read && !can.restore;
-  },
-  perform: ({ activeDocumentId, stores }) => {
-    if (!activeDocumentId) {
-      return;
-    }
-    const document = stores.documents.get(activeDocumentId);
-    if (!document) {
-      return;
-    }
-    history.push(documentHistoryPath(document));
-  },
-});
-
-export const openDocumentInsights = createAction({
-  name: ({ t }) => t("Insights"),
-  analyticsName: "Open document insights",
-  section: DocumentSection,
-  icon: <LightBulbIcon />,
-  visible: ({ activeDocumentId, stores }) => {
-    const can = stores.policies.abilities(activeDocumentId ?? "");
-    return !!activeDocumentId && can.read;
-  },
-  perform: ({ activeDocumentId, stores }) => {
-    if (!activeDocumentId) {
-      return;
-    }
-    const document = stores.documents.get(activeDocumentId);
-    if (!document) {
-      return;
-    }
-    history.push(documentInsightsPath(document));
-  },
-});
-
 export const rootDocumentActions = [
  openDocument,
-  archiveDocument,
  createDocument,
  createTemplate,
-  deleteDocument,
  importDocument,
  downloadDocument,
  starDocument,
  unstarDocument,
-  publishDocument,
-  unpublishDocument,
-  subscribeDocument,
-  unsubscribeDocument,
  duplicateDocument,
-  moveDocument,
-  openRandomDocument,
-  permanentlyDeleteDocument,
  printDocument,
  pinDocumentToCollection,
  pinDocumentToHome,
-  openDocumentComments,
-  openDocumentHistory,
-  openDocumentInsights,
 ];
@@ -11,37 +11,37 @@ import {
  EmailIcon,
  LogoutIcon,
  ProfileIcon,
-  BrowserIcon,
 } 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 Desktop from "~/utils/Desktop";
-import { isMac } from "~/utils/browser";
-import history from "~/utils/history";
-import isCloudHosted from "~/utils/isCloudHosted";
 import {
+  NavigationSection,
+  SearchSection,
+  RecentSearchesSection,
+} from "~/actions/sections";
+import history from "~/utils/history";
+import {
+  organizationSettingsPath,
+  profileSettingsPath,
  homePath,
  searchPath,
  draftsPath,
  templatesPath,
  archivePath,
  trashPath,
-  settingsPath,
 } from "~/utils/routeHelpers";

 export const navigateToHome = createAction({
  name: ({ t }) => t("Home"),
-  analyticsName: "Navigate to home",
  section: NavigationSection,
  shortcut: ["d"],
  icon: <HomeIcon />,
@@ -53,14 +53,23 @@ export const navigateToRecentSearchQuery = (searchQuery: SearchQuery) =>
  createAction({
    section: RecentSearchesSection,
    name: searchQuery.query,
-    analyticsName: "Navigate to recent search query",
    icon: <SearchIcon />,
    perform: () => history.push(searchPath(searchQuery.query)),
  });

+export const navigateToSearchQuery = (searchQuery: string) =>
+  createAction({
+    id: "search",
+    section: SearchSection,
+    name: ({ t }) =>
+      t(`Search documents for "{{searchQuery}}"`, { searchQuery }),
+    icon: <SearchIcon />,
+    perform: () => history.push(searchPath(searchQuery)),
+    visible: ({ location }) => location.pathname !== searchPath(),
+  });
+
 export const navigateToDrafts = createAction({
  name: ({ t }) => t("Drafts"),
-  analyticsName: "Navigate to drafts",
  section: NavigationSection,
  icon: <EditIcon />,
  perform: () => history.push(draftsPath()),
@@ -69,7 +78,6 @@ export const navigateToDrafts = createAction({

 export const navigateToTemplates = createAction({
  name: ({ t }) => t("Templates"),
-  analyticsName: "Navigate to templates",
  section: NavigationSection,
  icon: <ShapesIcon />,
  perform: () => history.push(templatesPath()),
@@ -78,7 +86,6 @@ export const navigateToTemplates = createAction({

 export const navigateToArchive = createAction({
  name: ({ t }) => t("Archive"),
-  analyticsName: "Navigate to archive",
  section: NavigationSection,
  shortcut: ["g", "a"],
  icon: <ArchiveIcon />,
@@ -88,7 +95,6 @@ export const navigateToArchive = createAction({

 export const navigateToTrash = createAction({
  name: ({ t }) => t("Trash"),
-  analyticsName: "Navigate to trash",
  section: NavigationSection,
  icon: <TrashIcon />,
  perform: () => history.push(trashPath()),
@@ -97,78 +103,44 @@ export const navigateToTrash = createAction({

 export const navigateToSettings = createAction({
  name: ({ t }) => t("Settings"),
-  analyticsName: "Navigate to settings",
  section: NavigationSection,
  shortcut: ["g", "s"],
  icon: <SettingsIcon />,
-  visible: ({ stores }) =>
-    stores.policies.abilities(stores.auth.team?.id || "").update,
-  perform: () => history.push(settingsPath("details")),
+  perform: () => history.push(organizationSettingsPath()),
 });

 export const navigateToProfileSettings = createAction({
  name: ({ t }) => t("Profile"),
-  analyticsName: "Navigate to profile settings",
  section: NavigationSection,
  iconInContextMenu: false,
  icon: <ProfileIcon />,
-  perform: () => history.push(settingsPath()),
-});
-
-export const navigateToNotificationSettings = createAction({
-  name: ({ t }) => t("Notifications"),
-  analyticsName: "Navigate to notification settings",
-  section: NavigationSection,
-  iconInContextMenu: false,
-  icon: <EmailIcon />,
-  perform: () => history.push(settingsPath("notifications")),
-});
-
-export const navigateToAccountPreferences = createAction({
-  name: ({ t }) => t("Preferences"),
-  analyticsName: "Navigate to account preferences",
-  section: NavigationSection,
-  iconInContextMenu: false,
-  icon: <SettingsIcon />,
-  perform: () => history.push(settingsPath("preferences")),
+  perform: () => history.push(profileSettingsPath()),
 });

 export const openAPIDocumentation = createAction({
  name: ({ t }) => t("API documentation"),
-  analyticsName: "Open API documentation",
  section: NavigationSection,
  iconInContextMenu: false,
  icon: <OpenIcon />,
  perform: () => window.open(developersUrl()),
 });

-export const toggleSidebar = createAction({
-  name: ({ t }) => t("Toggle sidebar"),
-  analyticsName: "Toggle sidebar",
-  keywords: "hide show navigation",
-  section: NavigationSection,
-  perform: ({ stores }) => stores.ui.toggleCollapsedSidebar(),
-});
-
 export const openFeedbackUrl = createAction({
  name: ({ t }) => t("Send us feedback"),
-  analyticsName: "Open feedback",
  section: NavigationSection,
  iconInContextMenu: false,
  icon: <EmailIcon />,
-  perform: () => window.open(feedbackUrl()),
+  perform: () => window.open(mailToUrl()),
 });

 export const openBugReportUrl = createAction({
  name: ({ t }) => t("Report a bug"),
-  analyticsName: "Open bug report",
  section: NavigationSection,
  perform: () => window.open(githubIssuesUrl()),
 });

 export const openChangelog = createAction({
  name: ({ t }) => t("Changelog"),
-  analyticsName: "Open changelog",
  section: NavigationSection,
  iconInContextMenu: false,
  icon: <OpenIcon />,
@@ -177,7 +149,6 @@ export const openChangelog = createAction({

 export const openKeyboardShortcuts = createAction({
  name: ({ t }) => t("Keyboard shortcuts"),
-  analyticsName: "Open keyboard shortcuts",
  section: NavigationSection,
  shortcut: ["?"],
  iconInContextMenu: false,
@@ -190,24 +161,8 @@ export const openKeyboardShortcuts = createAction({
  },
 });

-export const downloadApp = createAction({
-  name: ({ t }) =>
-    t("Download {{ platform }} app", {
-      platform: isMac() ? "macOS" : "Windows",
-    }),
-  analyticsName: "Download app",
-  section: NavigationSection,
-  iconInContextMenu: false,
-  icon: <BrowserIcon />,
-  visible: () => !Desktop.isElectron() && isMac() && isCloudHosted,
-  perform: () => {
-    window.open("https://desktop.getoutline.com");
-  },
-});
-
 export const logout = createAction({
  name: ({ t }) => t("Log out"),
-  analyticsName: "Log out",
  section: NavigationSection,
  icon: <LogoutIcon />,
  perform: () => stores.auth.logout(),
@@ -219,12 +174,11 @@ export const rootNavigationActions = [
  navigateToTemplates,
  navigateToArchive,
  navigateToTrash,
-  downloadApp,
+  navigateToSettings,
  openAPIDocumentation,
  openFeedbackUrl,
  openBugReportUrl,
  openChangelog,
  openKeyboardShortcuts,
-  toggleSidebar,
  logout,
 ];
@@ -1,16 +0,0 @@
-import { MarkAsReadIcon } from "outline-icons";
-import * as React from "react";
-import { createAction } from "..";
-import { NotificationSection } from "../sections";
-
-export const markNotificationsAsRead = createAction({
-  name: ({ t }) => t("Mark notifications as read"),
-  analyticsName: "Mark notifications as read",
-  section: NotificationSection,
-  icon: <MarkAsReadIcon />,
-  shortcut: ["Shift+Escape"],
-  perform: ({ stores }) => stores.notifications.markAllAsRead(),
-  visible: ({ stores }) => stores.notifications.approximateUnreadCount > 0,
-});
-
-export const rootNotificationActions = [markNotificationsAsRead];
@@ -1,79 +0,0 @@
-import copy from "copy-to-clipboard";
-import { LinkIcon, RestoreIcon } from "outline-icons";
-import * as React from "react";
-import { matchPath } from "react-router-dom";
-import stores from "~/stores";
-import { createAction } from "~/actions";
-import { RevisionSection } from "~/actions/sections";
-import history from "~/utils/history";
-import {
-  documentHistoryPath,
-  matchDocumentHistory,
-} from "~/utils/routeHelpers";
-
-export const restoreRevision = createAction({
-  name: ({ t }) => t("Restore revision"),
-  analyticsName: "Restore revision",
-  icon: <RestoreIcon />,
-  section: RevisionSection,
-  visible: ({ activeDocumentId, stores }) =>
-    !!activeDocumentId && stores.policies.abilities(activeDocumentId).update,
-  perform: async ({ event, location, activeDocumentId }) => {
-    event?.preventDefault();
-    if (!activeDocumentId) {
-      return;
-    }
-
-    const match = matchPath<{ revisionId: string }>(location.pathname, {
-      path: matchDocumentHistory,
-    });
-    const revisionId = match?.params.revisionId;
-
-    const document = stores.documents.get(activeDocumentId);
-    if (!document) {
-      return;
-    }
-
-    history.push(document.url, {
-      restore: true,
-      revisionId,
-    });
-  },
-});
-
-export const copyLinkToRevision = createAction({
-  name: ({ t }) => t("Copy link"),
-  analyticsName: "Copy link to revision",
-  icon: <LinkIcon />,
-  section: RevisionSection,
-  perform: async ({ activeDocumentId, stores, t }) => {
-    if (!activeDocumentId) {
-      return;
-    }
-
-    const match = matchPath<{ revisionId: string }>(location.pathname, {
-      path: matchDocumentHistory,
-    });
-    const revisionId = match?.params.revisionId;
-    const document = stores.documents.get(activeDocumentId);
-    if (!document) {
-      return;
-    }
-
-    const url = `${window.location.origin}${documentHistoryPath(
-      document,
-      revisionId
-    )}`;
-
-    copy(url, {
-      format: "text/plain",
-      onCopy: () => {
-        stores.toasts.showToast(t("Link copied"), {
-          type: "info",
-        });
-      },
-    });
-  },
-});
-
-export const rootRevisionActions = [];
@@ -7,7 +7,6 @@ import { SettingsSection } from "~/actions/sections";

 export const changeToDarkTheme = createAction({
  name: ({ t }) => t("Dark"),
-  analyticsName: "Change to dark theme",
  icon: <MoonIcon />,
  iconInContextMenu: false,
  keywords: "theme dark night",
@@ -18,7 +17,6 @@ export const changeToDarkTheme = createAction({

 export const changeToLightTheme = createAction({
  name: ({ t }) => t("Light"),
-  analyticsName: "Change to light theme",
  icon: <SunIcon />,
  iconInContextMenu: false,
  keywords: "theme light day",
@@ -29,7 +27,6 @@ export const changeToLightTheme = createAction({

 export const changeToSystemTheme = createAction({
  name: ({ t }) => t("System"),
-  analyticsName: "Change to system theme",
  icon: <BrowserIcon />,
  iconInContextMenu: false,
  keywords: "theme system default",
@@ -41,11 +38,9 @@ export const changeToSystemTheme = createAction({
 export const changeTheme = createAction({
  name: ({ t, isContextMenu }) =>
    isContextMenu ? t("Appearance") : t("Change theme"),
-  analyticsName: "Change theme",
  placeholder: ({ t }) => t("Change theme to"),
-  icon: function _Icon() {
-    return stores.ui.resolvedTheme === "light" ? <SunIcon /> : <MoonIcon />;
-  },
+  icon: () =>
+    stores.ui.resolvedTheme === "light" ? <SunIcon /> : <MoonIcon />,
  keywords: "appearance display",
  section: SettingsSection,
  children: [changeToLightTheme, changeToDarkTheme, changeToSystemTheme],
@@ -1,73 +0,0 @@
-import { PlusIcon } from "outline-icons";
-import * as React from "react";
-import styled from "styled-components";
-import { stringToColor } from "@shared/utils/color";
-import RootStore from "~/stores/RootStore";
-import TeamNew from "~/scenes/TeamNew";
-import TeamLogo from "~/components/TeamLogo";
-import { createAction } from "~/actions";
-import { ActionContext } from "~/types";
-import { TeamSection } from "../sections";
-
-export const createTeamsList = ({ stores }: { stores: RootStore }) =>
-  stores.auth.availableTeams?.map((session) => ({
-    id: `switch-${session.id}`,
-    name: session.name,
-    analyticsName: "Switch workspace",
-    section: TeamSection,
-    keywords: "change switch workspace organization team",
-    icon: function _Icon() {
-      return (
-        <StyledTeamLogo
-          alt={session.name}
-          model={{
-            initial: session.name[0],
-            avatarUrl: session.avatarUrl,
-            id: session.id,
-            color: stringToColor(session.id),
-          }}
-          size={24}
-        />
-      );
-    },
-    visible: ({ currentTeamId }: ActionContext) => currentTeamId !== session.id,
-    perform: () => (window.location.href = session.url),
-  })) ?? [];
-
-export const switchTeam = createAction({
-  name: ({ t }) => t("Switch workspace"),
-  placeholder: ({ t }) => t("Select a workspace"),
-  analyticsName: "Switch workspace",
-  keywords: "change switch workspace organization team",
-  section: TeamSection,
-  visible: ({ stores }) =>
-    !!stores.auth.availableTeams && stores.auth.availableTeams?.length > 1,
-  children: createTeamsList,
-});
-
-export const createTeam = createAction({
-  name: ({ t }) => `${t("New workspace")}…`,
-  analyticsName: "New workspace",
-  keywords: "create change switch workspace organization team",
-  section: TeamSection,
-  icon: <PlusIcon />,
-  visible: ({ stores, currentTeamId }) =>
-    stores.policies.abilities(currentTeamId ?? "").createTeam,
-  perform: ({ t, event, stores }) => {
-    event?.preventDefault();
-    event?.stopPropagation();
-    const { user } = stores.auth;
-    user &&
-      stores.dialogs.openModal({
-        title: t("Create a workspace"),
-        content: <TeamNew user={user} />,
-      });
-  },
-});
-
-const StyledTeamLogo = styled(TeamLogo)`
-  border-radius: 2px;
-  border: 0;
-`;
-
-export const rootTeamActions = [switchTeam, createTeam];
@@ -2,15 +2,13 @@ import { PlusIcon } from "outline-icons";
 import * as React from "react";
 import stores from "~/stores";
 import Invite from "~/scenes/Invite";
-import { UserDeleteDialog } from "~/components/UserDialogs";
 import { createAction } from "~/actions";
 import { UserSection } from "~/actions/sections";

 export const inviteUser = createAction({
  name: ({ t }) => `${t("Invite people")}…`,
-  analyticsName: "Invite people",
  icon: <PlusIcon />,
-  keywords: "team member workspace user",
+  keywords: "team member user",
  section: UserSection,
  visible: ({ stores }) =>
    stores.policies.abilities(stores.auth.team?.id || "").inviteUser,
@@ -22,31 +20,4 @@ export const inviteUser = createAction({
  },
 });

-export const deleteUserActionFactory = (userId: string) =>
-  createAction({
-    name: ({ t }) => `${t("Delete user")}…`,
-    analyticsName: "Delete user",
-    keywords: "leave",
-    dangerous: true,
-    section: UserSection,
-    visible: ({ stores }) => stores.policies.abilities(userId).delete,
-    perform: ({ t }) => {
-      const user = stores.users.get(userId);
-      if (!user) {
-        return;
-      }
-
-      stores.dialogs.openModal({
-        title: t("Delete user"),
-        isCentered: true,
-        content: (
-          <UserDeleteDialog
-            user={user}
-            onSubmit={stores.dialogs.closeAllModals}
-          />
-        ),
-      });
-    },
-  });
-
 export const rootUserActions = [inviteUser];
@@ -9,33 +9,11 @@ import {
  MenuItemButton,
  MenuItemWithChildren,
 } from "~/types";
-import Analytics from "~/utils/Analytics";
-
-function resolve<T>(value: any, context: ActionContext): T {
-  return typeof value === "function" ? value(context) : value;
-}

 export function createAction(definition: Optional<Action, "id">): Action {
  return {
    ...definition,
-    perform: definition.perform
-      ? (context) => {
-          // We muse use the specific analytics name here as the action name is
-          // translated and potentially contains user strings.
-          if (definition.analyticsName) {
-            Analytics.track("perform_action", definition.analyticsName, {
-              context: context.isButton
-                ? "button"
-                : context.isCommandBar
-                ? "commandbar"
-                : "contextmenu",
-            });
-          }
-
-          return definition.perform?.(context);
-        }
-      : undefined,
-    id: definition.id ?? uuidv4(),
+    id: uuidv4(),
  };
 }

@@ -43,13 +21,23 @@ 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
-      ? resolvedIcon
+      ? React.cloneElement(resolvedIcon, {
+          color: "currentColor",
+        })
      : undefined;

  if (resolvedChildren) {
@@ -72,17 +60,8 @@ export function actionToMenuItem(
    title,
    icon,
    visible,
-    dangerous: action.dangerous,
-    onClick: () => {
-      try {
-        action.perform?.(context);
-      } catch (err) {
-        context.stores.toasts.showToast(err.message, {
-          type: "error",
-        });
-      }
-    },
-    selected: action.selected?.(context),
+    onClick: () => action.perform && action.perform(context),
+    selected: action.selected ? action.selected(context) : undefined,
  };
 }

@@ -90,15 +69,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>(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
@@ -109,13 +96,14 @@ export function actionToKBar(
    {
      id: action.id,
      name: resolvedName,
-      analyticsName: action.analyticsName,
      section: resolvedSection,
      placeholder: resolvedPlaceholder,
      keywords: action.keywords ?? "",
      shortcut: action.shortcut || [],
      icon: resolvedIcon,
-      perform: action.perform ? () => action.perform?.(context) : undefined,
+      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,11 +1,8 @@
 import { rootCollectionActions } from "./definitions/collections";
-import { rootDeveloperActions } from "./definitions/developer";
+import { rootDebugActions } from "./definitions/debug";
 import { rootDocumentActions } from "./definitions/documents";
 import { rootNavigationActions } from "./definitions/navigation";
-import { rootNotificationActions } from "./definitions/notifications";
-import { rootRevisionActions } from "./definitions/revisions";
 import { rootSettingsActions } from "./definitions/settings";
-import { rootTeamActions } from "./definitions/teams";
 import { rootUserActions } from "./definitions/users";

 export default [
@@ -13,9 +10,6 @@ export default [
  ...rootDocumentActions,
  ...rootUserActions,
  ...rootNavigationActions,
-  ...rootNotificationActions,
-  ...rootRevisionActions,
  ...rootSettingsActions,
-  ...rootDeveloperActions,
-  ...rootTeamActions,
+  ...rootDebugActions,
 ];
@@ -2,21 +2,17 @@ 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 NotificationSection = ({ t }: ActionContext) => t("Notification");
-
 export const UserSection = ({ t }: ActionContext) => t("People");

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

 export const Action = styled(Flex)`
@@ -21,7 +20,7 @@ export const Separator = styled.div`
  margin-left: 12px;
  width: 1px;
  height: 28px;
-  background: ${s("divider")};
+  background: ${(props) => props.theme.divider};
 `;

 const Actions = styled(Flex)`
@@ -30,8 +29,8 @@ const Actions = styled(Flex)`
  right: 0;
  left: 0;
  border-radius: 3px;
-  background: ${s("background")};
-  transition: ${s("backgroundTransition")};
+  background: ${(props) => props.theme.background};
+  transition: ${(props) => props.theme.backgroundTransition};
  padding: 12px;
  backdrop-filter: blur(20px);

@@ -0,0 +1,45 @@
+/* global ga */
+import * as React from "react";
+import env from "~/env";
+
+type Props = {
+  children?: React.ReactNode;
+};
+
+export default class Analytics extends React.Component<Props> {
+  componentDidMount() {
+    if (!env.GOOGLE_ANALYTICS_ID) {
+      return;
+    }
+
+    // standard Google Analytics script
+    window.ga =
+      window.ga ||
+      function (...args) {
+        (ga.q = ga.q || []).push(args);
+      };
+
+    ga.l = +new Date();
+    ga("create", env.GOOGLE_ANALYTICS_ID, "auto");
+    ga("set", {
+      dimension1: "true",
+    });
+    ga("send", "pageview");
+    const script = document.createElement("script");
+    script.src = "https://www.google-analytics.com/analytics.js";
+    script.async = true;
+
+    // Track PWA install event
+    window.addEventListener("appinstalled", () => {
+      ga("send", "event", "pwa", "install");
+    });
+
+    if (document.body) {
+      document.body.appendChild(script);
+    }
+  }
+
+  render() {
+    return this.props.children || null;
+  }
+}
@@ -1,81 +0,0 @@
-/* eslint-disable prefer-rest-params */
-/* global ga */
-import { escape } from "lodash";
-import * as React from "react";
-import { IntegrationService } from "@shared/types";
-import env from "~/env";
-
-type Props = {
-  children?: React.ReactNode;
-};
-
-const Analytics: React.FC = ({ children }: Props) => {
-  // Google Analytics 3
-  React.useEffect(() => {
-    if (!env.GOOGLE_ANALYTICS_ID?.startsWith("UA-")) {
-      return;
-    }
-
-    // standard Google Analytics script
-    window.ga =
-      window.ga ||
-      function (...args) {
-        (ga.q = ga.q || []).push(args);
-      };
-
-    ga.l = +new Date();
-    ga("create", env.GOOGLE_ANALYTICS_ID, "auto");
-    ga("send", "pageview");
-    const script = document.createElement("script");
-    script.type = "text/javascript";
-    script.src = "https://www.google-analytics.com/analytics.js";
-    script.async = true;
-
-    // Track PWA install event
-    window.addEventListener("appinstalled", () => {
-      ga("send", "event", "pwa", "install");
-    });
-
-    document.getElementsByTagName("head")[0]?.appendChild(script);
-  }, []);
-
-  // Google Analytics 4
-  React.useEffect(() => {
-    const measurementIds = [];
-
-    if (env.analytics.service === IntegrationService.GoogleAnalytics) {
-      measurementIds.push(escape(env.analytics.settings?.measurementId));
-    }
-    if (env.GOOGLE_ANALYTICS_ID?.startsWith("G-")) {
-      measurementIds.push(env.GOOGLE_ANALYTICS_ID);
-    }
-    if (measurementIds.length === 0) {
-      return;
-    }
-
-    const params = {
-      allow_google_signals: false,
-      restricted_data_processing: true,
-    };
-
-    window.dataLayer = window.dataLayer || [];
-    window.gtag = function () {
-      window.dataLayer.push(arguments);
-    };
-    window.gtag("js", new Date());
-
-    for (const measurementId of measurementIds) {
-      window.gtag("config", measurementId, params);
-    }
-
-    const script = document.createElement("script");
-    script.type = "text/javascript";
-    script.src = `https://www.googletagmanager.com/gtag/js?id=${measurementIds[0]}`;
-    script.async = true;
-    document.getElementsByTagName("head")[0]?.appendChild(script);
-  }, []);
-
-  return <>{children}</>;
-};
-
-export default Analytics;
@@ -6,11 +6,17 @@ export default function Arrow() {
      width="13"
      height="30"
      viewBox="0 0 13 30"
-      fill="currentColor"
+      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
-      <path d="M7.40242 1.48635C8.23085 0.0650039 10.0656 -0.421985 11.5005 0.39863C12.9354 1.21924 13.427 3.03671 12.5986 4.45806L5.59858 16.4681C4.77015 17.8894 2.93538 18.3764 1.5005 17.5558C0.065623 16.7352 -0.426002 14.9177 0.402425 13.4964L7.40242 1.48635Z" />
-      <path d="M12.5986 25.5419C13.427 26.9633 12.9354 28.7808 11.5005 29.6014C10.0656 30.422 8.23087 29.935 7.40244 28.5136L0.402438 16.5036C-0.425989 15.0823 0.0656365 13.2648 1.50051 12.4442C2.93539 11.6236 4.77016 12.1106 5.59859 13.5319L12.5986 25.5419Z" />
+      <path
+        fill="currentColor"
+        d="M7.40242 1.48635C8.23085 0.0650039 10.0656 -0.421985 11.5005 0.39863C12.9354 1.21924 13.427 3.03671 12.5986 4.45806L5.59858 16.4681C4.77015 17.8894 2.93538 18.3764 1.5005 17.5558C0.065623 16.7352 -0.426002 14.9177 0.402425 13.4964L7.40242 1.48635Z"
+      />
+      <path
+        fill="currentColor"
+        d="M12.5986 25.5419C13.427 26.9633 12.9354 28.7808 11.5005 29.6014C10.0656 30.422 8.23087 29.935 7.40244 28.5136L0.402438 16.5036C-0.425989 15.0823 0.0656365 13.2648 1.50051 12.4442C2.93539 11.6236 4.77016 12.1106 5.59859 13.5319L12.5986 25.5419Z"
+      />
    </svg>
  );
 }
@@ -1,55 +0,0 @@
-import { observer } from "mobx-react";
-import * as React from "react";
-import {
-  useCompositeState,
-  Composite,
-  CompositeStateReturn,
-} from "reakit/Composite";
-
-type Props = React.HTMLAttributes<HTMLDivElement> & {
-  children: (composite: CompositeStateReturn) => React.ReactNode;
-  onEscape?: (ev: React.KeyboardEvent<HTMLDivElement>) => void;
-};
-
-function ArrowKeyNavigation(
-  { children, onEscape, ...rest }: Props,
-  ref: React.RefObject<HTMLDivElement>
-) {
-  const composite = useCompositeState();
-
-  const handleKeyDown = React.useCallback(
-    (ev) => {
-      if (onEscape) {
-        if (ev.nativeEvent.isComposing) {
-          return;
-        }
-
-        if (ev.key === "Escape") {
-          onEscape(ev);
-        }
-
-        if (
-          ev.key === "ArrowUp" &&
-          composite.currentId === composite.items[0].id
-        ) {
-          onEscape(ev);
-        }
-      }
-    },
-    [composite.currentId, composite.items, onEscape]
-  );
-
-  return (
-    <Composite
-      {...rest}
-      {...composite}
-      onKeyDown={handleKeyDown}
-      role="menu"
-      ref={ref}
-    >
-      {children(composite)}
-    </Composite>
-  );
-}
-
-export default observer(React.forwardRef(ArrowKeyNavigation));
@@ -0,0 +1,26 @@
+import * as React from "react";
+
+type Props = {
+  size?: number;
+  fill?: string;
+  className?: string;
+};
+
+function GoogleLogo({ size = 34, fill = "#FFF", className }: Props) {
+  return (
+    <svg
+      fill={fill}
+      width={size}
+      height={size}
+      viewBox="0 0 34 34"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g>
+        <path d="M32.6162791,13.9090909 L16.8837209,13.9090909 L16.8837209,20.4772727 L25.9395349,20.4772727 C25.0953488,24.65 21.5651163,27.0454545 16.8837209,27.0454545 C11.3581395,27.0454545 6.90697674,22.5636364 6.90697674,17 C6.90697674,11.4363636 11.3581395,6.95454545 16.8837209,6.95454545 C19.2627907,6.95454545 21.4116279,7.80454545 23.1,9.19545455 L28.0116279,4.25 C25.0186047,1.62272727 21.1813953,0 16.8837209,0 C7.52093023,0 0,7.57272727 0,17 C0,26.4272727 7.52093023,34 16.8837209,34 C25.3255814,34 33,27.8181818 33,17 C33,15.9954545 32.8465116,14.9136364 32.6162791,13.9090909 Z" />
+      </g>
+    </svg>
+  );
+}
+
+export default GoogleLogo;
@@ -0,0 +1,43 @@
+import * as React from "react";
+
+type Props = {
+  size?: number;
+  fill?: string;
+  className?: string;
+};
+
+function MicrosoftLogo({ size = 34, fill = "#FFF", className }: Props) {
+  return (
+    <svg
+      fill={fill}
+      width={size}
+      height={size}
+      viewBox="0 0 34 34"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M18.0002 1H33.9998C33.9998 5.8172 34.0007 10.6344 33.9988 15.4516C28.6666 15.4508 23.3334 15.4516 18.0012 15.4516C17.9993 10.6344 18.0002 5.8172 18.0002 1Z"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M18.0009 17.5173C23.3333 17.5155 28.6667 17.5164 34 17.5164V33H18C18.0009 27.8388 17.9991 22.6776 18.0009 17.5173V17.5173Z"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0 1H16L15.9988 15.4516H0V1Z"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0 17.5161C5.3332 17.5179 10.6664 17.5155 15.9996 17.5179C16.0005 22.6789 15.9996 27.839 15.9996 33H0V17.5161Z"
+      />
+    </svg>
+  );
+}
+
+export default MicrosoftLogo;
@@ -0,0 +1,48 @@
+import * as React from "react";
+import styled from "styled-components";
+import GoogleLogo from "./GoogleLogo";
+import MicrosoftLogo from "./MicrosoftLogo";
+import SlackLogo from "./SlackLogo";
+
+type Props = {
+  providerName: string;
+  size?: number;
+};
+
+function AuthLogo({ providerName, size = 16 }: Props) {
+  switch (providerName) {
+    case "slack":
+      return (
+        <Logo>
+          <SlackLogo size={size} />
+        </Logo>
+      );
+
+    case "google":
+      return (
+        <Logo>
+          <GoogleLogo size={size} />
+        </Logo>
+      );
+
+    case "azure":
+      return (
+        <Logo>
+          <MicrosoftLogo size={size} />
+        </Logo>
+      );
+
+    default:
+      return null;
+  }
+}
+
+const Logo = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+`;
+
+export default AuthLogo;
@@ -2,9 +2,11 @@ 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";
-import LoadingIndicator from "./LoadingIndicator";

 type Props = {
  children: JSX.Element;
@@ -13,23 +15,43 @@ 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
  React.useEffect(() => {
-    void changeLanguage(language, i18n);
+    changeLanguage(language, i18n);
  }, [i18n, language]);

  if (auth.authenticated) {
+    const { user, team } = auth;
+    const { hostname } = window.location;
+
+    if (!team || !user) {
+      return <LoadingIndicator />;
+    }
+
+    // If we're authenticated but viewing a domain that doesn't match the
+    // current team then kick the user to the teams correct domain.
+    if (team.domain) {
+      if (team.domain !== hostname) {
+        window.location.href = `${team.url}${window.location.pathname}`;
+        return <LoadingIndicator />;
+      }
+    } else if (
+      env.SUBDOMAINS_ENABLED &&
+      team.subdomain &&
+      isCustomSubdomain(hostname) &&
+      !hostname.startsWith(`${team.subdomain}.`)
+    ) {
+      window.location.href = `${team.url}${window.location.pathname}`;
+      return <LoadingIndicator />;
+    }
+
    return children;
  }

-  if (auth.isFetching) {
-    return <LoadingIndicator />;
-  }
-
-  void auth.logout(true);
+  auth.logout(true);
  return <Redirect to="/" />;
 };

@@ -1,59 +1,52 @@
-import { AnimatePresence } from "framer-motion";
-import { observer, useLocalStore } from "mobx-react";
+import { observable } from "mobx";
+import { observer } from "mobx-react";
 import * as React from "react";
-import { Switch, Route, useLocation, matchPath } from "react-router-dom";
-import { TeamPreference } from "@shared/types";
+import { withTranslation, WithTranslation } from "react-i18next";
+import { Switch, Route } from "react-router-dom";
+import RootStore from "~/stores/RootStore";
 import ErrorSuspended from "~/scenes/ErrorSuspended";
-import DocumentContext from "~/components/DocumentContext";
-import type { DocumentContextValue } from "~/components/DocumentContext";
 import Layout from "~/components/Layout";
 import RegisterKeyDown from "~/components/RegisterKeyDown";
 import Sidebar from "~/components/Sidebar";
-import SidebarRight from "~/components/Sidebar/Right";
 import SettingsSidebar from "~/components/Sidebar/Settings";
-import type { Editor as TEditor } from "~/editor";
-import usePolicy from "~/hooks/usePolicy";
-import useStores from "~/hooks/useStores";
 import history from "~/utils/history";
-import lazyWithRetry from "~/utils/lazyWithRetry";
 import {
  searchPath,
+  matchDocumentSlug as slug,
  newDocumentPath,
  settingsPath,
-  matchDocumentHistory,
-  matchDocumentSlug as slug,
-  matchDocumentInsights,
 } from "~/utils/routeHelpers";
 import Fade from "./Fade";
+import withStores from "./withStores";

-const DocumentComments = lazyWithRetry(
-  () => import("~/scenes/Document/components/Comments")
+const DocumentHistory = React.lazy(
+  () =>
+    import(
+      /* webpackChunkName: "document-history" */
+      "~/components/DocumentHistory"
+    )
 );
-const DocumentHistory = lazyWithRetry(
-  () => import("~/scenes/Document/components/History")
+const CommandBar = React.lazy(
+  () =>
+    import(
+      /* webpackChunkName: "command-bar" */
+      "~/components/CommandBar"
+    )
 );
-const DocumentInsights = lazyWithRetry(
-  () => import("~/scenes/Document/components/Insights")
-);
-const CommandBar = lazyWithRetry(() => import("~/components/CommandBar"));

-type Props = {
-  children?: React.ReactNode;
-};
+type Props = WithTranslation &
+  RootStore & {
+    children?: React.ReactNode;
+  };

-const AuthenticatedLayout: React.FC = ({ children }: Props) => {
-  const { ui, auth } = useStores();
-  const location = useLocation();
-  const can = usePolicy(ui.activeCollectionId);
-  const { user, team } = auth;
-  const documentContext = useLocalStore<DocumentContextValue>(() => ({
-    editor: null,
-    setEditor: (editor: TEditor) => {
-      documentContext.editor = editor;
-    },
-  }));
+@observer
+class AuthenticatedLayout extends React.Component<Props> {
+  scrollable: HTMLDivElement | null | undefined;

-  const goToSearch = (ev: KeyboardEvent) => {
+  @observable
+  keyboardShortcutsOpen = false;
+
+  goToSearch = (ev: KeyboardEvent) => {
    if (!ev.metaKey && !ev.ctrlKey) {
      ev.preventDefault();
      ev.stopPropagation();
@@ -61,77 +54,56 @@ const AuthenticatedLayout: React.FC = ({ children }: Props) => {
    }
  };

-  const goToNewDocument = (event: KeyboardEvent) => {
-    if (event.metaKey || event.altKey) {
+  goToNewDocument = () => {
+    const { activeCollectionId } = this.props.ui;
+    if (!activeCollectionId) {
      return;
    }
-    const { activeCollectionId } = ui;
-    if (!activeCollectionId || !can.createDocument) {
+    const can = this.props.policies.abilities(activeCollectionId);
+    if (!can.update) {
      return;
    }
    history.push(newDocumentPath(activeCollectionId));
  };

-  if (auth.isSuspended) {
-    return <ErrorSuspended />;
-  }
+  render() {
+    const { auth } = this.props;
+    const { user, team } = auth;
+    const showSidebar = auth.authenticated && user && team;
+    if (auth.isSuspended) {
+      return <ErrorSuspended />;
+    }

-  const showSidebar = auth.authenticated && user && team;
+    const sidebar = showSidebar ? (
+      <Fade>
+        <Switch>
+          <Route path={settingsPath()} component={SettingsSidebar} />
+          <Route component={Sidebar} />
+        </Switch>
+      </Fade>
+    ) : undefined;

-  const sidebar = showSidebar ? (
-    <Fade>
-      <Switch>
-        <Route path={settingsPath()} component={SettingsSidebar} />
-        <Route component={Sidebar} />
-      </Switch>
-    </Fade>
-  ) : undefined;
+    const rightRail = (
+      <React.Suspense fallback={null}>
+        <Switch>
+          <Route
+            path={`/doc/${slug}/history/:revisionId?`}
+            component={DocumentHistory}
+          />
+        </Switch>
+      </React.Suspense>
+    );

-  const showHistory = !!matchPath(location.pathname, {
-    path: matchDocumentHistory,
-  });
-  const showInsights = !!matchPath(location.pathname, {
-    path: matchDocumentInsights,
-  });
-  const showComments =
-    !showInsights &&
-    !showHistory &&
-    ui.activeDocumentId &&
-    ui.commentsExpanded.includes(ui.activeDocumentId) &&
-    team?.getPreference(TeamPreference.Commenting);
-
-  const sidebarRight = (
-    <AnimatePresence
-      initial={false}
-      key={ui.activeDocumentId ? "active" : "inactive"}
-    >
-      {(showHistory || showInsights || showComments) && (
-        <Route path={`/doc/${slug}`}>
-          <SidebarRight>
-            <React.Suspense fallback={null}>
-              {showHistory && <DocumentHistory />}
-              {showInsights && <DocumentInsights />}
-              {showComments && <DocumentComments />}
-            </React.Suspense>
-          </SidebarRight>
-        </Route>
-      )}
-    </AnimatePresence>
-  );
-
-  return (
-    <DocumentContext.Provider value={documentContext}>
-      <Layout title={team?.name} sidebar={sidebar} sidebarRight={sidebarRight}>
-        <RegisterKeyDown trigger="n" handler={goToNewDocument} />
-        <RegisterKeyDown trigger="t" handler={goToSearch} />
-        <RegisterKeyDown trigger="/" handler={goToSearch} />
-        {children}
-        <React.Suspense fallback={null}>
-          <CommandBar />
-        </React.Suspense>
+    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>
-    </DocumentContext.Provider>
-  );
-};
+    );
+  }
+}

-export default observer(AuthenticatedLayout);
+export default withTranslation()(withStores(AuthenticatedLayout));
@@ -1,67 +1,64 @@
+import { observable } from "mobx";
+import { observer } from "mobx-react";
 import * as React from "react";
 import styled from "styled-components";
-import useBoolean from "~/hooks/useBoolean";
-import Initials from "./Initials";
-
-export enum AvatarSize {
-  Small = 16,
-  Medium = 24,
-  Large = 32,
-  XLarge = 48,
-  XXLarge = 64,
-}
-
-export interface IAvatar {
-  avatarUrl: string | null;
-  color?: string;
-  initial?: string;
-  id?: string;
-}
+import User from "~/models/User";
+import placeholder from "./placeholder.png";

 type Props = {
-  size: AvatarSize;
-  src?: string;
-  model?: IAvatar;
+  src: string;
+  size: number;
+  icon?: React.ReactNode;
+  user?: User;
  alt?: string;
  showBorder?: boolean;
  onClick?: React.MouseEventHandler<HTMLImageElement>;
  className?: string;
-  style?: React.CSSProperties;
 };

-function Avatar(props: Props) {
-  const { showBorder, model, style, ...rest } = props;
-  const src = props.src || model?.avatarUrl;
-  const [error, handleError] = useBoolean(false);
+@observer
+class Avatar extends React.Component<Props> {
+  @observable
+  error: boolean;

-  return (
-    <Relative style={style}>
-      {src && !error ? (
+  static defaultProps = {
+    size: 24,
+  };
+
+  handleError = () => {
+    this.error = true;
+  };
+
+  render() {
+    const { src, icon, showBorder, ...rest } = this.props;
+    return (
+      <AvatarWrapper>
        <CircleImg
-          onError={handleError}
-          src={src}
+          onError={this.handleError}
+          src={this.error ? placeholder : src}
          $showBorder={showBorder}
          {...rest}
        />
-      ) : model ? (
-        <Initials color={model.color} $showBorder={showBorder} {...rest}>
-          {model.initial}
-        </Initials>
-      ) : (
-        <Initials $showBorder={showBorder} {...rest} />
-      )}
-    </Relative>
-  );
+        {icon && <IconWrapper>{icon}</IconWrapper>}
+      </AvatarWrapper>
+    );
+  }
 }

-Avatar.defaultProps = {
-  size: AvatarSize.Medium,
-};
-
-const Relative = styled.div`
+const AvatarWrapper = styled.div`
  position: relative;
-  user-select: none;
-  flex-shrink: 0;
+`;
+
+const IconWrapper = styled.div`
+  display: flex;
+  position: absolute;
+  bottom: -2px;
+  right: -2px;
+  background: ${(props) => props.theme.primary};
+  border: 2px solid ${(props) => props.theme.background};
+  border-radius: 100%;
+  width: 20px;
+  height: 20px;
 `;

 const CircleImg = styled.img<{ size: number; $showBorder?: boolean }>`
@@ -69,12 +66,10 @@ const CircleImg = styled.img<{ size: number; $showBorder?: boolean }>`
  width: ${(props) => props.size}px;
  height: ${(props) => props.size}px;
  border-radius: 50%;
-  border: ${(props) =>
-    props.$showBorder === false
-      ? "none"
-      : `2px solid ${props.theme.background}`};
+  border: 2px solid
+    ${(props) =>
+      props.$showBorder === false ? "transparent" : props.theme.background};
  flex-shrink: 0;
-  overflow: hidden;
 `;

 export default Avatar;
@@ -1,115 +1,141 @@
+import { observable } from "mobx";
 import { observer } from "mobx-react";
 import * as React from "react";
-import { useTranslation } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import styled, { css } from "styled-components";
-import { s } from "@shared/styles";
 import User from "~/models/User";
+import UserProfile from "~/scenes/UserProfile";
 import Avatar from "~/components/Avatar";
 import Tooltip from "~/components/Tooltip";

-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 model={user} 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 ${s("background")};
-      }
-    `}
+  &:hover:after {
+    border: 2px solid ${(props) => props.$color};
+    box-shadow: inset 0 0 0 2px ${(props) => props.theme.background};
+  }
 `;

-export default observer(AvatarWithPresence);
+export default withTranslation()(AvatarWithPresence);
@@ -1,27 +0,0 @@
-import styled from "styled-components";
-import Flex from "~/components/Flex";
-
-const Initials = styled(Flex)<{
-  color?: string;
-  size: number;
-  $showBorder?: boolean;
-}>`
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  width: 100%;
-  height: 100%;
-  color: #fff;
-  background-color: ${(props) => props.color};
-  width: ${(props) => props.size}px;
-  height: ${(props) => props.size}px;
-  border-radius: 50%;
-  border: 2px solid
-    ${(props) =>
-      props.$showBorder === false ? "transparent" : props.theme.background};
-  flex-shrink: 0;
-  font-size: ${(props) => props.size / 2}px;
-  font-weight: 500;
-`;
-
-export default Initials;
@@ -5,13 +5,9 @@ const Badge = styled.span<{ yellow?: boolean; primary?: boolean }>`
  margin-left: 10px;
  padding: 1px 5px 2px;
  background-color: ${({ yellow, primary, theme }) =>
-    yellow ? theme.yellow : primary ? theme.accent : "transparent"};
+    yellow ? theme.yellow : primary ? theme.primary : "transparent"};
  color: ${({ primary, yellow, theme }) =>
-    primary
-      ? theme.accentText
-      : yellow
-      ? theme.almostBlack
-      : theme.textTertiary};
+    primary ? theme.white : yellow ? theme.almostBlack : theme.textTertiary};
  border: 1px solid
    ${({ primary, yellow, theme }) =>
      primary || yellow
@@ -1,9 +1,8 @@
 import * as React from "react";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
-import { depths, s } from "@shared/styles";
 import env from "~/env";
-import OutlineIcon from "./Icons/OutlineIcon";
+import OutlineLogo from "./OutlineLogo";

 type Props = {
  href?: string;
@@ -12,8 +11,8 @@ type Props = {
 function Branding({ href = env.URL }: Props) {
  return (
    <Link href={href}>
-      <OutlineIcon size={20} />
-      &nbsp;{env.APP_NAME}
+      <OutlineLogo size={16} />
+      &nbsp;Outline
    </Link>
  );
 }
@@ -26,20 +25,20 @@ const Link = styled.a`
  font-size: 14px;
  text-decoration: none;
  border-top-right-radius: 2px;
-  color: ${s("text")};
+  color: ${(props) => props.theme.text};
  display: flex;
  align-items: center;

  svg {
-    fill: ${s("text")};
+    fill: ${(props) => props.theme.text};
  }

  &:hover {
-    background: ${s("sidebarBackground")};
+    background: ${(props) => props.theme.sidebarBackground};
  }

  ${breakpoint("tablet")`
-    z-index: ${depths.sidebar + 1};
+    z-index: ${(props: any) => props.theme.depths.sidebar + 1};
    position: fixed;
    bottom: 0;
    left: 0;
@@ -2,7 +2,6 @@ import { GoToIcon } from "outline-icons";
 import * as React from "react";
 import { Link } from "react-router-dom";
 import styled from "styled-components";
-import { s, ellipsis } from "@shared/styles";
 import Flex from "~/components/Flex";
 import BreadcrumbMenu from "~/menus/BreadcrumbMenu";
 import { MenuInternalLink } from "~/types";
@@ -10,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;
@@ -38,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
@@ -61,18 +56,19 @@ function Breadcrumb({

 const Slash = styled(GoToIcon)`
  flex-shrink: 0;
-  fill: ${s("divider")};
+  fill: ${(props) => props.theme.divider};
 `;

 const Item = styled(Link)<{ $highlight: boolean; $withIcon: boolean }>`
-  ${ellipsis()}
  display: flex;
  flex-shrink: 1;
  min-width: 0;
-  cursor: var(--pointer);
-  color: ${s("text")};
+  color: ${(props) => props.theme.text};
  font-size: 15px;
  height: 24px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
  font-weight: ${(props) => (props.$highlight ? "500" : "inherit")};
  margin-left: ${(props) => (props.$withIcon ? "4px" : "0")};

@@ -1,29 +1,22 @@
-import { LocationDescriptor } from "history";
 import { ExpandedIcon } from "outline-icons";
-import { darken, lighten, transparentize } from "polished";
+import { darken, lighten } from "polished";
 import * as React from "react";
 import styled from "styled-components";
-import { s } from "@shared/styles";
-import ActionButton, {
-  Props as ActionButtonProps,
-} from "~/components/ActionButton";
-import { undraggableOnDesktop } from "~/styles";

-type RealProps = {
-  $fullwidth?: boolean;
-  $borderOnHover?: boolean;
+const RealButton = styled.button<{
+  fullwidth?: boolean;
+  borderOnHover?: boolean;
  $neutral?: boolean;
-  $danger?: boolean;
-};
-
-const RealButton = styled(ActionButton)<RealProps>`
-  display: ${(props) => (props.$fullwidth ? "block" : "inline-block")};
-  width: ${(props) => (props.$fullwidth ? "100%" : "auto")};
+  danger?: boolean;
+  iconColor?: string;
+}>`
+  display: ${(props) => (props.fullwidth ? "block" : "inline-block")};
+  width: ${(props) => (props.fullwidth ? "100%" : "auto")};
  margin: 0;
  padding: 0;
  border: 0;
-  background: ${s("accent")};
-  color: ${s("accentText")};
+  background: ${(props) => props.theme.buttonBackground};
+  color: ${(props) => props.theme.buttonText};
  box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px;
  border-radius: 4px;
  font-size: 14px;
@@ -31,10 +24,17 @@ const RealButton = styled(ActionButton)<RealProps>`
  height: 32px;
  text-decoration: none;
  flex-shrink: 0;
-  cursor: var(--pointer);
+  cursor: pointer;
  user-select: none;
  appearance: none !important;
-  ${undraggableOnDesktop()}
+
+  ${(props) =>
+    !props.borderOnHover &&
+    `
+      svg {
+        fill: ${props.iconColor || "currentColor"};
+      }
+    `}

  &::-moz-focus-inner {
    padding: 0;
@@ -43,14 +43,14 @@ const RealButton = styled(ActionButton)<RealProps>`

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

  &:disabled {
    cursor: default;
    pointer-events: none;
-    color: ${(props) => transparentize(0.5, props.theme.accentText)};
-    background: ${(props) => lighten(0.2, props.theme.accent)};
+    color: ${(props) => props.theme.white50};
+    background: ${(props) => lighten(0.2, props.theme.buttonBackground)};

    svg {
      fill: ${(props) => props.theme.white50};
@@ -60,18 +60,27 @@ const RealButton = styled(ActionButton)<RealProps>`
  ${(props) =>
    props.$neutral &&
    `
-    background: inherit;
+    background: ${props.theme.buttonNeutralBackground};
    color: ${props.theme.buttonNeutralText};
    box-shadow: ${
-      props.$borderOnHover
+      props.borderOnHover
        ? "none"
        : `rgba(0, 0, 0, 0.07) 0px 1px 2px, ${props.theme.buttonNeutralBorder} 0 0 0 1px inset`
    };

+    ${
+      props.borderOnHover
+        ? ""
+        : `svg {
+      fill: ${props.iconColor || "currentColor"};
+    }`
+    }
+
+
    &:hover:not(:disabled),
    &[aria-expanded="true"] {
      background: ${
-        props.$borderOnHover
+        props.borderOnHover
          ? props.theme.buttonNeutralBackground
          : darken(0.05, props.theme.buttonNeutralBackground)
      };
@@ -91,7 +100,7 @@ const RealButton = styled(ActionButton)<RealProps>`
  `}

  ${(props) =>
-    props.$danger &&
+    props.danger &&
    `
      background: ${props.theme.danger};
      color: ${props.theme.white};
@@ -102,11 +111,7 @@ const RealButton = styled(ActionButton)<RealProps>`
      }

      &:disabled {
-        background: ${lighten(0.05, props.theme.danger)};
-      }
-
-      &.focus-visible {
-        outline-color: ${darken(0.2, props.theme.danger)} !important;
+        background: none;
      }
  `};
 `;
@@ -136,17 +141,18 @@ export const Inner = styled.span<{
  ${(props) => props.hasIcon && !props.hasText && "padding: 0 4px;"};
 `;

-export type Props<T> = ActionButtonProps & {
+export type Props<T> = {
  icon?: React.ReactNode;
+  iconColor?: string;
  children?: React.ReactNode;
  disclosure?: boolean;
  neutral?: boolean;
  danger?: boolean;
+  primary?: boolean;
  fullwidth?: boolean;
  as?: T;
-  to?: LocationDescriptor;
+  to?: string;
  borderOnHover?: boolean;
-  hideIcon?: boolean;
  href?: string;
  "data-on"?: string;
  "data-event-category"?: string;
@@ -157,39 +163,16 @@ const Button = <T extends React.ElementType = "button">(
  props: Props<T> & React.ComponentPropsWithoutRef<T>,
  ref: React.Ref<HTMLButtonElement>
 ) => {
-  const {
-    type,
-    children,
-    value,
-    disclosure,
-    neutral,
-    action,
-    icon,
-    borderOnHover,
-    hideIcon,
-    fullwidth,
-    danger,
-    ...rest
-  } = props;
+  const { type, icon, children, value, disclosure, neutral, ...rest } = props;
  const hasText = children !== undefined || value !== undefined;
-  const ic = hideIcon ? undefined : action?.icon ?? icon;
-  const hasIcon = ic !== undefined;
+  const hasIcon = icon !== undefined;

  return (
-    <RealButton
-      type={type || "button"}
-      ref={ref}
-      $neutral={neutral}
-      action={action}
-      $danger={danger}
-      $fullwidth={fullwidth}
-      $borderOnHover={borderOnHover}
-      {...rest}
-    >
+    <RealButton type={type || "button"} ref={ref} $neutral={neutral} {...rest}>
      <Inner hasIcon={hasIcon} hasText={hasText} disclosure={disclosure}>
-        {hasIcon && ic}
+        {hasIcon && icon}
        {hasText && <Label hasIcon={hasIcon}>{children || value}</Label>}
-        {disclosure && <ExpandedIcon />}
+        {disclosure && <ExpandedIcon color="currentColor" />}
      </Inner>
    </RealButton>
  );
@@ -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;
@@ -1,15 +0,0 @@
-import styled from "styled-components";
-import Button, { Inner } from "./Button";
-
-const ButtonSmall = styled(Button)`
-  font-size: 13px;
-  height: 26px;
-
-  ${Inner} {
-    padding: 0 6px;
-    line-height: 26px;
-    min-height: 26px;
-  }
-`;
-
-export default ButtonSmall;
@@ -7,14 +7,14 @@ type Props = {
  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" : "60px"};
  `};
 `;

@@ -27,10 +27,12 @@ const Content = styled.div`
  `};
 `;

-const CenteredContent: React.FC<Props> = ({ children, ...rest }: Props) => (
-  <Container {...rest}>
-    <Content>{children}</Content>
-  </Container>
-);
+const CenteredContent = ({ children, ...rest }: Props) => {
+  return (
+    <Container {...rest}>
+      <Content>{children}</Content>
+    </Container>
+  );
+};

 export default CenteredContent;
@@ -42,7 +42,7 @@ const Circle = ({
      style={{
        transition: "stroke-dashoffset 0.6s ease 0s",
      }}
-    />
+    ></circle>
  );
 };

@@ -63,7 +63,7 @@ const CircularProgressBar = ({
        <Circle color={theme.progressBarBackground} offset={offset} />
        {percentage > 0 && (
          <Circle
-            color={theme.accent}
+            color={theme.primary}
            percentage={percentage}
            offset={offset}
          />
@@ -1,12 +1,9 @@
 import styled from "styled-components";

-const ClickablePadding = styled.div<{
-  grow?: boolean;
-  minHeight?: React.CSSProperties["paddingBottom"];
-}>`
-  min-height: ${(props) => props.minHeight || "50vh"};
-  flex-grow: 100;
-  cursor: text;
+const ClickablePadding = styled.div<{ grow?: boolean }>`
+  min-height: 10em;
+  cursor: ${({ onClick }) => (onClick ? "text" : "default")};
+  ${({ grow }) => grow && `flex-grow: 100;`};
 `;

 export default ClickablePadding;
@@ -4,11 +4,12 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { usePopoverState, PopoverDisclosure } from "reakit/Popover";
 import Document from "~/models/Document";
-import AvatarWithPresence from "~/components/Avatar/AvatarWithPresence";
+import { AvatarWithPresence } from "~/components/Avatar";
 import DocumentViews from "~/components/DocumentViews";
 import Facepile from "~/components/Facepile";
 import NudeButton from "~/components/NudeButton";
 import Popover from "~/components/Popover";
+import useCurrentTeam from "~/hooks/useCurrentTeam";
 import useCurrentUser from "~/hooks/useCurrentUser";
 import useStores from "~/hooks/useStores";

@@ -19,6 +20,7 @@ type Props = {
 function Collaborators(props: Props) {
  const { t } = useTranslation();
  const user = useCurrentUser();
+  const team = useCurrentTeam();
  const currentUserId = user?.id;
  const [requestedUserIds, setRequestedUserIds] = React.useState<string[]>([]);
  const { users, presence, ui } = useStores();
@@ -40,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)
      ),
@@ -51,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);
-      void 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({
@@ -77,7 +82,8 @@ function Collaborators(props: Props) {
                const isPresent = presentIds.includes(collaborator.id);
                const isEditing = editingIds.includes(collaborator.id);
                const isObserving = ui.observingUserId === collaborator.id;
-                const isObservable = collaborator.id !== user.id;
+                const isObservable =
+                  team.collaborativeEditing && collaborator.id !== user.id;

                return (
                  <AvatarWithPresence
@@ -87,6 +93,7 @@ function Collaborators(props: Props) {
                    isEditing={isEditing}
                    isObserving={isObserving}
                    isCurrentUser={currentUserId === collaborator.id}
+                    profileOnClick={false}
                    onClick={
                      isObservable
                        ? (ev) => {
@@ -1,16 +1,15 @@
-import debounce from "lodash/debounce";
 import { observer } from "mobx-react";
 import { transparentize } from "polished";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
-import { s } from "@shared/styles";
 import Collection from "~/models/Collection";
 import Arrow from "~/components/Arrow";
 import ButtonLink from "~/components/ButtonLink";
 import Editor from "~/components/Editor";
 import LoadingIndicator from "~/components/LoadingIndicator";
 import NudeButton from "~/components/NudeButton";
+import useDebouncedCallback from "~/hooks/useDebouncedCallback";
 import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
 import useToasts from "~/hooks/useToasts";
@@ -26,7 +25,7 @@ function CollectionDescription({ collection }: Props) {
  const [isExpanded, setExpanded] = React.useState(false);
  const [isEditing, setEditing] = React.useState(false);
  const [isDirty, setDirty] = React.useState(false);
-  const can = usePolicy(collection);
+  const can = usePolicy(collection.id);

  const handleStartEditing = React.useCallback(() => {
    setEditing(true);
@@ -50,30 +49,26 @@ 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(
-    async (getValue) => {
+    (getValue) => {
      setDirty(true);
-      await handleSave(getValue);
+      handleSave(getValue);
    },
    [handleSave]
  );
@@ -111,7 +106,8 @@ function CollectionDescription({ collection }: Props) {
                onBlur={handleStopEditing}
                maxLength={1000}
                embedsDisabled
-                canUpdate
+                readOnlyWriteCheckboxes
+                grow
              />
            </React.Suspense>
          ) : (
@@ -142,7 +138,7 @@ function CollectionDescription({ collection }: Props) {

 const Disclosure = styled(NudeButton)`
  opacity: 0;
-  color: ${s("divider")};
+  color: ${(props) => props.theme.divider};
  position: absolute;
  top: calc(25vh - 50px);
  left: 50%;
@@ -156,12 +152,12 @@ const Disclosure = styled(NudeButton)`
  }

  &:active {
-    color: ${s("sidebarText")};
+    color: ${(props) => props.theme.sidebarText};
  }
 `;

 const Placeholder = styled(ButtonLink)`
-  color: ${s("placeholder")};
+  color: ${(props) => props.theme.placeholder};
  cursor: text;
  min-height: 27px;
 `;
@@ -194,7 +190,7 @@ const Input = styled.div`
  margin: -8px;
  padding: 8px;
  border-radius: 8px;
-  transition: ${s("backgroundTransition")};
+  transition: ${(props) => props.theme.backgroundTransition};

  &:after {
    content: "";
@@ -207,7 +203,7 @@ const Input = styled.div`
    background: linear-gradient(
      180deg,
      ${(props) => transparentize(1, props.theme.background)} 0%,
-      ${s("background")} 100%
+      ${(props) => props.theme.background} 100%
    );
  }

@@ -219,7 +215,7 @@ const Input = styled.div`
  }

  &[data-editing="true"] {
-    background: ${s("secondaryBackground")};
+    background: ${(props) => props.theme.secondaryBackground};
  }

  .block-menu-trigger,
@@ -5,16 +5,11 @@ 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 = {
-  /** The collection to show an icon for */
  collection: Collection;
-  /** Whether the icon should be the "expanded" graphic when displaying the default collection icon */
  expanded?: boolean;
-  /** The size of the icon, 24px is default to match standard icons */
  size?: number;
-  /** The color of the icon, defaults to the collection color */
  color?: string;
 };

@@ -41,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,42 +1,40 @@
 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, s } from "@shared/styles";
 import CommandBarResults from "~/components/CommandBarResults";
 import SearchActions from "~/components/SearchActions";
 import rootActions from "~/actions/root";
 import useCommandBarActions from "~/hooks/useCommandBarActions";
-import useSettingsActions from "~/hooks/useSettingsActions";
+import useStores from "~/hooks/useStores";
 import { CommandBarAction } from "~/types";
+import { metaDisplay } from "~/utils/keyboard";
+import Text from "./Text";

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

-  useCommandBarActions(commandBarActions);
+  useCommandBarActions(rootActions);

  const { rootAction } = useKBar((state) => ({
    rootAction: state.currentRootActionId
-      ? (state.actions[
+      ? ((state.actions[
          state.currentRootActionId
-        ] as unknown as CommandBarAction)
+        ] as unknown) as CommandBarAction)
      : undefined,
  }));

  return (
    <>
+      <SearchActions />
      <KBarPortal>
        <Positioner>
          <Animator>
-            <SearchActions />
            <SearchInput
              placeholder={`${
                rootAction?.placeholder ||
@@ -44,7 +42,20 @@ function CommandBar() {
                t("Type a command or search")
              }…`}
            />
-            <CommandBarResults />
+            <CommandBarResults
+              prioritizeSearchResults={ui.commandBarOpenedFromSidebar}
+            />
+            {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>
@@ -52,11 +63,7 @@ function CommandBar() {
  );
 }

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

  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)`
@@ -77,12 +94,12 @@ const SearchInput = styled(KBarSearch)`
  width: 100%;
  outline: none;
  border: none;
-  background: ${s("menuBackground")};
-  color: ${s("text")};
+  background: ${(props) => props.theme.menuBackground};
+  color: ${(props) => props.theme.text};

  &:disabled,
  &::placeholder {
-    color: ${s("placeholder")};
+    color: ${(props) => props.theme.placeholder};
  }
 `;

@@ -90,8 +107,8 @@ const Animator = styled(KBarAnimator)`
  max-width: 600px;
  max-height: 75vh;
  width: 90vw;
-  background: ${s("menuBackground")};
-  color: ${s("text")};
+  background: ${(props) => props.theme.menuBackground};
+  color: ${(props) => props.theme.text};
  border-radius: 8px;
  overflow: hidden;
  box-shadow: rgb(0 0 0 / 40%) 0px 16px 60px;
@@ -2,10 +2,8 @@ import { ActionImpl } from "kbar";
 import { ArrowIcon, BackIcon } from "outline-icons";
 import * as React from "react";
 import styled, { css, useTheme } from "styled-components";
-import { s, ellipsis } from "@shared/styles";
 import Flex from "~/components/Flex";
 import Key from "~/components/Key";
-import Text from "./Text";

 type Props = {
  action: ActionImpl;
@@ -40,9 +38,10 @@ function CommandBarItem(
            // @ts-expect-error no icon on ActionImpl
            React.cloneElement(action.icon, {
              size: 22,
+              color: "currentColor",
            })
          ) : (
-            <ArrowIcon />
+            <ArrowIcon color="currentColor" />
          )}
        </Icon>

@@ -56,68 +55,54 @@ function CommandBarItem(
        {action.children?.length ? "…" : ""}
      </Content>
      {action.shortcut?.length ? (
-        <Shortcut>
-          {action.shortcut.map((sc: string, index) => (
-            <React.Fragment key={sc}>
-              {index > 0 ? (
-                <>
-                  {" "}
-                  <Text size="xsmall" as="span" type="secondary">
-                    then
-                  </Text>{" "}
-                </>
-              ) : (
-                ""
-              )}
-              {sc.split("+").map((s) => (
-                <Key key={s}>{s}</Key>
-              ))}
-            </React.Fragment>
+        <div
+          style={{
+            display: "grid",
+            gridAutoFlow: "column",
+            gap: "4px",
+          }}
+        >
+          {action.shortcut.map((sc: string) => (
+            <Key key={sc}>{sc}</Key>
          ))}
-        </Shortcut>
+        </div>
      ) : null}
    </Item>
  );
 }

-const Shortcut = styled.div`
-  display: grid;
-  grid-auto-flow: column;
-  gap: 4px;
-`;
-
 const Icon = styled(Flex)`
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
-  color: ${s("textSecondary")};
+  color: ${(props) => props.theme.textSecondary};
  flex-shrink: 0;
 `;

 const Ancestor = styled.span`
-  color: ${s("textSecondary")};
+  color: ${(props) => props.theme.textSecondary};
 `;

 const Content = styled(Flex)`
-  ${ellipsis()}
+  overflow: hidden;
+  text-overflow: ellipsis;
  flex-shrink: 1;
 `;

 const Item = styled.div<{ active?: boolean }>`
-  font-size: 14px;
-  padding: 9px 12px;
-  margin: 0 8px;
-  border-radius: 4px;
+  font-size: 15px;
+  padding: 10px 16px;
  background: ${(props) =>
    props.active ? props.theme.menuItemSelected : "none"};
  display: flex;
  align-items: center;
  justify-content: space-between;
-  cursor: var(--pointer);
+  cursor: pointer;

-  ${ellipsis()}
-  user-select: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
  min-width: 0;

  ${(props) =>
@@ -1,45 +1,48 @@
 import { useMatches, KBarResults } from "kbar";
+import { orderBy } from "lodash";
 import * as React from "react";
 import styled from "styled-components";
-import { s } from "@shared/styles";
 import CommandBarItem from "~/components/CommandBarItem";
+import { SearchSection } from "~/actions/sections";

-export default function CommandBarResults() {
+type Props = {
+  prioritizeSearchResults: boolean;
+};
+
+export default function CommandBarResults(props: Props) {
  const { results, rootActionId } = useMatches();

  return (
-    <Container>
-      <KBarResults
-        items={results}
-        maxHeight={400}
-        onRender={({ item, active }) =>
-          typeof item === "string" ? (
-            <Header>{item}</Header>
-          ) : (
-            <CommandBarItem
-              action={item}
-              active={active}
-              currentRootActionId={rootActionId}
-            />
-          )
-        }
-      />
-    </Container>
+    <KBarResults
+      items={orderBy(results, (item) =>
+        // this is an unfortunate hack until kbar supports priority internally
+        typeof item !== "string" &&
+        item.section === SearchSection &&
+        props.prioritizeSearchResults
+          ? -1
+          : 1
+      )}
+      maxHeight={400}
+      onRender={({ item, active }) =>
+        typeof item === "string" ? (
+          <Header>{item}</Header>
+        ) : (
+          <CommandBarItem
+            action={item}
+            active={active}
+            currentRootActionId={rootActionId}
+          />
+        )
+      }
+    />
  );
 }

-// Cannot style KBarResults unfortunately, so we must wrap and target the inner
-const Container = styled.div`
-  > div {
-    padding-bottom: 8px;
-  }
-`;
-
 const Header = styled.h3`
  font-size: 13px;
  letter-spacing: 0.04em;
  margin: 0;
  padding: 16px 0 4px 20px;
-  color: ${s("textTertiary")};
+  color: ${(props) => props.theme.textTertiary};
  height: 36px;
 `;
@@ -1,53 +0,0 @@
-import { observer } from "mobx-react";
-import * as React from "react";
-import { useTranslation, Trans } from "react-i18next";
-import Comment from "~/models/Comment";
-import ConfirmationDialog from "~/components/ConfirmationDialog";
-import Text from "~/components/Text";
-import useStores from "~/hooks/useStores";
-import useToasts from "~/hooks/useToasts";
-
-type Props = {
-  comment: Comment;
-  onSubmit?: () => void;
-};
-
-function CommentDeleteDialog({ comment, onSubmit }: Props) {
-  const { comments } = useStores();
-  const { showToast } = useToasts();
-  const { t } = useTranslation();
-  const hasChildComments = comments.inThread(comment.id).length > 1;
-
-  const handleSubmit = async () => {
-    try {
-      await comment.delete();
-      onSubmit?.();
-    } catch (err) {
-      showToast(err.message, { type: "error" });
-    }
-  };
-
-  return (
-    <ConfirmationDialog
-      onSubmit={handleSubmit}
-      submitText={t("I’m sure – Delete")}
-      savingText={`${t("Deleting")}…`}
-      danger
-    >
-      <Text type="secondary">
-        {hasChildComments ? (
-          <Trans>
-            Are you sure you want to permanently delete this entire comment
-            thread?
-          </Trans>
-        ) : (
-          <Trans>
-            Are you sure you want to permanently delete this comment?
-          </Trans>
-        )}
-      </Text>
-    </ConfirmationDialog>
-  );
-}
-
-export default observer(CommentDeleteDialog);
@@ -1,70 +0,0 @@
-import { observer } from "mobx-react";
-import * as React from "react";
-import Button from "~/components/Button";
-import Flex from "~/components/Flex";
-import Text from "~/components/Text";
-import useStores from "~/hooks/useStores";
-import useToasts from "~/hooks/useToasts";
-
-type Props = {
-  /** Callback when the dialog is submitted */
-  onSubmit: () => Promise<void> | void;
-  /** Text to display on the submit button */
-  submitText?: string;
-  /** Text to display while the form is saving */
-  savingText?: string;
-  /** If true, the submit button will be a dangerous red */
-  danger?: boolean;
-  /** Keep the submit button disabled */
-  disabled?: boolean;
-  children?: React.ReactNode;
-};
-
-const ConfirmationDialog: React.FC<Props> = ({
-  onSubmit,
-  children,
-  submitText,
-  savingText,
-  danger,
-  disabled = false,
-}: Props) => {
-  const [isSaving, setIsSaving] = React.useState(false);
-  const { dialogs } = useStores();
-  const { showToast } = useToasts();
-
-  const handleSubmit = React.useCallback(
-    async (ev: React.SyntheticEvent) => {
-      ev.preventDefault();
-      setIsSaving(true);
-      try {
-        await onSubmit();
-        dialogs.closeAllModals();
-      } catch (err) {
-        showToast(err.message, {
-          type: "error",
-        });
-      } finally {
-        setIsSaving(false);
-      }
-    },
-    [onSubmit, dialogs, showToast]
-  );
-
-  return (
-    <Flex column>
-      <form onSubmit={handleSubmit}>
-        <Text type="secondary">{children}</Text>
-        <Button
-          type="submit"
-          disabled={isSaving || disabled}
-          danger={danger}
-          autoFocus
-        >
-          {isSaving && savingText ? savingText : submitText}
-        </Button>
-      </form>
-    </Flex>
-  );
-};
-
-export default observer(ConfirmationDialog);
@@ -39,8 +39,8 @@ const Button = styled(NudeButton)`
  display: none;
  position: fixed;
  bottom: 0;
+  right: 32px;
  margin: 24px;
-  transform: translateX(-32px);

  ${breakpoint("tablet")`
    display: block;
@@ -1,8 +1,6 @@
 import isPrintableKeyEvent from "is-printable-key-event";
 import * as React from "react";
 import styled from "styled-components";
-import { s } from "@shared/styles";
-import useOnScreen from "~/hooks/useOnScreen";

 type Props = Omit<React.HTMLAttributes<HTMLSpanElement>, "ref" | "onChange"> & {
  disabled?: boolean;
@@ -19,85 +17,44 @@ 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).
 */
-const ContentEditable = React.forwardRef(function _ContentEditable(
-  {
-    disabled,
-    onChange,
-    onInput,
-    onBlur,
-    onKeyDown,
-    value,
-    children,
-    className,
-    maxLength,
-    autoFocus,
-    placeholder,
-    readOnly,
-    dir,
-    onClick,
-    ...rest
-  }: Props,
-  ref: React.RefObject<RefHandle>
-) {
-  const contentRef = React.useRef<HTMLSpanElement>(null);
-  const [innerValue, setInnerValue] = React.useState<string>(value);
-  const lastValue = React.useRef(value);
+const ContentEditable = React.forwardRef(
+  (
+    {
+      disabled,
+      onChange,
+      onInput,
+      onBlur,
+      onKeyDown,
+      value,
+      children,
+      className,
+      maxLength,
+      autoFocus,
+      placeholder,
+      readOnly,
+      dir,
+      onClick,
+      ...rest
+    }: Props,
+    forwardedRef: React.RefObject<HTMLSpanElement>
+  ) => {
+    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: () => {
-      if (contentRef.current) {
-        contentRef.current.focus();
-        // looks unnecessary but required because of https://github.com/outline/outline/issues/5198
-        if (!contentRef.current.innerText) {
-          placeCaret(contentRef.current, true);
-        }
-      }
-    },
-    focusAtStart: () => {
-      if (contentRef.current) {
-        contentRef.current.focus();
-        placeCaret(contentRef.current, true);
-      }
-    },
-    focusAtEnd: () => {
-      if (contentRef.current) {
-        contentRef.current.focus();
-        placeCaret(contentRef.current, false);
-      }
-    },
-    getComputedDirection: () => {
-      if (contentRef.current) {
-        return window.getComputedStyle(contentRef.current).direction;
-      }
-      return "ltr";
-    },
-  }));
-
-  const wrappedEvent =
-    (
+    const wrappedEvent = (
      callback:
        | React.FocusEventHandler<HTMLSpanElement>
        | React.FormEventHandler<HTMLSpanElement>
        | React.KeyboardEventHandler<HTMLSpanElement>
        | undefined
-    ) =>
-    (event: any) => {
-      if (readOnly) {
-        return;
-      }
-
-      const text = event.currentTarget.textContent || "";
+    ) => (event: any) => {
+      const text = ref.current?.innerText || "";

      if (maxLength && isPrintableKeyEvent(event) && text.length >= maxLength) {
        event?.preventDefault();
@@ -106,86 +63,65 @@ const ContentEditable = React.forwardRef(function _ContentEditable(

      if (text !== lastValue.current) {
        lastValue.current = text;
-        onChange?.(text);
+        onChange && onChange(text);
      }

      callback?.(event);
    };

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

-  React.useEffect(() => {
-    if (autoFocus && isVisible && !disabled && !readOnly) {
-      contentRef.current?.focus();
-    }
-  }, [autoFocus, disabled, isVisible, readOnly, contentRef]);
+    React.useEffect(() => {
+      if (value !== ref.current?.innerText) {
+        setInnerValue(value);
+      }
+    }, [value, ref]);

-  React.useEffect(() => {
-    if (contentRef.current && value !== contentRef.current.textContent) {
-      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);
+      },
+      []
+    );

-  // Ensure only plain text can be pasted into input when pasting from another
-  // rich text source. Note: If `onPaste` prop is passed then it takes
-  // priority over this behavior.
-  const handlePaste = React.useCallback(
-    (event: React.ClipboardEvent<HTMLSpanElement>) => {
-      event.preventDefault();
-      const text = event.clipboardData.getData("text/plain");
-      window.document.execCommand("insertText", false, text);
-    },
-    []
-  );
-
-  return (
-    <div className={className} dir={dir} onClick={onClick}>
-      <Content
-        ref={contentRef}
-        contentEditable={!disabled && !readOnly}
-        onInput={wrappedEvent(onInput)}
-        onBlur={wrappedEvent(onBlur)}
-        onKeyDown={wrappedEvent(onKeyDown)}
-        onPaste={handlePaste}
-        data-placeholder={placeholder}
-        suppressContentEditableWarning
-        role="textbox"
-        {...rest}
-      >
-        {innerValue}
-      </Content>
-      {children}
-    </div>
-  );
-});
-
-function placeCaret(element: HTMLElement, atStart: boolean) {
-  if (
-    typeof window.getSelection !== "undefined" &&
-    typeof document.createRange !== "undefined"
-  ) {
-    const range = document.createRange();
-    range.selectNodeContents(element);
-    range.collapse(atStart);
-    const sel = window.getSelection();
-    sel?.removeAllRanges();
-    sel?.addRange(range);
+    return (
+      <div className={className} dir={dir} onClick={onClick}>
+        <Content
+          ref={ref}
+          contentEditable={!disabled && !readOnly}
+          onInput={wrappedEvent(onInput)}
+          onBlur={wrappedEvent(onBlur)}
+          onKeyDown={wrappedEvent(onKeyDown)}
+          onPaste={handlePaste}
+          data-placeholder={placeholder}
+          suppressContentEditableWarning
+          role="textbox"
+          {...rest}
+        >
+          {innerValue}
+        </Content>
+        {children}
+      </div>
+    );
  }
-}
+);

 const Content = styled.span`
-  background: ${s("background")};
-  transition: ${s("backgroundTransition")};
-  color: ${s("text")};
-  -webkit-text-fill-color: ${s("text")};
+  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;
-  word-break: anywhere;

  &:empty {
    display: inline-block;
@@ -193,8 +129,8 @@ const Content = styled.span`

  &:empty::before {
    display: inline-block;
-    color: ${s("placeholder")};
-    -webkit-text-fill-color: ${s("placeholder")};
+    color: ${(props) => props.theme.placeholder};
+    -webkit-text-fill-color: ${(props) => props.theme.placeholder};
    content: attr(data-placeholder);
    pointer-events: none;
    height: 0;
@@ -1,11 +1,10 @@
 import styled from "styled-components";
-import { s } from "@shared/styles";

 const Header = styled.h3`
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
-  color: ${s("sidebarText")};
+  color: ${(props) => props.theme.sidebarText};
  letter-spacing: 0.04em;
  margin: 1em 12px 0.5em;
 `;
@@ -1,89 +1,59 @@
-import { LocationDescriptor } from "history";
 import { CheckmarkIcon } from "outline-icons";
 import * as React from "react";
-import { mergeRefs } from "react-merge-refs";
 import { MenuItem as BaseMenuItem } from "reakit/Menu";
 import styled, { css } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
+import { hover } from "~/styles";
 import MenuIconWrapper from "../MenuIconWrapper";

 type Props = {
-  id?: string;
-  onClick?: (event: React.SyntheticEvent) => void | Promise<void>;
-  active?: boolean;
+  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>;
  hide?: () => void;
  level?: number;
  icon?: React.ReactElement;
-  children?: React.ReactNode;
-  ref?: React.LegacyRef<HTMLButtonElement> | undefined;
 };

-const MenuItem = (
-  {
-    onClick,
-    children,
-    active,
-    selected,
-    disabled,
-    as,
-    hide,
-    icon,
-    ...rest
-  }: Props,
-  ref: React.Ref<HTMLAnchorElement>
-) => {
-  const content = React.useCallback(
-    (props) => {
-      const handleClick = async (ev: React.MouseEvent) => {
-        hide?.();
-
-        if (onClick) {
-          ev.preventDefault();
-          await onClick(ev);
-        }
-      };
-
-      // Preventing default mousedown otherwise menu items do not work in Firefox,
-      // which triggers the hideOnClickOutside handler first via mousedown – hiding
-      // and un-rendering the menu contents.
-      const handleMouseDown = (ev: React.MouseEvent) => {
+const MenuItem = ({
+  onClick,
+  children,
+  selected,
+  disabled,
+  as,
+  hide,
+  icon,
+  ...rest
+}: Props) => {
+  const handleClick = React.useCallback(
+    (ev) => {
+      if (onClick) {
        ev.preventDefault();
        ev.stopPropagation();
-      };
+        onClick(ev);
+      }

-      return (
-        <MenuAnchor
-          {...props}
-          $active={active}
-          as={onClick ? "button" : as}
-          onClick={handleClick}
-          onMouseDown={handleMouseDown}
-          ref={mergeRefs([
-            ref,
-            props.ref as React.RefObject<HTMLAnchorElement>,
-          ])}
-        >
-          {selected !== undefined && (
-            <>
-              {selected ? <CheckmarkIcon /> : <Spacer />}
-              &nbsp;
-            </>
-          )}
-          {icon && <MenuIconWrapper>{icon}</MenuIconWrapper>}
-          {children}
-        </MenuAnchor>
-      );
+      if (hide) {
+        hide();
+      }
    },
-    [active, as, hide, icon, onClick, ref, children, selected]
+    [onClick, hide]
  );

+  // Preventing default mousedown otherwise menu items do not work in Firefox,
+  // which triggers the hideOnClickOutside handler first via mousedown – hiding
+  // and un-rendering the menu contents.
+  const handleMouseDown = React.useCallback((ev) => {
+    ev.preventDefault();
+    ev.stopPropagation();
+  }, []);
+
  return (
    <BaseMenuItem
      onClick={disabled ? undefined : onClick}
@@ -91,7 +61,28 @@ const MenuItem = (
      hide={hide}
      {...rest}
    >
-      {content}
+      {(props) => (
+        <MenuAnchor
+          {...props}
+          $toggleable={selected !== undefined}
+          as={onClick ? "button" : as}
+          onClick={handleClick}
+          onMouseDown={handleMouseDown}
+        >
+          {selected !== undefined && (
+            <>
+              {selected ? <CheckmarkIcon color="currentColor" /> : <Spacer />}
+              &nbsp;
+            </>
+          )}
+          {icon && (
+            <MenuIconWrapper>
+              {React.cloneElement(icon, { color: "currentColor" })}
+            </MenuIconWrapper>
+          )}
+          {children}
+        </MenuAnchor>
+      )}
    </BaseMenuItem>
  );
 };
@@ -102,20 +93,15 @@ const Spacer = styled.svg`
  flex-shrink: 0;
 `;

-type MenuAnchorProps = {
+export const MenuAnchorCSS = css<{
  level?: number;
  disabled?: boolean;
  dangerous?: boolean;
-  disclosure?: boolean;
-  $active?: boolean;
-};
-
-export const MenuAnchorCSS = css<MenuAnchorProps>`
+}>`
  display: flex;
  margin: 0;
  border: 0;
  padding: 12px;
-  border-radius: 4px;
  padding-left: ${(props) => 12 + (props.level || 0) * 10}px;
  width: 100%;
  min-height: 32px;
@@ -128,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;
@@ -139,52 +124,33 @@ export const MenuAnchorCSS = css<MenuAnchorProps>`
    opacity: ${(props) => (props.disabled ? ".5" : 1)};
  }

-  ${(props) => props.disabled && "pointer-events: none;"}
-
  ${(props) =>
-    props.$active === undefined &&
-    !props.disabled &&
-    `
-  @media (hover: hover) {
-    &:hover,
-    &:focus,
-    &.focus-visible {
-      color: ${props.theme.accentText};
-      background: ${props.dangerous ? props.theme.danger : props.theme.accent};
-      box-shadow: none;
-      cursor: var(--pointer);
+    props.disabled
+      ? "pointer-events: none;"
+      : `

-      svg {
-        fill: ${props.theme.accentText};
-      }
+  &:${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};
    }
  }
-  `}
-
-  ${(props) =>
-    props.$active &&
-    !props.disabled &&
-    `
-      color: ${props.theme.accentText};
-      background: ${props.dangerous ? props.theme.danger : props.theme.accent};
-      box-shadow: none;
-      cursor: var(--pointer);
-
-      svg {
-        fill: ${props.theme.accentText};
-      }
-    `}
+  `};

  ${breakpoint("tablet")`
    padding: 4px 12px;
-    padding-right: ${(props: MenuAnchorProps) =>
-      props.disclosure ? 32 : 12}px;
    font-size: 14px;
-  `}
+  `};
 `;

 export const MenuAnchor = styled.a`
  ${MenuAnchorCSS}
 `;

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

 type Props = React.ComponentProps<typeof MenuButton> & {
  className?: string;
+  iconColor?: string;
 };

-export default function OverflowMenuButton({ className, ...rest }: Props) {
+export default function OverflowMenuButton({
+  iconColor,
+  className,
+  ...rest
+}: Props) {
  return (
    <MenuButton {...rest}>
      {(props) => (
        <NudeButton className={className} {...props}>
-          <MoreIcon />
+          <MoreIcon color={iconColor} />
        </NudeButton>
      )}
    </MenuButton>
@@ -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} />}
@@ -11,5 +11,5 @@ export default function Separator(rest: React.HTMLAttributes<HTMLHRElement>) {
 }

 const HorizontalRule = styled.hr`
-  margin: 6px 0;
+  margin: 0.5em 12px;
 `;
@@ -6,7 +6,6 @@ import {
  useMenuState,
  MenuButton,
  MenuItem as BaseMenuItem,
-  MenuStateReturn,
 } from "reakit/Menu";
 import styled, { useTheme } from "styled-components";
 import Flex from "~/components/Flex";
@@ -22,11 +21,10 @@ import {
 } from "~/types";
 import Header from "./Header";
 import MenuItem, { MenuAnchor } from "./MenuItem";
-import MouseSafeArea from "./MouseSafeArea";
 import Separator from "./Separator";
 import ContextMenu from ".";

-type Props = Omit<MenuStateReturn, "items"> & {
+type Props = {
  actions?: (Action | MenuSeparator | MenuHeading)[];
  context?: Partial<ActionContext>;
  items?: TMenuItem[];
@@ -38,64 +36,60 @@ const Disclosure = styled(ExpandedIcon)`
  right: 8px;
 `;

-type SubMenuProps = MenuStateReturn & {
-  templateItems: TMenuItem[];
-  parentMenuState: Omit<MenuStateReturn, "items">;
-  title: React.ReactNode;
-};
+const Submenu = React.forwardRef(
+  (
+    {
+      templateItems,
+      title,
+      ...rest
+    }: { templateItems: TMenuItem[]; title: React.ReactNode },
+    ref: React.LegacyRef<HTMLButtonElement>
+  ) => {
+    const { t } = useTranslation();
+    const theme = useTheme();
+    const menu = useMenuState();

-const SubMenu = React.forwardRef(function _Template(
-  { templateItems, title, parentMenuState, ...rest }: SubMenuProps,
-  ref: React.LegacyRef<HTMLButtonElement>
-) {
-  const { t } = useTranslation();
-  const theme = useTheme();
-  const menu = useMenuState();
-
-  return (
-    <>
-      <MenuButton ref={ref} {...menu} {...rest}>
-        {(props) => (
-          <MenuAnchor disclosure {...props}>
-            {title} <Disclosure color={theme.textTertiary} />
-          </MenuAnchor>
-        )}
-      </MenuButton>
-      <ContextMenu
-        {...menu}
-        aria-label={t("Submenu")}
-        onClick={parentMenuState.hide}
-        parentMenuState={parentMenuState}
-      >
-        <MouseSafeArea parentRef={menu.unstable_popoverRef} />
-        <Template {...menu} items={templateItems} />
-      </ContextMenu>
-    </>
-  );
-});
+    return (
+      <>
+        <MenuButton ref={ref} {...menu} {...rest}>
+          {(props) => (
+            <MenuAnchor {...props}>
+              {title} <Disclosure color={theme.textTertiary} />
+            </MenuAnchor>
+          )}
+        </MenuButton>
+        <ContextMenu {...menu} aria-label={t("Submenu")}>
+          <Template {...menu} items={templateItems} />
+        </ContextMenu>
+      </>
+    );
+  }
+);

 export function filterTemplateItems(items: TMenuItem[]): TMenuItem[] {
-  return items
-    .filter((item) => item.visible !== false)
-    .reduce((acc, item) => {
-      // trim separator if the previous item was a separator
-      if (
-        item.type === "separator" &&
-        acc[acc.length - 1]?.type === "separator"
-      ) {
-        return acc;
-      }
-      return [...acc, item];
-    }, [] as TMenuItem[])
-    .filter((item, index, arr) => {
-      if (
-        item.type === "separator" &&
-        (index === 0 || index === arr.length - 1)
-      ) {
-        return false;
-      }
-      return true;
-    });
+  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) {
@@ -133,7 +127,6 @@ function Template({ items, actions, context, ...menu }: Props) {
          return (
            <MenuItem
              as={Link}
-              id={`${item.title}-${index}`}
              to={item.to}
              key={index}
              disabled={item.disabled}
@@ -149,7 +142,6 @@ function Template({ items, actions, context, ...menu }: Props) {
        if (item.type === "link") {
          return (
            <MenuItem
-              id={`${item.title}-${index}`}
              href={item.href}
              key={index}
              disabled={item.disabled}
@@ -168,7 +160,6 @@ function Template({ items, actions, context, ...menu }: Props) {
          return (
            <MenuItem
              as="button"
-              id={`${item.title}-${index}`}
              onClick={item.onClick}
              disabled={item.disabled}
              selected={item.selected}
@@ -186,10 +177,8 @@ function Template({ items, actions, context, ...menu }: Props) {
          return (
            <BaseMenuItem
              key={index}
-              as={SubMenu}
-              id={`${item.title}-${index}`}
+              as={Submenu}
              templateItems={item.items}
-              parentMenuState={menu}
              title={<Title title={item.title} icon={item.icon} />}
              {...menu}
            />
@@ -1,17 +1,10 @@
-import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock";
 import * as React from "react";
-import { useTranslation } from "react-i18next";
-import { Menu, MenuStateReturn } from "reakit/Menu";
-import styled, { DefaultTheme } from "styled-components";
+import { Portal } from "react-portal";
+import { Menu } from "reakit/Menu";
+import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
-import { depths, s } from "@shared/styles";
-import Scrollable from "~/components/Scrollable";
-import useMenuContext from "~/hooks/useMenuContext";
 import useMenuHeight from "~/hooks/useMenuHeight";
-import useMobile from "~/hooks/useMobile";
 import usePrevious from "~/hooks/usePrevious";
-import useStores from "~/hooks/useStores";
-import useUnmount from "~/hooks/useUnmount";
 import {
  fadeIn,
  fadeAndSlideUp,
@@ -36,83 +29,41 @@ export type Placement =
  | "left"
  | "left-start";

-type Props = MenuStateReturn & {
-  "aria-label"?: string;
-  /** The parent menu state if this is a submenu. */
-  parentMenuState?: Omit<MenuStateReturn, "items">;
-  /** Called when the context menu is opened. */
+type Props = {
+  "aria-label": string;
+  visible?: boolean;
+  placement?: Placement;
+  animating?: boolean;
+  children: React.ReactNode;
+  unstable_disclosureRef?: React.RefObject<HTMLElement | null>;
  onOpen?: () => void;
-  /** Called when the context menu is closed. */
  onClose?: () => void;
-  /** Called when the context menu is clicked. */
-  onClick?: (ev: React.MouseEvent) => void;
-  children?: React.ReactNode;
+  hide?: () => void;
 };

-const ContextMenu: React.FC<Props> = ({
+export default function ContextMenu({
  children,
  onOpen,
  onClose,
-  parentMenuState,
  ...rest
-}: Props) => {
+}: Props) {
  const previousVisible = usePrevious(rest.visible);
-  const maxHeight = useMenuHeight({
-    visible: rest.visible,
-    elementRef: rest.unstable_disclosureRef,
-  });
+  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();
-  const isSubMenu = !!parentMenuState;
-
-  useUnmount(() => {
-    setIsMenuOpen(false);
-  });

  React.useEffect(() => {
    if (rest.visible && !previousVisible) {
-      onOpen?.();
-
-      if (!isSubMenu) {
-        setIsMenuOpen(true);
+      if (onOpen) {
+        onOpen();
      }
    }

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

  // Perf win – don't render anything until the menu has been opened
  if (!rest.visible && !previousVisible) {
@@ -123,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
@@ -133,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={
-                    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;
@@ -178,18 +120,20 @@ export const Backdrop = styled.div`
  left: 0;
  right: 0;
  bottom: 0;
-  background: ${s("backdrop")};
-  z-index: ${depths.menu - 1};
+  background: ${(props) => props.theme.backdrop};
+  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;
@@ -200,21 +144,20 @@ 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%;
-  background: ${s("menuBackground")};
+  background: ${(props) => props.theme.menuBackground};
  border-radius: 6px;
-  padding: 6px;
+  padding: 6px 0;
  min-width: 180px;
  min-height: 44px;
+  overflow: hidden;
+  overflow-y: auto;
  max-height: 75vh;
  pointer-events: all;
  font-weight: normal;
@@ -224,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,17 +1,14 @@
 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 CollectionIcon from "~/components/Icons/CollectionIcon";
 import InputSelect from "~/components/InputSelect";
 import { IconWrapper } from "~/components/Sidebar/components/SidebarLink";
 import useStores from "~/hooks/useStores";
 import useToasts from "~/hooks/useToasts";

-type DefaultCollectionInputSelectProps = Optional<
-  React.ComponentProps<typeof InputSelect>
-> & {
+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();
@@ -28,7 +24,7 @@ const DefaultCollectionInputSelect = ({
  const { showToast } = useToasts();

  React.useEffect(() => {
-    async function fetchData() {
+    async function load() {
      if (!collections.isLoaded && !fetching && !fetchError) {
        try {
          setFetching(true);
@@ -48,7 +44,7 @@ const DefaultCollectionInputSelect = ({
        }
      }
    }
-    void fetchData();
+    load();
  }, [showToast, fetchError, t, fetching, collections]);

  const options = React.useMemo(
@@ -73,7 +69,7 @@ const DefaultCollectionInputSelect = ({
            label: (
              <Flex align="center">
                <IconWrapper>
-                  <HomeIcon />
+                  <HomeIcon color="currentColor" />
                </IconWrapper>
                {t("Home")}
              </Flex>
@@ -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}
    />
  );
 };
@@ -1,56 +0,0 @@
-import * as React from "react";
-import { useTranslation } from "react-i18next";
-import { useHistory } from "react-router-dom";
-import KeyboardShortcuts from "~/scenes/KeyboardShortcuts";
-import { useDesktopTitlebar } from "~/hooks/useDesktopTitlebar";
-import useStores from "~/hooks/useStores";
-import useToasts from "~/hooks/useToasts";
-import Desktop from "~/utils/Desktop";
-
-export default function DesktopEventHandler() {
-  useDesktopTitlebar();
-  const { t } = useTranslation();
-  const history = useHistory();
-  const { dialogs } = useStores();
-  const { showToast } = useToasts();
-
-  React.useEffect(() => {
-    Desktop.bridge?.redirect((path: string, replace = false) => {
-      if (replace) {
-        history.replace(path);
-      } else {
-        history.push(path);
-      }
-    });
-
-    Desktop.bridge?.updateDownloaded(() => {
-      showToast("An update is ready to install.", {
-        type: "info",
-        timeout: Infinity,
-        action: {
-          text: "Install now",
-          onClick: () => {
-            void Desktop.bridge?.restartAndInstall();
-          },
-        },
-      });
-    });
-
-    Desktop.bridge?.focus(() => {
-      window.document.body.classList.remove("backgrounded");
-    });
-
-    Desktop.bridge?.blur(() => {
-      window.document.body.classList.add("backgrounded");
-    });
-
-    Desktop.bridge?.openKeyboardShortcuts(() => {
-      dialogs.openGuide({
-        title: t("Keyboard shortcuts"),
-        content: <KeyboardShortcuts />,
-      });
-    });
-  }, [t, history, dialogs, showToast]);
-
-  return null;
-}
@@ -1,4 +1,4 @@
-import { observer } from "mobx-react";
+import { observer } from "mobx-react-lite";
 import * as React from "react";
 import Guide from "~/components/Guide";
 import Modal from "~/components/Modal";
@@ -22,7 +22,6 @@ function Dialogs() {
        <Modal
          key={id}
          isOpen={modal.isOpen}
-          isCentered={modal.isCentered}
          onRequestClose={() => dialogs.closeModal(id)}
          title={modal.title}
        >
@@ -1,9 +1,8 @@
 import styled from "styled-components";
-import { s } from "@shared/styles";

 const Divider = styled.hr`
  border: 0;
-  border-bottom: 1px solid ${s("divider")};
+  border-bottom: 1px solid ${(props) => props.theme.divider};
  margin: 0;
  padding: 0;
 `;
@@ -3,22 +3,16 @@ import { ArchiveIcon, GoToIcon, ShapesIcon, TrashIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
-import type { NavigationNode } from "@shared/types";
 import Document from "~/models/Document";
 import Breadcrumb from "~/components/Breadcrumb";
-import CollectionIcon from "~/components/Icons/CollectionIcon";
+import CollectionIcon from "~/components/CollectionIcon";
 import useStores from "~/hooks/useStores";
-import { MenuInternalLink } from "~/types";
-import {
-  archivePath,
-  collectionPath,
-  templatesPath,
-  trashPath,
-} from "~/utils/routeHelpers";
+import { MenuInternalLink, NavigationNode } from "~/types";
+import { collectionUrl } from "~/utils/routeHelpers";

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

@@ -28,67 +22,60 @@ function useCategory(document: Document): MenuInternalLink | null {
  if (document.isDeleted) {
    return {
      type: "route",
-      icon: <TrashIcon />,
+      icon: <TrashIcon color="currentColor" />,
      title: t("Trash"),
-      to: trashPath(),
+      to: "/trash",
    };
  }

  if (document.isArchived) {
    return {
      type: "route",
-      icon: <ArchiveIcon />,
+      icon: <ArchiveIcon color="currentColor" />,
      title: t("Archive"),
-      to: archivePath(),
+      to: "/archive",
    };
  }

  if (document.isTemplate) {
    return {
      type: "route",
-      icon: <ShapesIcon />,
+      icon: <ShapesIcon color="currentColor" />,
      title: t("Templates"),
-      to: templatesPath(),
+      to: "/templates",
    };
  }

  return null;
 }

-const DocumentBreadcrumb: React.FC<Props> = ({
-  document,
-  children,
-  onlyText,
-}: Props) => {
+const DocumentBreadcrumb = ({ document, children, onlyText }: Props) => {
  const { collections } = useStores();
  const { t } = useTranslation();
  const category = useCategory(document);
-  const collection = document.collectionId
-    ? collections.get(document.collectionId)
-    : undefined;
+  const collection = collections.get(document.collectionId);

-  let collectionNode: MenuInternalLink | undefined;
+  let collectionNode: MenuInternalLink;

  if (collection) {
    collectionNode = {
      type: "route",
      title: collection.name,
      icon: <CollectionIcon collection={collection} expanded />,
-      to: collectionPath(collection.url),
+      to: collectionUrl(collection.url),
    };
-  } else if (document.collectionId && !collection) {
+  } else {
    collectionNode = {
      type: "route",
      title: t("Deleted Collection"),
      icon: undefined,
-      to: collectionPath("deleted-collection"),
+      to: collectionUrl("deleted-collection"),
    };
  }

  const path = React.useMemo(
-    () => collection?.pathToDocument(document.id).slice(0, -1) || [],
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [collection, document, document.collectionId, document.parentDocumentId]
+    () => collection?.pathToDocument?.(document.id).slice(0, -1) || [],
+    [collection, document]
  );

  const items = React.useMemo(() => {
@@ -98,9 +85,7 @@ const DocumentBreadcrumb: React.FC<Props> = ({
      output.push(category);
    }

-    if (collectionNode) {
-      output.push(collectionNode);
-    }
+    output.push(collectionNode);

    path.forEach((node: NavigationNode) => {
      output.push({
@@ -130,11 +115,7 @@ const DocumentBreadcrumb: React.FC<Props> = ({
    );
  }

-  return (
-    <Breadcrumb items={items} highlightFirstItem>
-      {children}
-    </Breadcrumb>
-  );
+  return <Breadcrumb items={items} children={children} highlightFirstItem />;
 };

 const SmallSlash = styled(GoToIcon)`
@@ -143,7 +124,7 @@ const SmallSlash = styled(GoToIcon)`
  vertical-align: middle;
  flex-shrink: 0;

-  fill: ${(props) => props.theme.textTertiary};
+  fill: ${(props) => props.theme.slate};
  opacity: 0.5;
 `;

@@ -3,21 +3,18 @@ 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 { s, ellipsis } from "@shared/styles";
+import styled, { css } from "styled-components";
 import Document from "~/models/Document";
 import Pin from "~/models/Pin";
 import Flex from "~/components/Flex";
 import NudeButton from "~/components/NudeButton";
 import Time from "~/components/Time";
 import useStores from "~/hooks/useStores";
-import { hover } from "~/styles";
-import CollectionIcon from "./Icons/CollectionIcon";
-import EmojiIcon from "./Icons/EmojiIcon";
-import Squircle from "./Squircle";
+import CollectionIcon from "./CollectionIcon";
 import Text from "./Text";
 import Tooltip from "./Tooltip";

@@ -35,11 +32,8 @@ type Props = {
 function DocumentCard(props: Props) {
  const { t } = useTranslation();
  const { collections } = useStores();
-  const theme = useTheme();
  const { document, pin, canUpdatePin, isDraggable } = props;
-  const collection = document.collectionId
-    ? collections.get(document.collectionId)
-    : undefined;
+  const collection = collections.get(document.collectionId);
  const {
    attributes,
    listeners,
@@ -47,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(
-    async (ev) => {
-      ev.preventDefault();
-      ev.stopPropagation();
-      await pin?.delete();
-    },
-    [pin]
-  );
+  const handleUnpin = React.useCallback(() => {
+    pin?.delete();
+  }, [pin]);

  return (
    <Reorderable
@@ -72,8 +58,6 @@ function DocumentCard(props: Props) {
      style={style}
      $isDragging={isDragging}
      {...attributes}
-      {...listeners}
-      tabIndex={-1}
    >
      <AnimatePresence
        initial={{ opacity: 0, scale: 0.95 }}
@@ -89,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,
@@ -98,119 +88,91 @@ 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 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 />
-                  </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: ${s("background")};
-  stroke: ${s("inputBorder")};
-  background: ${s("background")};
-
-  position: absolute;
-  top: -1px;
-  right: -2px;
-`;
-
 const PinButton = styled(NudeButton)`
-  color: ${s("textTertiary")};
+  color: ${(props) => props.theme.white75};

-  &:${hover},
+  &:hover,
  &:active {
-    color: ${s("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: ${s("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} {
+  &:hover ${Actions} {
    opacity: 1;
  }
 `;
@@ -218,57 +180,76 @@ 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)`
-  ${ellipsis()}
  display: flex;
  align-items: center;
  gap: 2px;
-  color: ${s("textTertiary")};
-  margin: 0 0 0 -2px;
+  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: ${s("background")};
+  height: 160px;
+  background: ${(props) => props.theme.slate};
+  color: ${(props) => props.theme.white};
  transition: transform 50ms ease-in-out;
-  border: 1px solid ${s("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;
  }

-  &:${hover},
+  &:hover,
  &: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`
@@ -278,7 +259,7 @@ const Heading = styled.h3`
  max-height: 66px; // 3*line-height
  overflow: hidden;

-  color: ${s("text")};
+  color: ${(props) => props.theme.white};
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 `;
@@ -1,19 +0,0 @@
-import * as React from "react";
-import { Editor } from "~/editor";
-
-export type DocumentContextValue = {
-  /** The current editor instance for this document. */
-  editor: Editor | null;
-  /** Set the current editor instance for this document. */
-  setEditor: (editor: Editor) => void;
-};
-
-const DocumentContext = React.createContext<DocumentContextValue>({
-  editor: null,
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  setEditor() {},
-});
-
-export const useDocumentContext = () => React.useContext(DocumentContext);
-
-export default DocumentContext;
@@ -1,419 +0,0 @@
-import FuzzySearch from "fuzzy-search";
-import { includes, difference, concat, filter, map, fill } from "lodash";
-import { observer } from "mobx-react";
-import { StarredIcon, DocumentIcon } from "outline-icons";
-import * as React from "react";
-import { useTranslation } from "react-i18next";
-import AutoSizer from "react-virtualized-auto-sizer";
-import { FixedSizeList as List } from "react-window";
-import scrollIntoView from "smooth-scroll-into-view-if-needed";
-import styled, { useTheme } from "styled-components";
-import breakpoint from "styled-components-breakpoint";
-import { NavigationNode } from "@shared/types";
-import parseTitle from "@shared/utils/parseTitle";
-import DocumentExplorerNode from "~/components/DocumentExplorerNode";
-import DocumentExplorerSearchResult from "~/components/DocumentExplorerSearchResult";
-import Flex from "~/components/Flex";
-import CollectionIcon from "~/components/Icons/CollectionIcon";
-import EmojiIcon from "~/components/Icons/EmojiIcon";
-import { Outline } from "~/components/Input";
-import InputSearch from "~/components/InputSearch";
-import Text from "~/components/Text";
-import useMobile from "~/hooks/useMobile";
-import useStores from "~/hooks/useStores";
-import { isModKey } from "~/utils/keyboard";
-import { ancestors, descendants } from "~/utils/tree";
-
-type Props = {
-  /** Action taken upon submission of selected item, could be publish, move etc. */
-  onSubmit: () => void;
-
-  /** A side-effect of item selection */
-  onSelect: (item: NavigationNode | null) => void;
-
-  /** Items to be shown in explorer */
-  items: NavigationNode[];
-};
-
-function DocumentExplorer({ onSubmit, onSelect, items }: Props) {
-  const isMobile = useMobile();
-  const { collections, documents } = useStores();
-  const { t } = useTranslation();
-  const theme = useTheme();
-
-  const [searchTerm, setSearchTerm] = React.useState<string>();
-  const [selectedNode, selectNode] = React.useState<NavigationNode | null>(
-    null
-  );
-  const [initialScrollOffset, setInitialScrollOffset] =
-    React.useState<number>(0);
-  const [activeNode, setActiveNode] = React.useState<number>(0);
-  const [expandedNodes, setExpandedNodes] = React.useState<string[]>([]);
-  const [itemRefs, setItemRefs] = React.useState<
-    React.RefObject<HTMLSpanElement>[]
-  >([]);
-
-  const inputSearchRef = React.useRef<HTMLInputElement | HTMLTextAreaElement>(
-    null
-  );
-  const listRef = React.useRef<List<NavigationNode[]>>(null);
-
-  const VERTICAL_PADDING = 6;
-  const HORIZONTAL_PADDING = 24;
-
-  const searchIndex = React.useMemo(
-    () =>
-      new FuzzySearch(items, ["title"], {
-        caseSensitive: false,
-      }),
-    [items]
-  );
-
-  React.useEffect(() => {
-    if (searchTerm) {
-      selectNode(null);
-      setExpandedNodes([]);
-    }
-    setActiveNode(0);
-  }, [searchTerm]);
-
-  React.useEffect(() => {
-    setItemRefs((itemRefs) =>
-      map(
-        fill(Array(items.length), 0),
-        (_, i) => itemRefs[i] || React.createRef()
-      )
-    );
-  }, [items.length]);
-
-  React.useEffect(() => {
-    onSelect(selectedNode);
-  }, [selectedNode, onSelect]);
-
-  function getNodes() {
-    function includeDescendants(item: NavigationNode): NavigationNode[] {
-      return expandedNodes.includes(item.id)
-        ? [item, ...descendants(item, 1).flatMap(includeDescendants)]
-        : [item];
-    }
-
-    return searchTerm
-      ? searchIndex.search(searchTerm)
-      : items
-          .filter((item) => item.type === "collection")
-          .flatMap(includeDescendants);
-  }
-
-  const nodes = getNodes();
-
-  const scrollNodeIntoView = React.useCallback(
-    (node: number) => {
-      if (itemRefs[node] && itemRefs[node].current) {
-        scrollIntoView(itemRefs[node].current as HTMLSpanElement, {
-          behavior: "auto",
-          block: "center",
-        });
-      }
-    },
-    [itemRefs]
-  );
-
-  const handleSearch = (ev: React.ChangeEvent<HTMLInputElement>) => {
-    setSearchTerm(ev.target.value);
-  };
-
-  const isExpanded = (node: number) => includes(expandedNodes, nodes[node].id);
-
-  const calculateInitialScrollOffset = (itemCount: number) => {
-    if (listRef.current) {
-      const { height, itemSize } = listRef.current.props;
-      const { scrollOffset } = listRef.current.state as {
-        scrollOffset: number;
-      };
-      const itemsHeight = itemCount * itemSize;
-      return itemsHeight < Number(height) ? 0 : scrollOffset;
-    }
-    return 0;
-  };
-
-  const collapse = (node: number) => {
-    const descendantIds = descendants(nodes[node]).map((des) => des.id);
-    setExpandedNodes(
-      difference(expandedNodes, [...descendantIds, nodes[node].id])
-    );
-
-    // remove children
-    const newNodes = filter(nodes, (node) => !includes(descendantIds, node.id));
-    const scrollOffset = calculateInitialScrollOffset(newNodes.length);
-    setInitialScrollOffset(scrollOffset);
-  };
-
-  const expand = (node: number) => {
-    setExpandedNodes(concat(expandedNodes, nodes[node].id));
-
-    // add children
-    const newNodes = nodes.slice();
-    newNodes.splice(node + 1, 0, ...descendants(nodes[node], 1));
-    const scrollOffset = calculateInitialScrollOffset(newNodes.length);
-    setInitialScrollOffset(scrollOffset);
-  };
-
-  React.useEffect(() => {
-    collections.orderedData
-      .filter(
-        (collection) => expandedNodes.includes(collection.id) || searchTerm
-      )
-      .forEach((collection) => {
-        void collection.fetchDocuments();
-      });
-  }, [collections, expandedNodes, searchTerm]);
-
-  const isSelected = (node: number) => {
-    if (!selectedNode) {
-      return false;
-    }
-    const selectedNodeId = selectedNode.id;
-    const nodeId = nodes[node].id;
-
-    return selectedNodeId === nodeId;
-  };
-
-  const hasChildren = (node: number) =>
-    nodes[node].children.length > 0 || nodes[node].type === "collection";
-
-  const toggleCollapse = (node: number) => {
-    if (!hasChildren(node)) {
-      return;
-    }
-    if (isExpanded(node)) {
-      collapse(node);
-    } else {
-      expand(node);
-    }
-  };
-
-  const toggleSelect = (node: number) => {
-    if (isSelected(node)) {
-      selectNode(null);
-    } else {
-      selectNode(nodes[node]);
-    }
-  };
-
-  const ListItem = ({
-    index,
-    data,
-    style,
-  }: {
-    index: number;
-    data: NavigationNode[];
-    style: React.CSSProperties;
-  }) => {
-    const node = data[index];
-    const isCollection = node.type === "collection";
-    let icon, title, path;
-
-    if (isCollection) {
-      const col = collections.get(node.collectionId as string);
-      icon = col && (
-        <CollectionIcon collection={col} expanded={isExpanded(index)} />
-      );
-      title = node.title;
-    } else {
-      const doc = documents.get(node.id);
-      const { strippedTitle, emoji } = parseTitle(node.title);
-      title = strippedTitle;
-
-      if (emoji) {
-        icon = <EmojiIcon emoji={emoji} />;
-      } else if (doc?.isStarred) {
-        icon = <StarredIcon color={theme.yellow} />;
-      } else {
-        icon = <DocumentIcon color={theme.textSecondary} />;
-      }
-
-      path = ancestors(node)
-        .map((a) => parseTitle(a.title).strippedTitle)
-        .join(" / ");
-    }
-
-    return searchTerm ? (
-      <DocumentExplorerSearchResult
-        selected={isSelected(index)}
-        active={activeNode === index}
-        style={{
-          ...style,
-          top: (style.top as number) + VERTICAL_PADDING,
-          left: (style.left as number) + HORIZONTAL_PADDING,
-          width: `calc(${style.width} - ${HORIZONTAL_PADDING * 2}px)`,
-        }}
-        onPointerMove={() => setActiveNode(index)}
-        onClick={() => toggleSelect(index)}
-        icon={icon}
-        title={title}
-        path={path}
-      />
-    ) : (
-      <DocumentExplorerNode
-        style={{
-          ...style,
-          top: (style.top as number) + VERTICAL_PADDING,
-          left: (style.left as number) + HORIZONTAL_PADDING,
-          width: `calc(${style.width} - ${HORIZONTAL_PADDING * 2}px)`,
-        }}
-        onPointerMove={() => setActiveNode(index)}
-        onClick={() => toggleSelect(index)}
-        onDisclosureClick={(ev) => {
-          ev.stopPropagation();
-          toggleCollapse(index);
-        }}
-        selected={isSelected(index)}
-        active={activeNode === index}
-        expanded={isExpanded(index)}
-        icon={icon}
-        title={title}
-        depth={node.depth as number}
-        hasChildren={hasChildren(index)}
-        ref={itemRefs[index]}
-      />
-    );
-  };
-
-  const focusSearchInput = () => {
-    inputSearchRef.current?.focus();
-  };
-
-  const next = () => Math.min(activeNode + 1, nodes.length - 1);
-
-  const prev = () => Math.max(activeNode - 1, 0);
-
-  const handleKeyDown = (ev: React.KeyboardEvent<HTMLDivElement>) => {
-    switch (ev.key) {
-      case "ArrowDown": {
-        ev.preventDefault();
-        ev.stopPropagation();
-        setActiveNode(next());
-        scrollNodeIntoView(next());
-        break;
-      }
-      case "ArrowUp": {
-        ev.preventDefault();
-        ev.stopPropagation();
-        if (activeNode === 0) {
-          focusSearchInput();
-        } else {
-          setActiveNode(prev());
-          scrollNodeIntoView(prev());
-        }
-        break;
-      }
-      case "ArrowLeft": {
-        if (!searchTerm && isExpanded(activeNode)) {
-          toggleCollapse(activeNode);
-        }
-        break;
-      }
-      case "ArrowRight": {
-        if (!searchTerm) {
-          toggleCollapse(activeNode);
-          // let the nodes re-render first and then scroll
-          setTimeout(() => scrollNodeIntoView(activeNode), 0);
-        }
-        break;
-      }
-      case "Enter": {
-        if (isModKey(ev)) {
-          onSubmit();
-        } else {
-          toggleSelect(activeNode);
-        }
-        break;
-      }
-    }
-  };
-
-  const innerElementType = React.forwardRef<
-    HTMLDivElement,
-    React.HTMLAttributes<HTMLDivElement>
-  >(function innerElementType(
-    { style, ...rest }: React.HTMLAttributes<HTMLDivElement>,
-    ref
-  ) {
-    return (
-      <div
-        ref={ref}
-        style={{
-          ...style,
-          height: `${parseFloat(style?.height + "") + VERTICAL_PADDING * 2}px`,
-        }}
-        {...rest}
-      />
-    );
-  });
-
-  return (
-    <Container tabIndex={-1} onKeyDown={handleKeyDown}>
-      <ListSearch
-        ref={inputSearchRef}
-        onChange={handleSearch}
-        placeholder={`${t("Search collections & documents")}…`}
-        autoFocus
-      />
-      <ListContainer>
-        {nodes.length ? (
-          <AutoSizer>
-            {({ width, height }: { width: number; height: number }) => (
-              <Flex role="listbox" column>
-                <List
-                  ref={listRef}
-                  key={nodes.length}
-                  width={width}
-                  height={height}
-                  itemData={nodes}
-                  itemCount={nodes.length}
-                  itemSize={isMobile ? 48 : 32}
-                  innerElementType={innerElementType}
-                  initialScrollOffset={initialScrollOffset}
-                  itemKey={(index, results) => results[index].id}
-                >
-                  {ListItem}
-                </List>
-              </Flex>
-            )}
-          </AutoSizer>
-        ) : (
-          <FlexContainer>
-            <Text type="secondary">{t("No results found")}.</Text>
-          </FlexContainer>
-        )}
-      </ListContainer>
-    </Container>
-  );
-}
-
-const Container = styled.div``;
-
-const FlexContainer = styled(Flex)`
-  height: 100%;
-  align-items: center;
-  justify-content: center;
-`;
-
-const ListSearch = styled(InputSearch)`
-  ${Outline} {
-    border-radius: 16px;
-  }
-  margin-bottom: 4px;
-  padding-left: 24px;
-  padding-right: 24px;
-`;
-
-const ListContainer = styled.div`
-  height: 65vh;
-
-  ${breakpoint("tablet")`
-    height: 40vh;
-  `}
-`;
-
-export default observer(DocumentExplorer);
@@ -1,133 +0,0 @@
-import { observer } from "mobx-react";
-import * as React from "react";
-import { useTranslation } from "react-i18next";
-import styled from "styled-components";
-import breakpoint from "styled-components-breakpoint";
-import { s, ellipsis } from "@shared/styles";
-import Flex from "~/components/Flex";
-import Disclosure from "~/components/Sidebar/components/Disclosure";
-import Text from "~/components/Text";
-
-type Props = {
-  selected: boolean;
-  active: boolean;
-  style: React.CSSProperties;
-  expanded: boolean;
-  icon?: React.ReactNode;
-  title: string;
-  depth: number;
-  hasChildren: boolean;
-
-  onDisclosureClick: (ev: React.MouseEvent) => void;
-  onPointerMove: (ev: React.MouseEvent) => void;
-  onClick: (ev: React.MouseEvent) => void;
-};
-
-function DocumentExplorerNode(
-  {
-    selected,
-    active,
-    style,
-    expanded,
-    icon,
-    title,
-    depth,
-    hasChildren,
-    onDisclosureClick,
-    onPointerMove,
-    onClick,
-  }: Props,
-  ref: React.RefObject<HTMLSpanElement>
-) {
-  const { t } = useTranslation();
-  const OFFSET = 12;
-  const ICON_SIZE = 24;
-
-  const width = depth ? depth * ICON_SIZE + OFFSET : ICON_SIZE;
-
-  return (
-    <Node
-      ref={ref}
-      selected={selected}
-      active={active}
-      onClick={onClick}
-      style={style}
-      onPointerMove={onPointerMove}
-      role="option"
-    >
-      <Spacer width={width}>
-        {hasChildren && (
-          <StyledDisclosure
-            expanded={expanded}
-            onClick={onDisclosureClick}
-            tabIndex={-1}
-          />
-        )}
-      </Spacer>
-      {icon}
-      <Title>{title || t("Untitled")}</Title>
-    </Node>
-  );
-}
-
-const Title = styled(Text)`
-  ${ellipsis()}
-  margin: 0 4px 0 4px;
-  color: inherit;
-`;
-
-const StyledDisclosure = styled(Disclosure)`
-  position: relative;
-  left: auto;
-  margin-top: 2px;
-`;
-
-const Spacer = styled(Flex)<{ width: number }>`
-  flex-direction: row-reverse;
-  flex-shrink: 0;
-  width: ${(props) => props.width}px;
-`;
-
-export const Node = styled.span<{
-  active: boolean;
-  selected: boolean;
-  style: React.CSSProperties;
-}>`
-  display: flex;
-  user-select: none;
-  overflow: hidden;
-  font-size: 16px;
-  width: ${(props) => props.style.width};
-  color: ${s("text")};
-  cursor: var(--pointer);
-  padding: 12px;
-  border-radius: 6px;
-  background: ${(props) =>
-    !props.selected && props.active && props.theme.listItemHoverBackground};
-
-  svg {
-    flex-shrink: 0;
-  }
-
-  &:focus {
-    outline: none;
-  }
-
-  ${(props) =>
-    props.selected &&
-    `
-      background: ${props.theme.accent};
-      color: ${props.theme.white};
-
-      svg {
-        fill: ${props.theme.white};
-      }
-    `}
-
-  ${breakpoint("tablet")`
-    padding: 4px;
-    font-size: 15px;
-  `}
-`;
-
-export default observer(React.forwardRef(DocumentExplorerNode));
@@ -1,84 +0,0 @@
-import { observer } from "mobx-react";
-import * as React from "react";
-import { useTranslation } from "react-i18next";
-import scrollIntoView from "smooth-scroll-into-view-if-needed";
-import styled from "styled-components";
-import { ellipsis } from "@shared/styles";
-import { Node as SearchResult } from "~/components/DocumentExplorerNode";
-import Flex from "~/components/Flex";
-import Text from "~/components/Text";
-
-type Props = {
-  selected: boolean;
-  active: boolean;
-  style: React.CSSProperties;
-  icon?: React.ReactNode;
-  title: string;
-  path?: string;
-
-  onPointerMove: (ev: React.MouseEvent) => void;
-  onClick: (ev: React.MouseEvent) => void;
-};
-
-function DocumentExplorerSearchResult({
-  selected,
-  active,
-  style,
-  icon,
-  title,
-  path,
-  onPointerMove,
-  onClick,
-}: Props) {
-  const { t } = useTranslation();
-
-  const ref = React.useCallback(
-    (node: HTMLSpanElement | null) => {
-      if (active && node) {
-        scrollIntoView(node, {
-          scrollMode: "if-needed",
-          behavior: "auto",
-          block: "nearest",
-        });
-      }
-    },
-    [active]
-  );
-
-  return (
-    <SearchResult
-      ref={ref}
-      selected={selected}
-      active={active}
-      onClick={onClick}
-      style={style}
-      onPointerMove={onPointerMove}
-      role="option"
-    >
-      {icon}
-      <Flex>
-        <Title>{title || t("Untitled")}</Title>
-        <Path $selected={selected} size="xsmall">
-          {path}
-        </Path>
-      </Flex>
-    </SearchResult>
-  );
-}
-
-const Title = styled(Text)`
-  flex-shrink: 0;
-  white-space: nowrap;
-  margin: 0 4px 0 4px;
-  color: inherit;
-`;
-
-const Path = styled(Text)<{ $selected: boolean }>`
-  ${ellipsis()}
-  padding-top: 2px;
-  margin: 0 4px 0 8px;
-  color: ${(props) =>
-    props.$selected ? props.theme.white50 : props.theme.textTertiary};
-`;
-
-export default observer(DocumentExplorerSearchResult);
@@ -0,0 +1,132 @@
+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 from "styled-components";
+import breakpoint from "styled-components-breakpoint";
+import Event from "~/models/Event";
+import Button from "~/components/Button";
+import Empty from "~/components/Empty";
+import Flex from "~/components/Flex";
+import PaginatedEventList from "~/components/PaginatedEventList";
+import Scrollable from "~/components/Scrollable";
+import useStores from "~/hooks/useStores";
+import { documentUrl } from "~/utils/routeHelpers";
+
+const EMPTY_ARRAY: Event[] = [];
+
+function DocumentHistory() {
+  const { events, documents } = useStores();
+  const { t } = useTranslation();
+  const match = useRouteMatch<{ documentSlug: string }>();
+  const history = useHistory();
+  const document = documents.getByUrl(match.params.documentSlug);
+
+  const eventsInDocument = document
+    ? events.inDocument(document.id)
+    : EMPTY_ARRAY;
+
+  const onCloseHistory = () => {
+    if (document) {
+      history.push(documentUrl(document));
+    } else {
+      history.goBack();
+    }
+  };
+
+  const items = React.useMemo(() => {
+    if (
+      eventsInDocument[0] &&
+      document &&
+      eventsInDocument[0].createdAt !== document.updatedAt
+    ) {
+      eventsInDocument.unshift(
+        new Event(
+          {
+            name: "documents.latest_version",
+            documentId: document.id,
+            createdAt: document.updatedAt,
+            actor: document.updatedBy,
+          },
+          events
+        )
+      );
+    }
+
+    return eventsInDocument;
+  }, [eventsInDocument, events, document]);
+
+  return (
+    <Sidebar>
+      {document ? (
+        <Position column>
+          <Header>
+            <Title>{t("History")}</Title>
+            <Button
+              icon={<CloseIcon />}
+              onClick={onCloseHistory}
+              borderOnHover
+              neutral
+            />
+          </Header>
+          <Scrollable topShadow>
+            <PaginatedEventList
+              fetch={events.fetchPage}
+              events={items}
+              options={{
+                documentId: document.id,
+              }}
+              document={document}
+              empty={<Empty>{t("Oh weird, there's nothing here")}</Empty>}
+            />
+          </Scrollable>
+        </Position>
+      ) : null}
+    </Sidebar>
+  );
+}
+
+const Position = styled(Flex)`
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  width: ${(props) => props.theme.sidebarWidth}px;
+`;
+
+const Sidebar = styled(Flex)`
+  display: none;
+  position: relative;
+  flex-shrink: 0;
+  background: ${(props) => props.theme.background};
+  width: ${(props) => props.theme.sidebarWidth}px;
+  border-left: 1px solid ${(props) => props.theme.divider};
+  z-index: 1;
+
+  ${breakpoint("tablet")`
+    display: flex;
+  `};
+`;
+
+const Title = styled(Flex)`
+  font-size: 16px;
+  font-weight: 600;
+  text-align: center;
+  align-items: center;
+  justify-content: flex-start;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  width: 0;
+  flex-grow: 1;
+`;
+
+const Header = styled(Flex)`
+  align-items: center;
+  position: relative;
+  padding: 12px;
+  color: ${(props) => props.theme.text};
+  flex-shrink: 0;
+`;
+
+export default observer(DocumentHistory);
@@ -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,10 +3,8 @@ 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 { s } from "@shared/styles";
 import Document from "~/models/Document";
 import Badge from "~/components/Badge";
 import Button from "~/components/Button";
@@ -35,8 +33,7 @@ type Props = {
  showPin?: boolean;
  showDraft?: boolean;
  showTemplate?: boolean;
-} & CompositeStateReturn;
-
+};
 const SEARCH_RESULT_REGEX = /<b\b[^>]*>(.*?)<\/b>/gi;

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

  const {
@@ -64,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 can = usePolicy(currentTeam.id);
  const canCollection = usePolicy(document.collectionId);

  return (
-    <CompositeItem
-      as={DocumentLink}
+    <DocumentLink
      ref={ref}
      dir={document.dir}
-      role="menuitem"
      $isStarred={document.isStarred}
      $menuOpen={menuOpen}
      to={{
@@ -88,7 +82,6 @@ function DocumentListItem(
          title: document.titleWithDefault,
        },
      }}
-      {...rest}
    >
      <Content>
        <Heading dir={document.dir}>
@@ -97,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 && (
@@ -162,7 +155,7 @@ function DocumentListItem(
          modal={false}
        />
      </Actions>
-    </CompositeItem>
+    </DocumentLink>
  );
 }

@@ -178,11 +171,11 @@ const Actions = styled(EventBoundary)`
  margin: 8px;
  flex-shrink: 0;
  flex-grow: 0;
-  color: ${s("textSecondary")};

  ${NudeButton} {
-    &: ${hover}, &[aria-expanded= "true"] {
-      background: ${s("sidebarControlHoverBackground")};
+    &:hover,
+    &[aria-expanded="true"] {
+      background: ${(props) => props.theme.sidebarControlHoverBackground};
    }
  }

@@ -202,11 +195,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;
@@ -224,7 +212,7 @@ const DocumentLink = styled(Link)<{
  &:active,
  &:focus,
  &:focus-within {
-    background: ${s("listItemHoverBackground")};
+    background: ${(props) => props.theme.listItemHoverBackground};

    ${Actions} {
      opacity: 1;
@@ -233,7 +221,7 @@ const DocumentLink = styled(Link)<{
    ${AnimatedStar} {
      opacity: 0.5;

-      &:${hover} {
+      &:hover {
        opacity: 1;
      }
    }
@@ -242,7 +230,7 @@ const DocumentLink = styled(Link)<{
  ${(props) =>
    props.$menuOpen &&
    css`
-      background: ${s("listItemHoverBackground")};
+      background: ${(props) => props.theme.listItemHoverBackground};

      ${Actions} {
        opacity: 1;
@@ -258,10 +246,12 @@ const Heading = styled.h3<{ rtl?: boolean }>`
  display: flex;
  justify-content: ${(props) => (props.rtl ? "flex-end" : "flex-start")};
  align-items: center;
+  height: 24px;
  margin-top: 0;
  margin-bottom: 0.25em;
+  overflow: hidden;
  white-space: nowrap;
-  color: ${s("text")};
+  color: ${(props) => props.theme.text};
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 `;
@@ -279,7 +269,7 @@ const Title = styled(Highlight)`

 const ResultContext = styled(Highlight)`
  display: block;
-  color: ${s("textTertiary")};
+  color: ${(props) => props.theme.textTertiary};
  font-size: 14px;
  margin-top: -0.25em;
  margin-bottom: 0.25em;
@@ -1,12 +1,9 @@
-import { LocationDescriptor } from "history";
 import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import styled from "styled-components";
-import { s, ellipsis } from "@shared/styles";
 import Document from "~/models/Document";
-import Revision from "~/models/Revision";
 import DocumentBreadcrumb from "~/components/DocumentBreadcrumb";
 import DocumentTasks from "~/components/DocumentTasks";
 import Flex from "~/components/Flex";
@@ -14,30 +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 = {
-  children?: React.ReactNode;
  showCollection?: boolean;
  showPublished?: boolean;
  showLastViewed?: boolean;
  showParentDocuments?: boolean;
  document: Document;
-  revision?: Revision;
-  replace?: boolean;
-  to?: LocationDescriptor;
+  children?: React.ReactNode;
+  to?: string;
 };

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

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

-  if (revision) {
+  if (deletedAt) {
    content = (
      <span>
-        {revision.createdBy?.id === user.id
-          ? t("You updated")
-          : t("{{ userName }} updated", { userName })}{" "}
-        <Time dateTime={revision.createdAt} addSuffix />
-      </span>
-    );
-  } else 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>
    );
  }
@@ -163,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;
@@ -196,23 +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: ${s("textTertiary")};
-  font-size: 13px;
-  white-space: nowrap;
-  overflow: hidden;
-  min-width: 0;
-`;
-
-const Viewed = styled.span`
-  ${ellipsis()}
-`;
-
-const Modified = styled.span<{ highlight?: boolean }>`
-  font-weight: ${(props) => (props.highlight ? "600" : "400")};
-`;
+}

 export default observer(DocumentMeta);
@@ -0,0 +1,86 @@
+import { useObserver } from "mobx-react";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { usePopoverState, PopoverDisclosure } from "reakit/Popover";
+import styled from "styled-components";
+import Document from "~/models/Document";
+import DocumentMeta from "~/components/DocumentMeta";
+import DocumentViews from "~/components/DocumentViews";
+import Popover from "~/components/Popover";
+import useStores from "~/hooks/useStores";
+
+type Props = {
+  document: Document;
+  isDraft: boolean;
+  to?: string;
+  rtl?: boolean;
+};
+
+function DocumentMetaWithViews({ to, isDraft, document, ...rest }: Props) {
+  const { views } = useStores();
+  const { t } = useTranslation();
+  const documentViews = useObserver(() => views.inDocument(document.id));
+  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",
+    modal: true,
+  });
+
+  return (
+    <Meta document={document} to={to} {...rest}>
+      {totalViewers && !isDraft ? (
+        <PopoverDisclosure {...popover}>
+          {(props) => (
+            <>
+              &nbsp;•&nbsp;
+              <a {...props}>
+                {t("Viewed by")}{" "}
+                {onlyYou
+                  ? t("only you")
+                  : `${totalViewers} ${
+                      totalViewers === 1 ? t("person") : t("people")
+                    }`}
+              </a>
+            </>
+          )}
+        </PopoverDisclosure>
+      ) : null}
+      <Popover {...popover} width={300} aria-label={t("Viewers")} tabIndex={0}>
+        <DocumentViews document={document} isOpen={popover.visible} />
+      </Popover>
+    </Meta>
+  );
+}
+
+const Meta = styled(DocumentMeta)<{ rtl?: boolean }>`
+  justify-content: ${(props) => (props.rtl ? "flex-end" : "flex-start")};
+  margin: -12px 0 2em 0;
+  font-size: 14px;
+  position: relative;
+  z-index: 1;
+
+  a {
+    color: inherit;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  @media print {
+    display: none;
+  }
+`;
+
+export default DocumentMetaWithViews;
@@ -1,8 +1,6 @@
-import { TFunction } from "i18next";
-import { observer } from "mobx-react";
 import { DoneIcon } from "outline-icons";
 import * as React from "react";
-import { useTranslation } from "react-i18next";
+import { useTranslation, TFunction } from "react-i18next";
 import styled, { useTheme } from "styled-components";
 import Document from "~/models/Document";
 import CircularProgressBar from "~/components/CircularProgressBar";
@@ -44,7 +42,7 @@ function DocumentTasks({ document }: Props) {
    <>
      {completed === total ? (
        <Done
-          color={theme.accent}
+          color={theme.primary}
          size={20}
          $animated={done && previousDone === false}
        />
@@ -62,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 { documentPath } 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(documentPath(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);
@@ -1,10 +1,9 @@
+import { formatDistanceToNow } from "date-fns";
 import { sortBy } from "lodash";
 import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
-import { dateToRelative } from "@shared/utils/date";
 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";
@@ -33,36 +32,34 @@ function DocumentViews({ document, isOpen }: Props) {
    documentViews,
    (view) => !presentIds.includes(view.user.id)
  );
-  const users = React.useMemo(
-    () => sortedViews.map((v) => v.user),
-    [sortedViews]
-  );
+  const users = React.useMemo(() => sortedViews.map((v) => v.user), [
+    sortedViews,
+  ]);

  return (
    <>
      {isOpen && (
        <PaginatedList
-          aria-label={t("Viewers")}
          items={users}
-          renderItem={(model: User) => {
-            const view = documentViews.find((v) => v.user.id === model.id);
-            const isPresent = presentIds.includes(model.id);
-            const isEditing = editingIds.includes(model.id);
+          renderItem={(item) => {
+            const view = documentViews.find((v) => v.user.id === item.id);
+            const isPresent = presentIds.includes(item.id);
+            const isEditing = editingIds.includes(item.id);
            const subtitle = isPresent
              ? isEditing
                ? t("Currently editing")
                : t("Currently viewing")
              : t("Viewed {{ timeAgo }} ago", {
-                  timeAgo: dateToRelative(
+                  timeAgo: formatDistanceToNow(
                    view ? Date.parse(view.lastViewedAt) : new Date()
                  ),
                });
            return (
              <ListItem
-                key={model.id}
-                title={model.name}
+                key={item.id}
+                title={item.name}
                subtitle={subtitle}
-                image={<Avatar key={model.id} model={model} size={32} />}
+                image={<Avatar key={item.id} src={item.avatarUrl} size={32} />}
                border={false}
                small
              />
@@ -1,21 +0,0 @@
-import { observer } from "mobx-react";
-import * as React from "react";
-import Collection from "~/models/Collection";
-
-type Props = {
-  enabled: boolean;
-  collection: Collection;
-  children: React.ReactNode;
-};
-
-function DocumentsLoader({ collection, enabled, children }: Props) {
-  React.useEffect(() => {
-    if (enabled) {
-      void collection.fetchDocuments();
-    }
-  }, [collection, enabled]);
-
-  return <>{children}</>;
-}
-
-export default observer(DocumentsLoader);
@@ -1,153 +1,51 @@
-import { deburr, difference, 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 { useHistory } from "react-router-dom";
 import { Optional } from "utility-types";
-import insertFiles from "@shared/editor/commands/insertFiles";
-import { AttachmentPreset } from "@shared/types";
-import { Heading } from "@shared/utils/ProsemirrorHelper";
-import { dateLocale, dateToRelative } from "@shared/utils/date";
-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 useUserLocale from "~/hooks/useUserLocale";
-import { NotFoundError } from "~/utils/errors";
-import { uploadFile } from "~/utils/files";
+import history from "~/utils/history";
 import { isModKey } from "~/utils/keyboard";
-import lazyWithRetry from "~/utils/lazyWithRetry";
-import { sharedDocumentPath } from "~/utils/routeHelpers";
+import { uploadFile } from "~/utils/uploadFile";
 import { isHash } from "~/utils/urls";
-import DocumentBreadcrumb from "./DocumentBreadcrumb";

-const LazyLoadedEditor = lazyWithRetry(() => import("~/editor"));
+const SharedEditor = React.lazy(
+  () =>
+    import(
+      /* 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;
-  onHeadingsChange?: (headings: Heading[]) => void;
+  grow?: boolean;
  onSynced?: () => Promise<void>;
  onPublish?: (event: React.MouseEvent) => any;
-  editorStyle?: React.CSSProperties;
 };

-function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
-  const {
-    id,
-    shareId,
-    onChange,
-    onHeadingsChange,
-    onCreateCommentMark,
-    onDeleteCommentMark,
-  } = props;
-  const userLocale = useUserLocale();
-  const locale = dateLocale(userLocale);
-  const { auth, comments, 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 history = useHistory();
-  const localRef = React.useRef<SharedEditor>();
-  const preferences = auth.user?.preferences;
-  const previousHeadings = React.useRef<Heading[] | null>(null);
-  const [activeLinkElement, setActiveLink] =
-    React.useState<HTMLAnchorElement | null>(null);
-  const previousCommentIds = React.useRef<string[]>();

-  const handleLinkActive = React.useCallback((element: HTMLAnchorElement) => {
-    setActiveLink(element);
-    return false;
-  }, []);
-
-  const handleLinkInactive = React.useCallback(() => {
-    setActiveLink(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 = dateToRelative(Date.parse(document.updatedAt), {
-            addSuffix: true,
-            shorten: true,
-            locale,
-          });
-
-          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) => ({
-          title: document.title,
-          subtitle: <DocumentBreadcrumb document={document} onlyText />,
-          url: document.url,
-        })),
-        (document) =>
-          deburr(document.title)
-            .toLowerCase()
-            .startsWith(deburr(term).toLowerCase())
-            ? -1
-            : 1
-      );
-    },
-    [documents]
-  );
-
-  const handleUploadFile = React.useCallback(
+  const onUploadImage = React.useCallback(
    async (file: File) => {
      const result = await uploadFile(file, {
        documentId: id,
-        preset: AttachmentPreset.DocumentAttachment,
      });
      return result.url;
    },
    [id]
  );

-  const handleClickLink = React.useCallback(
+  const onClickLink = React.useCallback(
    (href: string, event: MouseEvent) => {
      // on page hash
      if (isHash(href)) {
@@ -169,16 +67,8 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
          }
        }

-        // Link to our own API should be opened in a new tab, not in the app
-        if (navigateTo.startsWith("/api/")) {
-          window.open(href, "_blank");
-          return;
-        }
-
-        // 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);
@@ -186,181 +76,31 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
        window.open(href, "_blank");
      }
    },
-    [history, shareId]
+    [shareId]
  );

-  const focusAtEnd = React.useCallback(() => {
-    localRef?.current?.focusAtEnd();
-  }, [localRef]);
-
-  const handleDrop = React.useCallback(
-    (event: React.DragEvent<HTMLDivElement>) => {
-      event.preventDefault();
-      event.stopPropagation();
-      const files = getDataTransferFiles(event);
-
-      const view = localRef?.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: handleUploadFile,
-        onFileUploadStart: props.onFileUploadStart,
-        onFileUploadStop: props.onFileUploadStop,
-        onShowToast: showToast,
-        dictionary,
-        isAttachment,
-      });
+  const onShowToast = React.useCallback(
+    (message: string) => {
+      showToast(message);
    },
-    [
-      localRef,
-      props.onFileUploadStart,
-      props.onFileUploadStop,
-      dictionary,
-      handleUploadFile,
-      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 = localRef?.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);
-      }
-    }
-  }, [localRef, onHeadingsChange]);
-
-  const updateComments = React.useCallback(() => {
-    if (onCreateCommentMark && onDeleteCommentMark) {
-      const commentMarks = localRef.current?.getComments();
-      const commentIds = comments.orderedData.map((c) => c.id);
-      const commentMarkIds = commentMarks?.map((c) => c.id);
-      const newCommentIds = difference(
-        commentMarkIds,
-        previousCommentIds.current ?? [],
-        commentIds
-      );
-
-      newCommentIds.forEach((commentId) => {
-        const mark = commentMarks?.find((c) => c.id === commentId);
-        if (mark) {
-          onCreateCommentMark(mark.id, mark.userId);
-        }
-      });
-
-      const removedCommentIds = difference(
-        previousCommentIds.current ?? [],
-        commentMarkIds ?? []
-      );
-
-      removedCommentIds.forEach((commentId) => {
-        onDeleteCommentMark(commentId);
-      });
-
-      previousCommentIds.current = commentMarkIds;
-    }
-  }, [onCreateCommentMark, onDeleteCommentMark, comments.orderedData]);
-
-  const handleChange = React.useCallback(
-    (event) => {
-      onChange?.(event);
-      updateHeadings();
-      updateComments();
-    },
-    [onChange, updateComments, updateHeadings]
-  );
-
-  const handleRefChanged = React.useCallback(
-    (node: SharedEditor | null) => {
-      if (node) {
-        updateHeadings();
-        updateComments();
-      }
-    },
-    [updateComments, updateHeadings]
+    [showToast]
  );

  return (
-    <ErrorBoundary component="div" reloadOnChunkMissing>
-      <>
-        <LazyLoadedEditor
-          ref={mergeRefs([ref, localRef, handleRefChanged])}
-          uploadFile={handleUploadFile}
-          onShowToast={showToast}
-          embeds={embeds}
-          userPreferences={preferences}
-          dictionary={dictionary}
-          {...props}
-          onHoverLink={handleLinkActive}
-          onClickLink={handleClickLink}
-          onSearchLink={handleSearchLink}
-          onChange={handleChange}
-          placeholder={props.placeholder || ""}
-          defaultValue={props.defaultValue || ""}
-        />
-        {props.editorStyle?.paddingBottom && !props.readOnly && (
-          <ClickablePadding
-            onClick={focusAtEnd}
-            onDrop={handleDrop}
-            onDragOver={handleDragOver}
-            minHeight={props.editorStyle.paddingBottom}
-          />
-        )}
-        {activeLinkElement && !shareId && (
-          <HoverPreview
-            element={activeLinkElement}
-            onClose={handleLinkInactive}
-          />
-        )}
-      </>
+    <ErrorBoundary reloadOnChunkMissing>
+      <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);
@@ -25,7 +25,6 @@ const Span = styled.span<{ $size: number }>`
  align-items: center;
  justify-content: center;
  text-align: center;
-  flex-shrink: 0;
  width: ${(props) => props.$size}px;
  height: ${(props) => props.$size}px;
  text-indent: -0.15em;
--- a/Show More
+++ b/Show More