iterate

Fine, no popper
First pass
2026-06-13 19:35:02 +03:00 · 2023-02-28 20:23:29 -05:00 · 2023-02-28 19:58:12 -05:00 · 2023-02-28 19:50:58 -05:00
1785 changed files with 59307 additions and 123028 deletions
@@ -1,28 +1,29 @@
 {
  "presets": [
    "@babel/preset-react",
-    "@babel/preset-env",
-    "@babel/preset-typescript"
+    "@babel/preset-typescript",
+    [
+      "@babel/preset-env",
+      {
+        "corejs": {
+          "version": "3",
+          "proposals": true
+        },
+        "useBuiltIns": "usage"
+      }
+    ]
  ],
  "plugins": [
-    "babel-plugin-transform-typescript-metadata",
+    "styled-components",
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ],
-    "@babel/plugin-transform-class-properties",
-    [
-      "transform-inline-environment-variables",
-      {
-        "include": [
-          "SOURCE_COMMIT",
-          "SOURCE_VERSION"
-        ]
-      }
-    ],
-    "tsconfig-paths-module-resolver"
+    "@babel/plugin-transform-destructuring",
+    "@babel/plugin-transform-regenerator",
+    "transform-class-properties"
  ],
  "env": {
    "production": {
@@ -35,29 +36,13 @@
        ]
      ],
      "ignore": [
-        "**/__mocks__",
        "**/*.test.ts"
      ]
    },
    "development": {
      "ignore": [
-        "**/__mocks__",
        "**/*.test.ts"
      ]
-    },
-    "test": {
-      "presets": [
-        [
-          "@babel/preset-env",
-          {
-            "corejs": {
-              "version": "3",
-              "proposals": true
-            },
-            "useBuiltIns": "usage"
-          }
-        ]
-      ]
    }
  }
-}
+}
@@ -3,12 +3,23 @@ version: 2.1
 defaults: &defaults
  working_directory: ~/outline
  docker:
-    - image: cimg/node:20.10
+    - 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:
@@ -25,12 +36,12 @@ jobs:
    steps:
      - checkout
      - restore_cache:
-          key: dependency-cache-v1-{{ checksum "package.json" }}
+          key: dependency-cache-{{ checksum "package.json" }}
      - run:
          name: install-deps
          command: yarn install --frozen-lockfile
      - save_cache:
-          key: dependency-cache-v1-{{ checksum "package.json" }}
+          key: dependency-cache-{{ checksum "package.json" }}
          paths:
            - ./node_modules
  lint:
@@ -38,7 +49,7 @@ jobs:
    steps:
      - checkout
      - restore_cache:
-          key: dependency-cache-v1-{{ checksum "package.json" }}
+          key: dependency-cache-{{ checksum "package.json" }}
      - run:
          name: lint
          command: yarn lint
@@ -47,7 +58,7 @@ jobs:
    steps:
      - checkout
      - restore_cache:
-          key: dependency-cache-v1-{{ checksum "package.json" }}
+          key: dependency-cache-{{ checksum "package.json" }}
      - run:
          name: typescript
          command: yarn tsc
@@ -56,7 +67,7 @@ jobs:
    steps:
      - checkout
      - restore_cache:
-          key: dependency-cache-v1-{{ checksum "package.json" }}
+          key: dependency-cache-{{ checksum "package.json" }}
      - run:
          name: test
          command: yarn test:app
@@ -65,33 +76,22 @@ jobs:
    steps:
      - checkout
      - restore_cache:
-          key: dependency-cache-v1-{{ checksum "package.json" }}
+          key: dependency-cache-{{ checksum "package.json" }}
      - run:
          name: test
          command: yarn test:shared
  test-server:
    <<: *defaults
-    parallelism: 3
-    docker:
-      - image: cimg/node:20.10
-      - image: cimg/redis:5.0
-      - image: cimg/postgres:14.2
-        environment:
-          POSTGRES_USER: postgres
-          POSTGRES_PASSWORD: password
-          POSTGRES_DB: circle_test
    steps:
      - checkout
      - restore_cache:
-          key: dependency-cache-v1-{{ checksum "package.json" }}
+          key: dependency-cache-{{ checksum "package.json" }}
      - run:
          name: migrate
-          command: ./node_modules/.bin/sequelize db:migrate
+          command: ./node_modules/.bin/sequelize db:migrate --url $DATABASE_URL_TEST
      - run:
          name: test
-          command: |
-            TESTFILES=$(circleci tests glob "**/server/**/*.test.ts" | circleci tests split)
-            yarn test --maxWorkers=2 $TESTFILES
+          command: yarn test:server --forceExit
  bundle-size:
    <<: *defaults
    environment:
@@ -99,7 +99,7 @@ jobs:
    steps:
      - checkout
      - restore_cache:
-          key: dependency-cache-v1-{{ checksum "package.json" }}
+          key: dependency-cache-{{ checksum "package.json" }}
      - run:
          name: build-vite
          command: yarn vite:build
@@ -110,7 +110,8 @@ jobs:
    executor: docker-publisher
    steps:
      - checkout
-      - setup_remote_docker
+      - setup_remote_docker:
+          version: 20.10.6
      - run:
          name: Install Docker buildx
          command: |
@@ -127,7 +128,7 @@ jobs:
            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/v7,linux/arm64/v8,linux/ppc64le,linux/s390x docker-multiarch
+            docker buildx create --name docker-multiarch --platform linux/amd64,linux/arm/v6,linux/arm/v7,linux/arm64/v8,linux/ppc64le,linux/s390x docker-multiarch
            docker buildx inspect --builder docker-multiarch --bootstrap
            docker buildx use docker-multiarch
      - run:
@@ -141,12 +142,7 @@ jobs:
          command: docker push $BASE_IMAGE_NAME:latest
      - run:
          name: Build and push Docker image
-          command: |
-            if [[ "$CIRCLE_TAG" == *"-"* ]]; then
-              docker buildx build -t $IMAGE_NAME:${CIRCLE_TAG/v/''} --platform linux/amd64,linux/arm/v7,linux/arm64/v8,linux/ppc64le,linux/s390x --push .
-            else
-              docker buildx build -t $IMAGE_NAME:latest -t $IMAGE_NAME:${CIRCLE_TAG/v/''} --platform linux/amd64,linux/arm/v7,linux/arm64/v8,linux/ppc64le,linux/s390x --push .
-            fi
+          command: docker buildx build -t $IMAGE_NAME:latest -t $IMAGE_NAME:${CIRCLE_TAG/v/''} --platform linux/amd64,linux/arm/v6,linux/arm/v7,linux/arm64/v8,linux/ppc64le,linux/s390x --push .

 workflows:
  version: 2
@@ -170,8 +166,9 @@ workflows:
            - build
      - bundle-size:
          requires:
-            - build
-            - types
+            - test-app
+            - test-shared
+            - test-server

  build-docker:
    jobs:
@@ -13,4 +13,5 @@ app.json
 crowdin.yml
 build
 docker-compose.yml
+fakes3
 node_modules
@@ -1,13 +0,0 @@
-URL=https://local.outline.dev:3000
-
-DATABASE_URL=postgres://user:pass@127.0.0.1:5432/outline
-REDIS_URL=redis://127.0.0.1:6379
-
-SMTP_FROM_EMAIL=hello@example.com
-
-# Enable unsafe-inline in script-src CSP directive
-# Setting it to true allows React dev tools add-on in Firefox to successfully detect the project
-DEVELOPMENT_UNSAFE_INLINE_CSP=true
-
-# Increase the log level to debug for development
-LOG_LEVEL=debug
@@ -12,14 +12,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@postgres:5432/outline
+DATABASE_URL=postgres://user:pass@localhost:5432/outline
+DATABASE_URL_TEST=postgres://user:pass@localhost:5432/outline-test
 DATABASE_CONNECTION_POOL_MIN=
 DATABASE_CONNECTION_POOL_MAX=
 # Uncomment this to disable SSL for connecting to Postgres
 # PGSSLMODE=disable

 # For redis you can either specify an ioredis compatible url like this
-REDIS_URL=redis://redis:6379
+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.
@@ -29,44 +30,32 @@ REDIS_URL=redis://redis:6379

 # URL should point to the fully qualified, publicly accessible URL. If using a
 # proxy the port in URL and PORT may be different.
-URL=
+URL=http://localhost:3000
 PORT=3000

 # See [documentation](docs/SERVICES.md) on running a separate collaboration
 # server, for normal operation this does not need to be set.
 COLLABORATION_URL=

-# Specify what storage system to use. Possible value is one of "s3" or "local".
-# For "local", the avatar images and document attachments will be saved on local disk. 
-FILE_STORAGE=local
+# To support uploading of images for avatars and document attachments an
+# s3-compatible storage must be provided. AWS S3 is recommended for redundancy
+# however if you want to keep all file storage local an alternative such as
+# minio (https://github.com/minio/minio) can be used.

-# If "local" is configured for FILE_STORAGE above, then this sets the parent directory under
-# which all attachments/images go. Make sure that the process has permissions to create
-# this path and also to write files to it.
-FILE_STORAGE_LOCAL_ROOT_DIR=/var/lib/outline/data
-
-# Maximum allowed size for the uploaded attachment.
-FILE_STORAGE_UPLOAD_MAX_SIZE=262144000
-
-# Override the maximum size of document imports, generally this should be lower
-# than the document attachment maximum size.
-FILE_STORAGE_IMPORT_MAX_SIZE=
-
-# Override the maximum size of workspace imports, these can be especially large
-# and the files are temporary being automatically deleted after a period of time.
-FILE_STORAGE_WORKSPACE_IMPORT_MAX_SIZE=
-
-# To support uploading of images for avatars and document attachments in a distributed 
-# architecture an s3-compatible storage can be configured if FILE_STORAGE=s3 above.
+# A more detailed guide on setting up S3 is available here:
+# => https://wiki.generaloutline.com/share/125de1cc-9ff6-424b-8415-0d58c809a40f
+#
 AWS_ACCESS_KEY_ID=get_a_key_from_aws
 AWS_SECRET_ACCESS_KEY=get_the_secret_of_above_key
 AWS_REGION=xx-xxxx-x
 AWS_S3_ACCELERATE_URL=
 AWS_S3_UPLOAD_BUCKET_URL=http://s3:4569
 AWS_S3_UPLOAD_BUCKET_NAME=bucket_name_here
+AWS_S3_UPLOAD_MAX_SIZE=26214400
 AWS_S3_FORCE_PATH_STYLE=true
 AWS_S3_ACL=private

+
 # –––––––––––––– AUTHENTICATION ––––––––––––––

 # Third party signin credentials, at least ONE OF EITHER Google, Slack,
@@ -104,48 +93,17 @@ OIDC_CLIENT_SECRET=
 OIDC_AUTH_URI=
 OIDC_TOKEN_URI=
 OIDC_USERINFO_URI=
-OIDC_LOGOUT_URI=

 # Specify which claims to derive user information from
 # Supports any valid JSON path with the JWT payload
 OIDC_USERNAME_CLAIM=preferred_username

 # Display name for OIDC authentication
-OIDC_DISPLAY_NAME=OpenID Connect
+OIDC_DISPLAY_NAME=OpenID

 # Space separated auth scopes.
 OIDC_SCOPES=openid profile email

-# To configure the GitHub integration, you'll need to create a GitHub App at
-# => https://github.com/settings/apps
-#
-# When configuring the Client ID, add a redirect URL under "Permissions & events":
-# https://<URL>/api/github.callback
-GITHUB_CLIENT_ID=
-GITHUB_CLIENT_SECRET=
-GITHUB_APP_NAME=
-GITHUB_APP_ID=
-GITHUB_APP_PRIVATE_KEY=
-
-# To configure Discord auth, you'll need to create a Discord Application at
-# => https://discord.com/developers/applications/
-#
-# When configuring the Client ID, add a redirect URL under "OAuth2":
-# https://<URL>/auth/discord.callback
-DISCORD_CLIENT_ID=
-DISCORD_CLIENT_SECRET=
-
-# DISCORD_SERVER_ID should be the ID of the Discord server that Outline is
-# integrated with. 
-# Used to verify that the user is a member of the server as well as server
-# metadata such as nicknames, server icon and name.
-DISCORD_SERVER_ID=
-
-# DISCORD_SERVER_ROLES should be a comma separated list of role IDs that are
-# allowed to access Outline. If this is not set, all members of the server
-# will be allowed to access Outline.
-# DISCORD_SERVER_ID and DISCORD_SERVER_ROLES must be set together.
-DISCORD_SERVER_ROLES=

 # –––––––––––––––– OPTIONAL ––––––––––––––––

@@ -173,6 +131,10 @@ 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
+# especially large Word documents with embedded imagery
+MAXIMUM_IMPORT_SIZE=5120000
+
 # You can remove this line if your reverse proxy already logs incoming http
 # requests and this ends up being duplicative
 DEBUG=http
@@ -189,9 +151,8 @@ SLACK_VERIFICATION_TOKEN=your_token
 SLACK_APP_ID=A0XXXXXXX
 SLACK_MESSAGE_ACTIONS=true

-# For Dropbox integration, follow these instructions to get the key https://www.dropbox.com/developers/embedder#setup
-# and do not forget to whitelist your domain name in the app settings
-DROPBOX_APP_KEY=
+# Optionally enable google analytics to track pageviews in the knowledge base
+GOOGLE_ANALYTICS_ID=

 # Optionally enable Sentry (sentry.io) to track errors and performance,
 # and optionally add a Sentry proxy tunnel for bypassing ad blockers in the UI:
@@ -220,7 +181,3 @@ 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=
@@ -1,31 +0,0 @@
-NODE_ENV=test
-DATABASE_URL=postgres://user:pass@127.0.0.1:5432/outline-test
-SECRET_KEY=F0E5AD933D7F6FD8F4DBB3E038C501C052DC0593C686D21ACB30AE205D2F634B
-
-SMTP_HOST=smtp.example.com
-SMTP_USERNAME=test
-SMTP_FROM_EMAIL=hello@example.com
-SMTP_REPLY_EMAIL=hello@example.com
-
-GOOGLE_CLIENT_ID=123
-GOOGLE_CLIENT_SECRET=123
-
-SLACK_CLIENT_ID=123
-SLACK_CLIENT_SECRET=123
-
-GITHUB_CLIENT_ID=123;
-GITHUB_CLIENT_SECRET=123;
-GITHUB_APP_NAME=outline-test;
-
-OIDC_CLIENT_ID=client-id
-OIDC_CLIENT_SECRET=client-secret
-OIDC_AUTH_URI=http://localhost/authorize
-OIDC_TOKEN_URI=http://localhost/token
-OIDC_USERINFO_URI=http://localhost/userinfo
-
-IFRAMELY_API_KEY=123
-
-RATE_LIMITER_ENABLED=false
-
-FILE_STORAGE=local
-FILE_STORAGE_LOCAL_ROOT_DIR=/tmp
@@ -3,7 +3,6 @@
  "parserOptions": {
    "sourceType": "module",
    "extraFileExtensions": [".json"],
-    "project": "./tsconfig.json",
    "ecmaFeatures": {
      "jsx": true
    }
@@ -21,40 +20,15 @@
    "eslint-plugin-import",
    "eslint-plugin-node",
    "eslint-plugin-react",
-    "eslint-plugin-lodash"
+    "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",
-    "no-shadow": "off",
    "es/no-regexp-lookbehind-assertions": "error",
-    "react/self-closing-comp": ["error", {
-      "component": true,
-      "html": true
-    }],
-    "@typescript-eslint/no-shadow": [
-      "warn",
-      {
-        "allow": ["transaction"],
-        "hoist": "all",
-        "ignoreTypeValueShadow": true
-      }
-    ],
-    "@typescript-eslint/no-explicit-any": "warn",
-    "@typescript-eslint/no-floating-promises": "error",
-    "@typescript-eslint/await-thenable": "error",
-    "@typescript-eslint/no-misused-promises": [
-      "error",
-      {
-        "checksVoidReturn": false
-      }
-    ],
    "@typescript-eslint/no-unused-vars": [
      "error",
      {
@@ -65,7 +39,6 @@
    ],
    "padding-line-between-statements": ["error", { "blankLine": "always", "prev": "*", "next": "export" }],
    "lines-between-class-members": ["error", "always", { "exceptAfterSingleLine": true }],
-    "lodash/import-scope": ["warn", "method"],
    "import/no-named-as-default": "off",
    "import/no-named-as-default-member": "off",
    "import/newline-after-import": 2,
@@ -140,4 +113,4 @@
      "typescript": {}
    }
  }
-}
+}
@@ -0,0 +1,37 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: bug
+assignees: ''
+
+---
+
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots or videos to help explain your problem.
+
+**Outline (please complete the following information):**
+- Install: [getoutline.com or self hosted]
+- Version: [commit sha if self hosted]
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Mobile (please complete the following information):**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]
@@ -1,63 +0,0 @@
-name: Bug report
-description: File a bug to help us improve
-labels: ["bug"]
-body:
- type: checkboxes
-  attributes:
-    label: Is there an existing issue for this?
-    description: Please search to see if an issue already exists for the bug you encountered.
-    options:
-    - label: I have searched the existing issues
-      required: true
- type: checkboxes
-  attributes:
-    label: This is not related to configuring Outline
-    description: I understand that questions related to configuring self-hosted Outline should be asked in the [community forum](https://github.com/outline/outline/discussions/categories/self-hosting).
-    options:
-    - label: The issue is not related to self-hosting config
-      required: true
- type: textarea
-  attributes:
-    label: Current Behavior
-    description: A concise description of what you're experiencing.
-  validations:
-    required: false
- type: textarea
-  attributes:
-    label: Expected Behavior
-    description: A concise description of what you expected to happen.
-  validations:
-    required: false
- type: textarea
-  attributes:
-    label: Steps To Reproduce
-    description: Steps to reproduce the behavior.
-    placeholder: |
-      1. In this environment...
-      1. With this config...
-      1. Run '...'
-      1. See error...
-  validations:
-    required: false
- type: textarea
-  attributes:
-    label: Environment
-    description: |
-      examples:
-        - **Outline**: Outline 0.80.0
-        - **Browser**: Safari
-    value: |
-        - Outline:
-        - Browser:
-    render: markdown
-  validations:
-    required: false
- type: textarea
-  attributes:
-    label: Anything else?
-    description: |
-      Links? References? Anything that will give us more context about the issue you are encountering!
-
-      Tip: You can attach images or log files by clicking this area to highlight it and then dragging files in.
-  validations:
-    required: false
@@ -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
@@ -7,22 +7,5 @@ version: 2
 updates:
  - package-ecosystem: "npm" # See documentation for possible values
    directory: "/" # Location of package manifests
-    open-pull-requests-limit: 5
-    ignore:
-      - dependency-name: "*"
-        update-types: ["version-update:semver-major"]
    schedule:
      interval: "weekly"
-    groups:
-      babel:
-        patterns:
-          - "@babel/*"
-      sentry:
-        patterns:
-          - "@sentry/*"
-      fortawesome:
-        patterns:
-          - "@fortawesome/*"
-      aws:
-        patterns:
-          - "@aws-sdk/*"
@@ -1,7 +1,7 @@
 # Configuration for probot-no-response - https://github.com/probot/no-response

 # Number of days of inactivity before an Issue is closed for lack of response
-daysUntilClose: 7
+daysUntilClose: 14

 # Label requiring a response
 responseRequiredLabel: more information needed
@@ -2,14 +2,12 @@ dist
 build
 node_modules/*
 .env
-.env.local
-.env.production
 .log
 .vscode/*
 npm-debug.log
 stats.json
 .DS_Store
-data/*
+fakes3/*
 .idea
 *.pem
 *.key
@@ -1,20 +1,20 @@
 {
  "workerIdleMemoryLimit": "0.75",
-  "maxWorkers": "50%",
  "projects": [
    {
      "displayName": "server",
-      "roots": ["<rootDir>/server", "<rootDir>/plugins"],
+      "roots": ["<rootDir>/server"],
      "moduleNameMapper": {
        "^@server/(.*)$": "<rootDir>/server/$1",
-        "^@shared/(.*)$": "<rootDir>/shared/$1",
-        "react-medium-image-zoom": "<rootDir>/__mocks__/react-medium-image-zoom.js"
+        "^@shared/(.*)$": "<rootDir>/shared/$1"
      },
-      "setupFiles": ["<rootDir>/__mocks__/console.js"],
+      "setupFiles": [
+        "<rootDir>/__mocks__/console.js",
+        "<rootDir>/server/test/env.ts"
+      ],
      "setupFilesAfterEnv": ["<rootDir>/server/test/setup.ts"],
-      "globalSetup": "<rootDir>/server/test/globalSetup.js",
-      "globalTeardown": "<rootDir>/server/test/globalTeardown.js",
-      "testEnvironment": "node"
+      "testEnvironment": "node",
+      "runner": "@getoutline/jest-runner-serial"
    },
    {
      "displayName": "app",
@@ -23,8 +23,7 @@
        "^~/(.*)$": "<rootDir>/app/$1",
        "^@shared/(.*)$": "<rootDir>/shared/$1",
        "^.*[.](gif|ttf|eot|svg)$": "<rootDir>/__test__/fileMock.js",
-        "^uuid$": "<rootDir>/node_modules/uuid/dist/index.js",
-        "react-medium-image-zoom": "<rootDir>/__mocks__/react-medium-image-zoom.js"
+        "^uuid$": "<rootDir>/node_modules/uuid/dist/index.js"
      },
      "modulePaths": ["<rootDir>/app"],
      "setupFiles": ["<rootDir>/__mocks__/window.js"],
@@ -39,8 +38,7 @@
      "roots": ["<rootDir>/shared"],
      "moduleNameMapper": {
        "^@server/(.*)$": "<rootDir>/server/$1",
-        "^@shared/(.*)$": "<rootDir>/shared/$1",
-        "react-medium-image-zoom": "<rootDir>/__mocks__/react-medium-image-zoom.js"
+        "^@shared/(.*)$": "<rootDir>/shared/$1"
      },
      "setupFiles": ["<rootDir>/__mocks__/console.js"],
      "setupFilesAfterEnv": ["<rootDir>/shared/test/setup.ts"],
@@ -53,8 +51,7 @@
        "^~/(.*)$": "<rootDir>/app/$1",
        "^@shared/(.*)$": "<rootDir>/shared/$1",
        "^.*[.](gif|ttf|eot|svg)$": "<rootDir>/__test__/fileMock.js",
-        "^uuid$": "<rootDir>/node_modules/uuid/dist/index.js",
-        "react-medium-image-zoom": "<rootDir>/__mocks__/react-medium-image-zoom.js"
+        "^uuid$": "<rootDir>/node_modules/uuid/dist/index.js"
      },
      "setupFiles": ["<rootDir>/__mocks__/window.js"],
      "testEnvironment": "jsdom",
@@ -1,6 +1,4 @@
-require("dotenv").config({
-  path: process.env.NODE_ENV === "test" ? ".env.test" : ".env",
-});
+require('dotenv').config({ silent: true });

 var path = require('path');

@@ -8,4 +6,5 @@ module.exports = {
  'config': path.resolve('server/config', 'database.json'),
  'migrations-path': path.resolve('server', 'migrations'),
  'models-path': path.resolve('server', 'models'),
+  'seeders-path': path.resolve('server/models', 'fixtures'),
 }
@@ -1,17 +1,15 @@
 ARG APP_PATH=/opt/outline
-FROM outlinewiki/outline-base AS base
+FROM outlinewiki/outline-base as base

 ARG APP_PATH
 WORKDIR $APP_PATH

 # ---
-FROM node:20-slim AS runner
-
-LABEL org.opencontainers.image.source="https://github.com/outline/outline"
+FROM node:18-alpine AS runner

 ARG APP_PATH
 WORKDIR $APP_PATH
-ENV NODE_ENV=production
+ENV NODE_ENV production

 COPY --from=base $APP_PATH/build ./build
 COPY --from=base $APP_PATH/server ./server
@@ -20,28 +18,11 @@ 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

-# Install wget to healthcheck the server
-RUN  apt-get update \
-  && apt-get install -y wget \
-  && rm -rf /var/lib/apt/lists/*
-
-# Create a non-root user compatible with Debian and BusyBox based images
-RUN addgroup --gid 1001 nodejs && \
-  adduser --uid 1001 --ingroup nodejs nodejs && \
-  chown -R nodejs:nodejs $APP_PATH/build && \
-  mkdir -p /var/lib/outline && \
-	chown -R nodejs:nodejs /var/lib/outline
-
-ENV FILE_STORAGE_LOCAL_ROOT_DIR=/var/lib/outline/data
-RUN mkdir -p "$FILE_STORAGE_LOCAL_ROOT_DIR" && \
-  chown -R nodejs:nodejs "$FILE_STORAGE_LOCAL_ROOT_DIR" && \
-  chmod 1777 "$FILE_STORAGE_LOCAL_ROOT_DIR"
-
-VOLUME /var/lib/outline/data
+RUN addgroup -g 1001 -S nodejs && \
+  adduser -S nodejs -u 1001 && \
+  chown -R nodejs:nodejs $APP_PATH/build

 USER nodejs

-HEALTHCHECK --interval=1m CMD wget -qO- "http://localhost:${PORT:-3000}/_health" | grep -q "OK" || exit 1
-
 EXPOSE 3000
 CMD ["yarn", "start"]
@@ -1,5 +1,5 @@
 ARG APP_PATH=/opt/outline
-FROM node:20-slim AS deps
+FROM node:16.14.2-alpine3.15 AS deps

 ARG APP_PATH
 WORKDIR $APP_PATH
@@ -17,5 +17,3 @@ RUN rm -rf node_modules

 RUN yarn install --production=true --frozen-lockfile --network-timeout 1000000 && \
  yarn cache clean
-
-ENV PORT=3000
@@ -3,8 +3,8 @@ Business Source License 1.1
 Parameters

 Licensor:             General Outline, Inc.
-Licensed Work:        Outline 0.81.0
-                      The Licensed Work is (c) 2024 General Outline, Inc.
+Licensed Work:        Outline 0.64.0
+                      The Licensed Work is (c) 2020 General Outline, Inc.
 Additional Use Grant: You may make use of the Licensed Work, provided that
                      you may not use the Licensed Work for a Document
                      Service.
@@ -15,7 +15,7 @@ Additional Use Grant: You may make use of the Licensed Work, provided that
                      Licensed Work by creating teams and documents
                      controlled by such third parties.

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

 Change License:       Apache License, Version 2.0

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

 build:
-	docker compose build --pull outline
+	docker-compose build --pull outline

 test:
-	docker compose up -d redis postgres
-	NODE_ENV=test yarn sequelize db:drop
-	NODE_ENV=test yarn sequelize db:create
-	NODE_ENV=test yarn sequelize db:migrate
+	docker-compose up -d redis postgres s3
+	yarn sequelize db:drop --env=test
+	yarn sequelize db:create --env=test
+	yarn sequelize db:migrate --env=test
 	yarn test

 watch:
-	docker compose up -d redis postgres
-	NODE_ENV=test yarn sequelize db:drop
-	NODE_ENV=test yarn sequelize db:create
-	NODE_ENV=test yarn sequelize db:migrate
+	docker-compose up -d redis postgres s3
+	yarn sequelize db:drop --env=test
+	yarn sequelize db:create --env=test
+	yarn sequelize db:migrate --env=test
 	yarn test:watch

 destroy:
-	docker compose stop
-	docker compose rm -f
+	docker-compose stop
+	docker-compose rm -f

 .PHONY: up build destroy test watch # let's go to reserve rules names
@@ -7,32 +7,32 @@
  <img width="1640" alt="screenshot" src="https://user-images.githubusercontent.com/380914/110356468-26374600-7fef-11eb-9f6a-f2cc2c8c6590.png">
 </p>
 <p align="center">
-  <a href="https://circleci.com/gh/outline/outline" rel="nofollow"><img src="https://circleci.com/gh/outline/outline.svg?style=shield"></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

 Outline is built and maintained by a small team – we'd love your help to fix bugs and add features!

-Before submitting a pull request _please_ discuss with the core team by creating or commenting in an issue on [GitHub](https://www.github.com/outline/outline/issues) – we'd also love to hear from you in the [discussions](https://www.github.com/outline/outline/discussions). This way we can ensure that an approach is agreed on before code is written. This will result in a much higher likelihood of your code being accepted.
+Before submitting a pull request _please_ discuss with the core team by creating or commenting in an issue on [GitHub](https://www.github.com/outline/outline/issues) – we'd also love to hear from you in the [discussions](https://www.github.com/outline/outline/discussions). This way we can ensure that an approach is agreed on before code is written. This will result in a much higher liklihood of your code being accepted.

 If you’re looking for ways to get started, here's a list of ways to help us improve Outline:

@@ -96,10 +96,6 @@ Or to run migrations on test database:
 yarn sequelize db:migrate --env test
 ```

-# Activity
-
-![Alt](https://repobeats.axiom.co/api/embed/ff2e4e6918afff1acf9deb72d1ba6b071d586178.svg "Repobeats analytics image")
-
-# License
+## License

 Outline is [BSL 1.1 licensed](LICENSE).
@@ -1 +0,0 @@
-export default null;
@@ -39,11 +39,6 @@
      "generator": "secret",
      "required": true
    },
-    "UTILS_SECRET": {
-      "description": "A 32-character secret key, generate with openssl rand -hex 32",
-      "generator": "secret",
-      "required": true
-    },
    "ENABLE_UPDATES": {
      "value": "true",
      "required": true
@@ -92,14 +87,6 @@
      "description": "",
      "required": false
    },
-    "OIDC_DISABLE_REDIRECT": {
-      "description": "Prevent the app from automatically redirecting to the OIDC login page",
-      "required": false
-    },
-    "OIDC_LOGOUT_URI": {
-      "description": "",
-      "required": false
-    },
    "OIDC_USERNAME_CLAIM": {
      "description": "Specify which claims to derive user information from. Supports any valid JSON path with the JWT payload",
      "value": "preferred_username",
@@ -107,7 +94,7 @@
    },
    "OIDC_DISPLAY_NAME": {
      "description": "Display name for OIDC authentication",
-      "value": "OpenID Connect",
+      "value": "OpenID",
      "required": false
    },
    "OIDC_SCOPES": {
@@ -147,6 +134,11 @@
      "description": "Live web link to your bucket. For CNAMEs, https://yourbucket.example.com",
      "required": false
    },
+    "AWS_S3_UPLOAD_MAX_SIZE": {
+      "description": "Maximum file upload size in bytes",
+      "value": "26214400",
+      "required": false
+    },
    "AWS_S3_FORCE_PATH_STYLE": {
      "description": "Use path-style URL's for connecting to S3 instead of subdomain. This is useful for S3-compatible storage.",
      "value": "true",
@@ -162,11 +154,6 @@
      "description": "S3 canned ACL for document attachments",
      "required": false
    },
-    "FILE_STORAGE_UPLOAD_MAX_SIZE": {
-      "description": "Maximum file upload size in bytes",
-      "value": "26214400",
-      "required": false
-    },
    "SMTP_HOST": {
      "description": "smtp.example.com (optional)",
      "required": false
@@ -201,7 +188,7 @@
      "required": false
    },
    "GOOGLE_ANALYTICS_ID": {
-      "description": "G-xxxx (optional)",
+      "description": "UA-xxxx (optional)",
      "required": false
    },
    "SENTRY_DSN": {
@@ -218,4 +205,4 @@
      "required": false
    }
  }
-}
+}
@@ -1,11 +1,10 @@
 {
  "extends": [
    "../.eslintrc",
-    "plugin:react/recommended",
-    "plugin:react-hooks/recommended"
+    "plugin:react-hooks/recommended",
  ],
  "plugins": [
-    "eslint-plugin-react-hooks"
+    "eslint-plugin-react-hooks",
  ],
  "env": {
    "jest": true,
@@ -1,25 +0,0 @@
-import { PlusIcon } from "outline-icons";
-import * as React from "react";
-import stores from "~/stores";
-import ApiKeyNew from "~/scenes/ApiKeyNew";
-import { createAction } from "..";
-import { SettingsSection } from "../sections";
-
-export const createApiKey = createAction({
-  name: ({ t }) => t("New API key"),
-  analyticsName: "New API key",
-  section: SettingsSection,
-  icon: <PlusIcon />,
-  keywords: "create",
-  visible: () =>
-    stores.policies.abilities(stores.auth.team?.id || "").createApiKey,
-  perform: ({ t, event }) => {
-    event?.preventDefault();
-    event?.stopPropagation();
-
-    stores.dialogs.openModal({
-      title: t("New API key"),
-      content: <ApiKeyNew onSubmit={stores.dialogs.closeAllModals} />,
-    });
-  },
-});
@@ -1,36 +1,25 @@
 import {
-  ArchiveIcon,
  CollectionIcon,
  EditIcon,
  PadlockIcon,
  PlusIcon,
-  RestoreIcon,
-  SearchIcon,
-  ShapesIcon,
  StarredIcon,
-  TrashIcon,
  UnstarredIcon,
 } from "outline-icons";
 import * as React from "react";
-import { toast } from "sonner";
 import stores from "~/stores";
 import Collection from "~/models/Collection";
-import { CollectionEdit } from "~/components/Collection/CollectionEdit";
-import { CollectionNew } from "~/components/Collection/CollectionNew";
-import CollectionDeleteDialog from "~/components/CollectionDeleteDialog";
-import ConfirmationDialog from "~/components/ConfirmationDialog";
+import CollectionEdit from "~/scenes/CollectionEdit";
+import CollectionNew from "~/scenes/CollectionNew";
+import CollectionPermissions from "~/scenes/CollectionPermissions";
 import DynamicCollectionIcon from "~/components/Icons/CollectionIcon";
-import SharePopover from "~/components/Sharing/Collection/SharePopover";
-import { getHeaderExpandedKey } from "~/components/Sidebar/components/Header";
 import { createAction } from "~/actions";
-import { ActiveCollectionSection, CollectionSection } from "~/actions/sections";
-import { setPersistedState } from "~/hooks/usePersistedState";
+import { CollectionSection } from "~/actions/sections";
 import history from "~/utils/history";
-import { newTemplatePath, searchPath } from "~/utils/routeHelpers";

-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"),
@@ -43,11 +32,11 @@ export const openCollection = createAction({
    return collections.map((collection) => ({
      // Note: using url which includes the slug rather than id here to bust
      // cache if the collection is renamed
-      id: collection.path,
+      id: collection.url,
      name: collection.name,
      icon: <ColorCollectionIcon collection={collection} />,
      section: CollectionSection,
-      perform: () => history.push(collection.path),
+      perform: () => history.push(collection.url),
    }));
  },
 });
@@ -74,9 +63,9 @@ export const editCollection = createAction({
  name: ({ t, isContextMenu }) =>
    isContextMenu ? `${t("Edit")}…` : t("Edit collection"),
  analyticsName: "Edit collection",
-  section: ActiveCollectionSection,
+  section: CollectionSection,
  icon: <EditIcon />,
-  visible: ({ activeCollectionId }) =>
+  visible: ({ stores, activeCollectionId }) =>
    !!activeCollectionId &&
    stores.policies.abilities(activeCollectionId).update,
  perform: ({ t, activeCollectionId }) => {
@@ -100,65 +89,30 @@ export const editCollectionPermissions = createAction({
  name: ({ t, isContextMenu }) =>
    isContextMenu ? `${t("Permissions")}…` : t("Collection permissions"),
  analyticsName: "Collection permissions",
-  section: ActiveCollectionSection,
+  section: CollectionSection,
  icon: <PadlockIcon />,
-  visible: ({ activeCollectionId }) =>
+  visible: ({ stores, activeCollectionId }) =>
    !!activeCollectionId &&
    stores.policies.abilities(activeCollectionId).update,
  perform: ({ t, activeCollectionId }) => {
    if (!activeCollectionId) {
      return;
    }
-    const collection = stores.collections.get(activeCollectionId);
-    if (!collection) {
-      return;
-    }

    stores.dialogs.openModal({
-      title: t("Share this collection"),
-      style: { marginBottom: -12 },
-      content: (
-        <SharePopover
-          collection={collection}
-          onRequestClose={stores.dialogs.closeAllModals}
-          visible
-        />
-      ),
+      title: t("Collection permissions"),
+      content: <CollectionPermissions collectionId={activeCollectionId} />,
    });
  },
 });

-export const searchInCollection = createAction({
-  name: ({ t }) => t("Search in collection"),
-  analyticsName: "Search collection",
-  section: ActiveCollectionSection,
-  icon: <SearchIcon />,
-  visible: ({ activeCollectionId }) => {
-    if (!activeCollectionId) {
-      return false;
-    }
-
-    const collection = stores.collections.get(activeCollectionId);
-
-    if (!collection?.isActive) {
-      return false;
-    }
-
-    return stores.policies.abilities(activeCollectionId).readDocument;
-  },
-
-  perform: ({ activeCollectionId }) => {
-    history.push(searchPath(undefined, { collectionId: activeCollectionId }));
-  },
-});
-
 export const starCollection = createAction({
  name: ({ t }) => t("Star"),
  analyticsName: "Star collection",
-  section: ActiveCollectionSection,
+  section: CollectionSection,
  icon: <StarredIcon />,
  keywords: "favorite bookmark",
-  visible: ({ activeCollectionId }) => {
+  visible: ({ activeCollectionId, stores }) => {
    if (!activeCollectionId) {
      return false;
    }
@@ -168,24 +122,23 @@ export const starCollection = createAction({
      stores.policies.abilities(activeCollectionId).star
    );
  },
-  perform: async ({ activeCollectionId }) => {
+  perform: ({ activeCollectionId, stores }) => {
    if (!activeCollectionId) {
      return;
    }

    const collection = stores.collections.get(activeCollectionId);
-    await collection?.star();
-    setPersistedState(getHeaderExpandedKey("starred"), true);
+    collection?.star();
  },
 });

 export const unstarCollection = createAction({
  name: ({ t }) => t("Unstar"),
  analyticsName: "Unstar collection",
-  section: ActiveCollectionSection,
+  section: CollectionSection,
  icon: <UnstarredIcon />,
  keywords: "unfavorite unbookmark",
-  visible: ({ activeCollectionId }) => {
+  visible: ({ activeCollectionId, stores }) => {
    if (!activeCollectionId) {
      return false;
    }
@@ -195,134 +148,13 @@ export const unstarCollection = createAction({
      stores.policies.abilities(activeCollectionId).unstar
    );
  },
-  perform: async ({ activeCollectionId }) => {
+  perform: ({ activeCollectionId, stores }) => {
    if (!activeCollectionId) {
      return;
    }

    const collection = stores.collections.get(activeCollectionId);
-    await collection?.unstar();
-  },
-});
-
-export const archiveCollection = createAction({
-  name: ({ t }) => `${t("Archive")}…`,
-  analyticsName: "Archive collection",
-  section: CollectionSection,
-  icon: <ArchiveIcon />,
-  visible: ({ activeCollectionId, stores }) => {
-    if (!activeCollectionId) {
-      return false;
-    }
-    return !!stores.policies.abilities(activeCollectionId).archive;
-  },
-  perform: async ({ activeCollectionId, stores, t }) => {
-    const { dialogs, collections } = stores;
-    if (!activeCollectionId) {
-      return;
-    }
-    const collection = collections.get(activeCollectionId);
-    if (!collection) {
-      return;
-    }
-
-    dialogs.openModal({
-      title: t("Archive collection"),
-      content: (
-        <ConfirmationDialog
-          onSubmit={async () => {
-            await collection.archive();
-            toast.success(t("Collection archived"));
-          }}
-          submitText={t("Archive")}
-          savingText={`${t("Archiving")}…`}
-        >
-          {t(
-            "Archiving this collection will also archive all documents within it. Documents from the collection will no longer be visible in search results."
-          )}
-        </ConfirmationDialog>
-      ),
-    });
-  },
-});
-
-export const restoreCollection = createAction({
-  name: ({ t }) => t("Restore"),
-  analyticsName: "Restore collection",
-  section: CollectionSection,
-  icon: <RestoreIcon />,
-  visible: ({ activeCollectionId, stores }) => {
-    if (!activeCollectionId) {
-      return false;
-    }
-    return !!stores.policies.abilities(activeCollectionId).restore;
-  },
-  perform: async ({ activeCollectionId, stores, t }) => {
-    if (!activeCollectionId) {
-      return;
-    }
-    const collection = stores.collections.get(activeCollectionId);
-    if (!collection) {
-      return;
-    }
-
-    await collection.restore();
-    toast.success(t("Collection restored"));
-  },
-});
-
-export const deleteCollection = createAction({
-  name: ({ t }) => `${t("Delete")}…`,
-  analyticsName: "Delete collection",
-  section: ActiveCollectionSection,
-  dangerous: true,
-  icon: <TrashIcon />,
-  visible: ({ activeCollectionId }) => {
-    if (!activeCollectionId) {
-      return false;
-    }
-    return stores.policies.abilities(activeCollectionId).delete;
-  },
-  perform: ({ activeCollectionId, t }) => {
-    if (!activeCollectionId) {
-      return;
-    }
-
-    const collection = stores.collections.get(activeCollectionId);
-    if (!collection) {
-      return;
-    }
-
-    stores.dialogs.openModal({
-      title: t("Delete collection"),
-      content: (
-        <CollectionDeleteDialog
-          collection={collection}
-          onSubmit={stores.dialogs.closeAllModals}
-        />
-      ),
-    });
-  },
-});
-
-export const createTemplate = createAction({
-  name: ({ t }) => t("New template"),
-  analyticsName: "New template",
-  section: ActiveCollectionSection,
-  icon: <ShapesIcon />,
-  keywords: "new create template",
-  visible: ({ activeCollectionId }) =>
-    !!(
-      !!activeCollectionId &&
-      stores.policies.abilities(activeCollectionId).createDocument
-    ),
-  perform: ({ activeCollectionId, event }) => {
-    if (!activeCollectionId) {
-      return;
-    }
-    event?.preventDefault();
-    event?.stopPropagation();
-    history.push(newTemplatePath(activeCollectionId));
+    collection?.unstar();
  },
 });

@@ -331,5 +163,4 @@ export const rootCollectionActions = [
  createCollection,
  starCollection,
  unstarCollection,
-  deleteCollection,
 ];
@@ -1,123 +0,0 @@
-import { DoneIcon, SmileyIcon, TrashIcon } from "outline-icons";
-import * as React from "react";
-import { toast } from "sonner";
-import stores from "~/stores";
-import Comment from "~/models/Comment";
-import CommentDeleteDialog from "~/components/CommentDeleteDialog";
-import ViewReactionsDialog from "~/components/Reactions/ViewReactionsDialog";
-import history from "~/utils/history";
-import { createAction } from "..";
-import { DocumentSection } from "../sections";
-
-export const deleteCommentFactory = ({
-  comment,
-  onDelete,
-}: {
-  comment: Comment;
-  onDelete: () => void;
-}) =>
-  createAction({
-    name: ({ t }) => `${t("Delete")}…`,
-    analyticsName: "Delete comment",
-    section: DocumentSection,
-    icon: <TrashIcon />,
-    keywords: "trash",
-    dangerous: true,
-    visible: () => stores.policies.abilities(comment.id).delete,
-    perform: ({ t, event }) => {
-      event?.preventDefault();
-      event?.stopPropagation();
-
-      stores.dialogs.openModal({
-        title: t("Delete comment"),
-        content: <CommentDeleteDialog comment={comment} onSubmit={onDelete} />,
-      });
-    },
-  });
-
-export const resolveCommentFactory = ({
-  comment,
-  onResolve,
-}: {
-  comment: Comment;
-  onResolve: () => void;
-}) =>
-  createAction({
-    name: ({ t }) => t("Mark as resolved"),
-    analyticsName: "Resolve thread",
-    section: DocumentSection,
-    icon: <DoneIcon outline />,
-    visible: () =>
-      stores.policies.abilities(comment.id).resolve &&
-      stores.policies.abilities(comment.documentId).update,
-    perform: async ({ t }) => {
-      await comment.resolve();
-
-      const locationState = history.location.state as Record<string, unknown>;
-      history.replace({
-        ...history.location,
-        state: {
-          sidebarContext: locationState["sidebarContext"],
-          commentId: undefined,
-        },
-      });
-
-      onResolve();
-      toast.success(t("Thread resolved"));
-    },
-  });
-
-export const unresolveCommentFactory = ({
-  comment,
-  onUnresolve,
-}: {
-  comment: Comment;
-  onUnresolve: () => void;
-}) =>
-  createAction({
-    name: ({ t }) => t("Mark as unresolved"),
-    analyticsName: "Unresolve thread",
-    section: DocumentSection,
-    icon: <DoneIcon outline />,
-    visible: () =>
-      stores.policies.abilities(comment.id).unresolve &&
-      stores.policies.abilities(comment.documentId).update,
-    perform: async () => {
-      await comment.unresolve();
-
-      const locationState = history.location.state as Record<string, unknown>;
-      history.replace({
-        ...history.location,
-        state: {
-          sidebarContext: locationState["sidebarContext"],
-          commentId: undefined,
-        },
-      });
-
-      onUnresolve();
-    },
-  });
-
-export const viewCommentReactionsFactory = ({
-  comment,
-}: {
-  comment: Comment;
-}) =>
-  createAction({
-    name: ({ t }) => `${t("View reactions")}`,
-    analyticsName: "View comment reactions",
-    section: DocumentSection,
-    icon: <SmileyIcon />,
-    visible: () =>
-      stores.policies.abilities(comment.id).read &&
-      comment.reactions.length > 0,
-    perform: ({ t, event }) => {
-      event?.preventDefault();
-      event?.stopPropagation();
-
-      stores.dialogs.openModal({
-        title: t("Reactions"),
-        content: <ViewReactionsDialog model={comment} />,
-      });
-    },
-  });
@@ -1,175 +1,50 @@
-import copy from "copy-to-clipboard";
-import {
-  BeakerIcon,
-  CopyIcon,
-  ToolsIcon,
-  TrashIcon,
-  UserIcon,
-} from "outline-icons";
+import { ToolsIcon, TrashIcon, UserIcon } from "outline-icons";
 import * as React from "react";
-import { toast } from "sonner";
+import stores from "~/stores";
 import { createAction } from "~/actions";
 import { DeveloperSection } from "~/actions/sections";
 import env from "~/env";
 import { client } from "~/utils/ApiClient";
-import { Feature, FeatureFlags } from "~/utils/FeatureFlags";
-import Logger from "~/utils/Logger";
 import { deleteAllDatabases } from "~/utils/developer";
-import history from "~/utils/history";
-import { homePath } from "~/utils/routeHelpers";
-
-export const copyId = createAction({
-  name: ({ t }) => t("Copy ID"),
-  icon: <CopyIcon />,
-  keywords: "uuid",
-  section: DeveloperSection,
-  children: ({
-    currentTeamId,
-    currentUserId,
-    activeCollectionId,
-    activeDocumentId,
-  }) => {
-    function copyAndToast(text: string | null | undefined) {
-      if (text) {
-        copy(text);
-        toast.success("Copied to clipboard");
-      }
-    }
-
-    return [
-      createAction({
-        name: "Copy User ID",
-        section: DeveloperSection,
-        icon: <CopyIcon />,
-        visible: () => !!currentUserId,
-        perform: () => copyAndToast(currentUserId),
-      }),
-      createAction({
-        name: "Copy Team ID",
-        section: DeveloperSection,
-        icon: <CopyIcon />,
-        visible: () => !!currentTeamId,
-        perform: () => copyAndToast(currentTeamId),
-      }),
-      createAction({
-        name: "Copy Collection ID",
-        icon: <CopyIcon />,
-        section: DeveloperSection,
-        visible: () => !!activeCollectionId,
-        perform: () => copyAndToast(activeCollectionId),
-      }),
-      createAction({
-        name: "Copy Document ID",
-        icon: <CopyIcon />,
-        section: DeveloperSection,
-        visible: () => !!activeDocumentId,
-        perform: () => copyAndToast(activeDocumentId),
-      }),
-      createAction({
-        name: "Copy Team ID",
-        icon: <CopyIcon />,
-        section: DeveloperSection,
-        visible: () => !!currentTeamId,
-        perform: () => copyAndToast(currentTeamId),
-      }),
-      createAction({
-        name: "Copy Release ID",
-        icon: <CopyIcon />,
-        section: DeveloperSection,
-        visible: () => !!env.VERSION,
-        perform: () => copyAndToast(env.VERSION),
-      }),
-    ];
-  },
-});

 export const clearIndexedDB = createAction({
-  name: ({ t }) => t("Clear IndexedDB cache"),
+  name: ({ t }) => t("Delete IndexedDB cache"),
  icon: <TrashIcon />,
  keywords: "cache clear database",
  section: DeveloperSection,
  perform: async ({ t }) => {
-    history.push(homePath());
    await deleteAllDatabases();
-    toast.success(t("IndexedDB cache cleared"));
+    stores.toasts.showToast(t("IndexedDB cache deleted"));
  },
 });

 export const createTestUsers = createAction({
-  name: "Create 10 test users",
+  name: "Create test users",
  icon: <UserIcon />,
  section: DeveloperSection,
  visible: () => env.ENVIRONMENT === "development",
  perform: async () => {
    const count = 10;
-    await client.post("/developer.create_test_users", { count });
-    toast.message(`${count} test users created`);
-  },
-});

-export const createToast = createAction({
-  name: "Create toast",
-  section: DeveloperSection,
-  visible: () => env.ENVIRONMENT === "development",
-  perform: () => {
-    toast.message("Hello world", {
-      duration: 30000,
-    });
+    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: ({ t }) => {
-    Logger.debugLoggingEnabled = !Logger.debugLoggingEnabled;
-    toast.message(
-      Logger.debugLoggingEnabled
-        ? t("Debug logging enabled")
-        : t("Debug logging disabled")
-    );
-  },
-});
-
-export const toggleFeatureFlag = createAction({
-  name: "Toggle feature flag",
-  icon: <BeakerIcon />,
-  section: DeveloperSection,
-  visible: () => env.ENVIRONMENT === "development",
-  children: Object.values(Feature).map((flag) =>
-    createAction({
-      id: `flag-${flag}`,
-      name: flag,
-      selected: () => FeatureFlags.isEnabled(flag),
-      section: DeveloperSection,
-      perform: () => {
-        if (FeatureFlags.isEnabled(flag)) {
-          FeatureFlags.disable(flag);
-          toast.success(`Disabled feature flag: ${flag}`);
-        } else {
-          FeatureFlags.enable(flag);
-          toast.success(`Enabled feature flag: ${flag}`);
-        }
-      },
-    })
-  ),
-});
-
 export const developer = createAction({
-  name: ({ t }) => t("Development"),
+  name: ({ t }) => t("Developer"),
  keywords: "debug",
  icon: <ToolsIcon />,
  iconInContextMenu: false,
  section: DeveloperSection,
-  children: [
-    copyId,
-    toggleDebugLogging,
-    toggleFeatureFlag,
-    createToast,
-    createTestUsers,
-    clearIndexedDB,
-  ],
+  visible: ({ event }) =>
+    env.ENVIRONMENT === "development" ||
+    (event instanceof KeyboardEvent && event.altKey),
+  children: [clearIndexedDB, createTestUsers],
 });

 export const rootDeveloperActions = [developer];
@@ -3,35 +3,42 @@ import {
  SearchIcon,
  ArchiveIcon,
  TrashIcon,
+  EditIcon,
  OpenIcon,
  SettingsIcon,
+  ShapesIcon,
  KeyboardIcon,
  EmailIcon,
  LogoutIcon,
  ProfileIcon,
  BrowserIcon,
-  ShapesIcon,
-  DraftsIcon,
 } from "outline-icons";
 import * as React from "react";
-import { UrlHelper } from "@shared/utils/UrlHelper";
-import { isMac } from "@shared/utils/browser";
+import {
+  developersUrl,
+  changelogUrl,
+  feedbackUrl,
+  githubIssuesUrl,
+} from "@shared/utils/urlHelpers";
 import stores from "~/stores";
 import SearchQuery from "~/models/SearchQuery";
 import KeyboardShortcuts from "~/scenes/KeyboardShortcuts";
 import { createAction } from "~/actions";
 import { NavigationSection, RecentSearchesSection } from "~/actions/sections";
-import env from "~/env";
 import Desktop from "~/utils/Desktop";
+import { isMac } from "~/utils/browser";
 import history from "~/utils/history";
 import isCloudHosted from "~/utils/isCloudHosted";
 import {
+  organizationSettingsPath,
+  profileSettingsPath,
+  accountPreferencesPath,
  homePath,
  searchPath,
  draftsPath,
+  templatesPath,
  archivePath,
  trashPath,
-  settingsPath,
 } from "~/utils/routeHelpers";

 export const navigateToHome = createAction({
@@ -57,11 +64,20 @@ export const navigateToDrafts = createAction({
  name: ({ t }) => t("Drafts"),
  analyticsName: "Navigate to drafts",
  section: NavigationSection,
-  icon: <DraftsIcon />,
+  icon: <EditIcon />,
  perform: () => history.push(draftsPath()),
  visible: ({ location }) => location.pathname !== draftsPath(),
 });

+export const navigateToTemplates = createAction({
+  name: ({ t }) => t("Templates"),
+  analyticsName: "Navigate to templates",
+  section: NavigationSection,
+  icon: <ShapesIcon />,
+  perform: () => history.push(templatesPath()),
+  visible: ({ location }) => location.pathname !== templatesPath(),
+});
+
 export const navigateToArchive = createAction({
  name: ({ t }) => t("Archive"),
  analyticsName: "Navigate to archive",
@@ -87,17 +103,9 @@ export const navigateToSettings = createAction({
  section: NavigationSection,
  shortcut: ["g", "s"],
  icon: <SettingsIcon />,
-  visible: () => stores.policies.abilities(stores.auth.team?.id || "").update,
-  perform: () => history.push(settingsPath()),
-});
-
-export const navigateToWorkspaceSettings = createAction({
-  name: ({ t }) => t("Settings"),
-  analyticsName: "Navigate to workspace settings",
-  section: NavigationSection,
-  icon: <SettingsIcon />,
-  visible: () => stores.policies.abilities(stores.auth.team?.id || "").update,
-  perform: () => history.push(settingsPath("details")),
+  visible: ({ stores }) =>
+    stores.policies.abilities(stores.auth.team?.id || "").update,
+  perform: () => history.push(organizationSettingsPath()),
 });

 export const navigateToProfileSettings = createAction({
@@ -106,25 +114,7 @@ export const navigateToProfileSettings = createAction({
  section: NavigationSection,
  iconInContextMenu: false,
  icon: <ProfileIcon />,
-  perform: () => history.push(settingsPath()),
-});
-
-export const navigateToTemplateSettings = createAction({
-  name: ({ t }) => t("Templates"),
-  analyticsName: "Navigate to template settings",
-  section: NavigationSection,
-  iconInContextMenu: false,
-  icon: <ShapesIcon />,
-  perform: () => history.push(settingsPath("templates")),
-});
-
-export const navigateToNotificationSettings = createAction({
-  name: ({ t }) => t("Notifications"),
-  analyticsName: "Navigate to notification settings",
-  section: NavigationSection,
-  iconInContextMenu: false,
-  icon: <EmailIcon />,
-  perform: () => history.push(settingsPath("notifications")),
+  perform: () => history.push(profileSettingsPath()),
 });

 export const navigateToAccountPreferences = createAction({
@@ -133,16 +123,7 @@ export const navigateToAccountPreferences = createAction({
  section: NavigationSection,
  iconInContextMenu: false,
  icon: <SettingsIcon />,
-  perform: () => history.push(settingsPath("preferences")),
-});
-
-export const openDocumentation = createAction({
-  name: ({ t }) => t("Documentation"),
-  analyticsName: "Open documentation",
-  section: NavigationSection,
-  iconInContextMenu: false,
-  icon: <OpenIcon />,
-  perform: () => window.open(UrlHelper.guide),
+  perform: () => history.push(accountPreferencesPath()),
 });

 export const openAPIDocumentation = createAction({
@@ -151,15 +132,7 @@ export const openAPIDocumentation = createAction({
  section: NavigationSection,
  iconInContextMenu: false,
  icon: <OpenIcon />,
-  perform: () => window.open(UrlHelper.developers),
-});
-
-export const toggleSidebar = createAction({
-  name: ({ t }) => t("Toggle sidebar"),
-  analyticsName: "Toggle sidebar",
-  keywords: "hide show navigation",
-  section: NavigationSection,
-  perform: () => stores.ui.toggleCollapsedSidebar(),
+  perform: () => window.open(developersUrl()),
 });

 export const openFeedbackUrl = createAction({
@@ -168,14 +141,14 @@ export const openFeedbackUrl = createAction({
  section: NavigationSection,
  iconInContextMenu: false,
  icon: <EmailIcon />,
-  perform: () => window.open(UrlHelper.contact),
+  perform: () => window.open(feedbackUrl()),
 });

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

 export const openChangelog = createAction({
@@ -184,7 +157,7 @@ export const openChangelog = createAction({
  section: NavigationSection,
  iconInContextMenu: false,
  icon: <OpenIcon />,
-  perform: () => window.open(UrlHelper.changelog),
+  perform: () => window.open(changelogUrl()),
 });

 export const openKeyboardShortcuts = createAction({
@@ -222,28 +195,20 @@ export const logout = createAction({
  analyticsName: "Log out",
  section: NavigationSection,
  icon: <LogoutIcon />,
-  perform: async () => {
-    await stores.auth.logout();
-    if (env.OIDC_LOGOUT_URI) {
-      setTimeout(() => {
-        window.location.replace(env.OIDC_LOGOUT_URI);
-      }, 200);
-    }
-  },
+  perform: () => stores.auth.logout(),
 });

 export const rootNavigationActions = [
  navigateToHome,
  navigateToDrafts,
+  navigateToTemplates,
  navigateToArchive,
  navigateToTrash,
  downloadApp,
-  openDocumentation,
  openAPIDocumentation,
  openFeedbackUrl,
  openBugReportUrl,
  openChangelog,
  openKeyboardShortcuts,
-  toggleSidebar,
  logout,
 ];
@@ -1,29 +0,0 @@
-import { ArchiveIcon, MarkAsReadIcon } from "outline-icons";
-import * as React from "react";
-import { createAction } from "..";
-import { NotificationSection } from "../sections";
-
-export const markNotificationsAsRead = createAction({
-  name: ({ t }) => t("Mark notifications as read"),
-  analyticsName: "Mark notifications as read",
-  section: NotificationSection,
-  icon: <MarkAsReadIcon />,
-  shortcut: ["Shift+Escape"],
-  perform: ({ stores }) => stores.notifications.markAllAsRead(),
-  visible: ({ stores }) => stores.notifications.approximateUnreadCount > 0,
-});
-
-export const markNotificationsAsArchived = createAction({
-  name: ({ t }) => t("Archive all notifications"),
-  analyticsName: "Mark notifications as archived",
-  section: NotificationSection,
-  icon: <ArchiveIcon />,
-  iconInContextMenu: false,
-  perform: ({ stores }) => stores.notifications.markAllAsArchived(),
-  visible: ({ stores }) => stores.notifications.orderedData.length > 0,
-});
-
-export const rootNotificationActions = [
-  markNotificationsAsRead,
-  markNotificationsAsArchived,
-];
@@ -2,24 +2,20 @@ import copy from "copy-to-clipboard";
 import { LinkIcon, RestoreIcon } from "outline-icons";
 import * as React from "react";
 import { matchPath } from "react-router-dom";
-import { toast } from "sonner";
 import stores from "~/stores";
 import { createAction } from "~/actions";
 import { RevisionSection } from "~/actions/sections";
 import history from "~/utils/history";
-import {
-  documentHistoryPath,
-  matchDocumentHistory,
-} from "~/utils/routeHelpers";
+import { documentHistoryUrl, matchDocumentHistory } from "~/utils/routeHelpers";

 export const restoreRevision = createAction({
  name: ({ t }) => t("Restore revision"),
  analyticsName: "Restore revision",
  icon: <RestoreIcon />,
  section: RevisionSection,
-  visible: ({ activeDocumentId }) =>
+  visible: ({ activeDocumentId, stores }) =>
    !!activeDocumentId && stores.policies.abilities(activeDocumentId).update,
-  perform: async ({ event, location, activeDocumentId }) => {
+  perform: async ({ t, event, location, activeDocumentId }) => {
    event?.preventDefault();
    if (!activeDocumentId) {
      return;
@@ -30,15 +26,26 @@ export const restoreRevision = createAction({
    });
    const revisionId = match?.params.revisionId;

+    const { team } = stores.auth;
    const document = stores.documents.get(activeDocumentId);
    if (!document) {
      return;
    }

-    history.push(document.url, {
-      restore: true,
-      revisionId,
-    });
+    if (team?.collaborativeEditing) {
+      history.push(document.url, {
+        restore: true,
+        revisionId,
+      });
+    } else {
+      await document.restore({
+        revisionId,
+      });
+      stores.toasts.showToast(t("Document restored"), {
+        type: "success",
+      });
+      history.push(document.url);
+    }
  },
 });

@@ -47,7 +54,7 @@ export const copyLinkToRevision = createAction({
  analyticsName: "Copy link to revision",
  icon: <LinkIcon />,
  section: RevisionSection,
-  perform: async ({ activeDocumentId, t }) => {
+  perform: async ({ activeDocumentId, stores, t }) => {
    if (!activeDocumentId) {
      return;
    }
@@ -61,7 +68,7 @@ export const copyLinkToRevision = createAction({
      return;
    }

-    const url = `${window.location.origin}${documentHistoryPath(
+    const url = `${window.location.origin}${documentHistoryUrl(
      document,
      revisionId
    )}`;
@@ -69,7 +76,9 @@ export const copyLinkToRevision = createAction({
    copy(url, {
      format: "text/plain",
      onCopy: () => {
-        toast.message(t("Link copied"));
+        stores.toasts.showToast(t("Link copied"), {
+          type: "info",
+        });
      },
    });
  },
@@ -43,9 +43,8 @@ export const changeTheme = createAction({
    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,25 +1,23 @@
-import { ArrowIcon, PlusIcon } from "outline-icons";
+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 { LoginDialog } from "~/scenes/Login/components/LoginDialog";
 import TeamNew from "~/scenes/TeamNew";
 import TeamLogo from "~/components/TeamLogo";
 import { createAction } from "~/actions";
 import { ActionContext } from "~/types";
-import Desktop from "~/utils/Desktop";
 import { TeamSection } from "../sections";

-export const 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 (
+export const createTeamsList = ({ stores }: { stores: RootStore }) => {
+  return (
+    stores.auth.availableTeams?.map((session) => ({
+      id: `switch-${session.id}`,
+      name: session.name,
+      analyticsName: "Switch workspace",
+      section: TeamSection,
+      keywords: "change switch workspace organization team",
+      icon: () => (
        <StyledTeamLogo
          alt={session.name}
          model={{
@@ -30,11 +28,13 @@ export const createTeamsList = ({ stores }: { stores: RootStore }) =>
          }}
          size={24}
        />
-      );
-    },
-    visible: ({ currentTeamId }: ActionContext) => currentTeamId !== session.id,
-    perform: () => (window.location.href = session.url),
-  })) ?? [];
+      ),
+      visible: ({ currentTeamId }: ActionContext) =>
+        currentTeamId !== session.id,
+      perform: () => (window.location.href = session.url),
+    })) ?? []
+  );
+};

 export const switchTeam = createAction({
  name: ({ t }) => t("Switch workspace"),
@@ -53,8 +53,9 @@ export const createTeam = createAction({
  keywords: "create change switch workspace organization team",
  section: TeamSection,
  icon: <PlusIcon />,
-  visible: ({ stores, currentTeamId }) =>
-    stores.policies.abilities(currentTeamId ?? "").createTeam,
+  visible: ({ stores, currentTeamId }) => {
+    return stores.policies.abilities(currentTeamId ?? "").createTeam;
+  },
  perform: ({ t, event, stores }) => {
    event?.preventDefault();
    event?.stopPropagation();
@@ -62,33 +63,14 @@ export const createTeam = createAction({
    user &&
      stores.dialogs.openModal({
        title: t("Create a workspace"),
-        fullscreen: true,
        content: <TeamNew user={user} />,
      });
  },
 });

-export const desktopLoginTeam = createAction({
-  name: ({ t }) => t("Login to workspace"),
-  analyticsName: "Login to workspace",
-  keywords: "change switch workspace organization team",
-  section: TeamSection,
-  icon: <ArrowIcon />,
-  visible: () => Desktop.isElectron(),
-  perform: ({ t, event, stores }) => {
-    event?.preventDefault();
-    event?.stopPropagation();
-
-    stores.dialogs.openModal({
-      title: t("Login to workspace"),
-      content: <LoginDialog />,
-    });
-  },
-});
-
 const StyledTeamLogo = styled(TeamLogo)`
  border-radius: 2px;
  border: 0;
 `;

-export const rootTeamActions = [switchTeam, createTeam, desktopLoginTeam];
+export const rootTeamActions = [switchTeam, createTeam];
@@ -1,14 +1,7 @@
 import { PlusIcon } from "outline-icons";
 import * as React from "react";
-import { UserRole } from "@shared/types";
-import { UserRoleHelper } from "@shared/utils/UserRoleHelper";
 import stores from "~/stores";
-import User from "~/models/User";
 import Invite from "~/scenes/Invite";
-import {
-  UserChangeRoleDialog,
-  UserDeleteDialog,
-} from "~/components/UserDialogs";
 import { createAction } from "~/actions";
 import { UserSection } from "~/actions/sections";

@@ -18,75 +11,14 @@ export const inviteUser = createAction({
  icon: <PlusIcon />,
  keywords: "team member workspace user",
  section: UserSection,
-  visible: () =>
+  visible: ({ stores }) =>
    stores.policies.abilities(stores.auth.team?.id || "").inviteUser,
  perform: ({ t }) => {
    stores.dialogs.openModal({
-      title: t("Invite to workspace"),
+      title: t("Invite people"),
      content: <Invite onSubmit={stores.dialogs.closeAllModals} />,
    });
  },
 });

-export const updateUserRoleActionFactory = (user: User, role: UserRole) =>
-  createAction({
-    name: ({ t }) =>
-      UserRoleHelper.isRoleHigher(role, user!.role)
-        ? `${t("Promote to {{ role }}", {
-            role: UserRoleHelper.displayName(role, t),
-          })}…`
-        : `${t("Demote to {{ role }}", {
-            role: UserRoleHelper.displayName(role, t),
-          })}…`,
-    analyticsName: "Update user role",
-    section: UserSection,
-    visible: () => {
-      const can = stores.policies.abilities(user.id);
-
-      return UserRoleHelper.isRoleHigher(role, user.role)
-        ? can.promote
-        : UserRoleHelper.isRoleLower(role, user.role)
-        ? can.demote
-        : false;
-    },
-    perform: ({ t }) => {
-      stores.dialogs.openModal({
-        title: t("Update role"),
-        content: (
-          <UserChangeRoleDialog
-            user={user}
-            role={role}
-            onSubmit={stores.dialogs.closeAllModals}
-          />
-        ),
-      });
-    },
-  });
-
-export const deleteUserActionFactory = (userId: string) =>
-  createAction({
-    name: ({ t }) => `${t("Delete user")}…`,
-    analyticsName: "Delete user",
-    keywords: "leave",
-    dangerous: true,
-    section: UserSection,
-    visible: () => stores.policies.abilities(userId).delete,
-    perform: ({ t }) => {
-      const user = stores.users.get(userId);
-      if (!user) {
-        return;
-      }
-
-      stores.dialogs.openModal({
-        title: t("Delete user"),
-        content: (
-          <UserDeleteDialog
-            user={user}
-            onSubmit={stores.dialogs.closeAllModals}
-          />
-        ),
-      });
-    },
-  });
-
 export const rootUserActions = [inviteUser];
@@ -1,6 +1,5 @@
-import flattenDeep from "lodash/flattenDeep";
+import { flattenDeep } from "lodash";
 import * as React from "react";
-import { toast } from "sonner";
 import { Optional } from "utility-types";
 import { v4 as uuidv4 } from "uuid";
 import {
@@ -36,7 +35,7 @@ export function createAction(definition: Optional<Action, "id">): Action {
          return definition.perform?.(context);
        }
      : undefined,
-    id: definition.id ?? uuidv4(),
+    id: uuidv4(),
  };
 }

@@ -50,7 +49,9 @@ export function actionToMenuItem(
  const title = resolve<string>(action.name, context);
  const icon =
    resolvedIcon && action.iconInContextMenu !== false
-      ? resolvedIcon
+      ? React.cloneElement(resolvedIcon, {
+          color: "currentColor",
+        })
      : undefined;

  if (resolvedChildren) {
@@ -74,7 +75,15 @@ export function actionToMenuItem(
    icon,
    visible,
    dangerous: action.dangerous,
-    onClick: () => performAction(action, context),
+    onClick: () => {
+      try {
+        action.perform?.(context);
+      } catch (err) {
+        context.stores.toasts.showToast(err.message, {
+          type: "error",
+        });
+      }
+    },
    selected: action.selected?.(context),
  };
 }
@@ -98,11 +107,6 @@ export function actionToKBar(
      )
    : [];

-  const sectionPriority =
-    typeof action.section !== "string" && "priority" in action.section
-      ? (action.section.priority as number) ?? 0
-      : 0;
-
  return [
    {
      id: action.id,
@@ -113,25 +117,8 @@ export function actionToKBar(
      keywords: action.keywords ?? "",
      shortcut: action.shortcut || [],
      icon: resolvedIcon,
-      priority: (1 + (action.priority ?? 0)) * (1 + (sectionPriority ?? 0)),
-      perform: action.perform
-        ? () => performAction(action, context)
-        : undefined,
+      perform: action.perform ? () => action.perform?.(context) : undefined,
    },
-  ].concat(
    // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
-    children.map((child) => ({ ...child, parent: child.parent ?? action.id }))
-  );
-}
-
-export async function performAction(action: Action, context: ActionContext) {
-  const result = action.perform?.(context);
-
-  if (result instanceof Promise) {
-    return result.catch((err: Error) => {
-      toast.error(err.message);
-    });
-  }
-
-  return result;
+  ].concat(children.map((child) => ({ ...child, parent: action.id })));
 }
@@ -2,7 +2,6 @@ import { rootCollectionActions } from "./definitions/collections";
 import { rootDeveloperActions } from "./definitions/developer";
 import { rootDocumentActions } from "./definitions/documents";
 import { rootNavigationActions } from "./definitions/navigation";
-import { rootNotificationActions } from "./definitions/notifications";
 import { rootRevisionActions } from "./definitions/revisions";
 import { rootSettingsActions } from "./definitions/settings";
 import { rootTeamActions } from "./definitions/teams";
@@ -13,7 +12,6 @@ export default [
  ...rootDocumentActions,
  ...rootUserActions,
  ...rootNavigationActions,
-  ...rootNotificationActions,
  ...rootRevisionActions,
  ...rootSettingsActions,
  ...rootDeveloperActions,
@@ -2,47 +2,19 @@ import { ActionContext } from "~/types";

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

-export const ActiveCollectionSection = ({ t, stores }: ActionContext) => {
-  const activeCollection = stores.collections.active;
-  return `${t("Collection")} · ${activeCollection?.name}`;
-};
-
-ActiveCollectionSection.priority = 0.8;
-
 export const DeveloperSection = ({ t }: ActionContext) => t("Debug");

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

-export const DocumentsSection = ({ t }: ActionContext) => t("Documents");
-
-export const ActiveDocumentSection = ({ t, stores }: ActionContext) => {
-  const activeDocument = stores.documents.active;
-  return `${t("Document")} · ${activeDocument?.titleWithDefault}`;
-};
-
-ActiveDocumentSection.priority = 0.9;
-
-export const RecentSection = ({ t }: ActionContext) => t("Recently viewed");
-
-RecentSection.priority = 1;
-
 export const RevisionSection = ({ t }: ActionContext) => t("Revision");

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

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

-export const NotificationSection = ({ t }: ActionContext) => t("Notification");
-
 export const UserSection = ({ t }: ActionContext) => t("People");

-UserSection.priority = 0.5;
-
 export const TeamSection = ({ t }: ActionContext) => t("Workspace");

 export const RecentSearchesSection = ({ t }: ActionContext) =>
  t("Recent searches");
-
-RecentSearchesSection.priority = -0.1;
-
-export const TrashSection = ({ t }: ActionContext) => t("Trash");
@@ -1,11 +1,8 @@
-/* eslint-disable react/prop-types */
 import * as React from "react";
 import Tooltip, { Props as TooltipProps } from "~/components/Tooltip";
-import { performAction } from "~/actions";
-import useIsMounted from "~/hooks/useIsMounted";
 import { Action, ActionContext } from "~/types";

-export type Props = React.HTMLAttributes<HTMLButtonElement> & {
+export type Props = React.ComponentPropsWithoutRef<"button"> & {
  /** Show the button in a disabled state */
  disabled?: boolean;
  /** Hide the button entirely if action is not applicable */
@@ -21,18 +18,14 @@ export type Props = React.HTMLAttributes<HTMLButtonElement> & {
 /**
 * Button that can be used to trigger an action definition.
 */
-const ActionButton = React.forwardRef<HTMLButtonElement, Props>(
-  function _ActionButton(
+const ActionButton = React.forwardRef(
+  (
    { action, context, tooltip, hideOnActionDisabled, ...rest }: Props,
    ref: React.Ref<HTMLButtonElement>
-  ) {
-    const isMounted = useIsMounted();
+  ) => {
    const [executing, setExecuting] = React.useState(false);
    const disabled = rest.disabled;

-    if (action && !context) {
-      throw new Error("Context must be provided with action");
-    }
    if (!context || !action) {
      return <button {...rest} ref={ref} />;
    }
@@ -63,12 +56,10 @@ const ActionButton = React.forwardRef<HTMLButtonElement, Props>(
            ? (ev) => {
                ev.preventDefault();
                ev.stopPropagation();
-                const response = performAction(action, actionContext);
+                const response = action.perform?.(actionContext);
                if (response?.finally) {
                  setExecuting(true);
-                  void response.finally(
-                    () => isMounted() && setExecuting(false)
-                  );
+                  response.finally(() => setExecuting(false));
                }
              }
            : rest.onClick
@@ -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,7 +29,8 @@ const Actions = styled(Flex)`
  right: 0;
  left: 0;
  border-radius: 3px;
-  background: ${s("background")};
+  background: ${(props) => props.theme.background};
+  transition: ${(props) => props.theme.backgroundTransition};
  padding: 12px;
  backdrop-filter: blur(20px);

@@ -1,19 +1,14 @@
 /* eslint-disable prefer-rest-params */
 /* global ga */
-import escape from "lodash/escape";
+import { escape } from "lodash";
 import * as React from "react";
-import { IntegrationService, PublicEnv } from "@shared/types";
+import { IntegrationService } from "@shared/types";
 import env from "~/env";

-type Props = {
-  children?: React.ReactNode;
-};
-
-// TODO: Refactor this component to allow injection from plugins
-const Analytics: React.FC = ({ children }: Props) => {
+const Analytics: React.FC = ({ children }) => {
  // Google Analytics 3
  React.useEffect(() => {
-    if (!env.GOOGLE_ANALYTICS_ID?.startsWith("UA-")) {
+    if (!env.GOOGLE_ANALYTICS_ID) {
      return;
    }

@@ -42,88 +37,29 @@ const Analytics: React.FC = ({ children }: Props) => {

  // Google Analytics 4
  React.useEffect(() => {
-    const measurementIds = [];
-
-    if (env.GOOGLE_ANALYTICS_ID?.startsWith("G-")) {
-      measurementIds.push(env.GOOGLE_ANALYTICS_ID);
-    }
-
-    (env.analytics as PublicEnv["analytics"]).forEach((integration) => {
-      if (integration.service === IntegrationService.GoogleAnalytics) {
-        measurementIds.push(escape(integration.settings?.measurementId));
-      }
-    });
-
-    if (measurementIds.length === 0) {
+    if (env.analytics.service !== IntegrationService.GoogleAnalytics) {
      return;
    }

-    const params = {
-      allow_google_signals: false,
-      restricted_data_processing: true,
-    };
+    const measurementId = escape(env.analytics.settings?.measurementId);

    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);
-    }
+    window.gtag("config", measurementId, {
+      allow_google_signals: false,
+      restricted_data_processing: true,
+    });

    const script = document.createElement("script");
    script.type = "text/javascript";
-    script.src = `https://www.googletagmanager.com/gtag/js?id=${measurementIds[0]}`;
+    script.src = `https://www.googletagmanager.com/gtag/js?id=${measurementId}`;
    script.async = true;
    document.getElementsByTagName("head")[0]?.appendChild(script);
  }, []);

-  // Matomo
-  React.useEffect(() => {
-    (env.analytics as PublicEnv["analytics"]).forEach((integration) => {
-      if (integration.service !== IntegrationService.Matomo) {
-        return;
-      }
-
-      // @ts-expect-error - Matomo global variable
-      const _paq = (window._paq = window._paq || []);
-      _paq.push(["trackPageView"]);
-      _paq.push(["enableLinkTracking"]);
-      (function () {
-        const u = integration.settings?.instanceUrl;
-        _paq.push(["setTrackerUrl", u + "matomo.php"]);
-        _paq.push(["setSiteId", integration.settings?.measurementId]);
-        const d = document,
-          g = d.createElement("script"),
-          s = d.getElementsByTagName("script")[0];
-        g.type = "text/javascript";
-        g.async = true;
-        g.src = u + "matomo.js";
-        s.parentNode?.insertBefore(g, s);
-      })();
-    });
-  }, []);
-
-  // Umami
-  React.useEffect(() => {
-    (env.analytics as PublicEnv["analytics"]).forEach((integration) => {
-      if (integration.service !== IntegrationService.Umami) {
-        return;
-      }
-
-      const script = document.createElement("script");
-      script.defer = true;
-      script.src = `${integration.settings?.instanceUrl}${integration.settings?.scriptName}`;
-      script.setAttribute(
-        "data-website-id",
-        integration.settings?.measurementId
-      );
-      document.getElementsByTagName("head")[0]?.appendChild(script);
-    });
-  }, []);
-
  return <>{children}</>;
 };

@@ -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,50 +1,50 @@
-import { RovingTabIndexProvider } from "@getoutline/react-roving-tabindex";
 import { observer } from "mobx-react";
 import * as React from "react";
+import {
+  useCompositeState,
+  Composite,
+  CompositeStateReturn,
+} from "reakit/Composite";

 type Props = React.HTMLAttributes<HTMLDivElement> & {
-  children: () => React.ReactNode;
+  children: (composite: CompositeStateReturn) => React.ReactNode;
  onEscape?: (ev: React.KeyboardEvent<HTMLDivElement>) => void;
-  items: unknown[];
 };

 function ArrowKeyNavigation(
-  { children, onEscape, items, ...rest }: Props,
+  { children, onEscape, ...rest }: Props,
  ref: React.RefObject<HTMLDivElement>
 ) {
-  const handleKeyDown = React.useCallback(
-    (ev: React.KeyboardEvent<HTMLDivElement>) => {
-      if (onEscape) {
-        if (ev.nativeEvent.isComposing) {
-          return;
-        }
+  const composite = useCompositeState();

-        if (ev.key === "Escape" || ev.key === "Backspace") {
-          ev.preventDefault();
+  const handleKeyDown = React.useCallback(
+    (ev) => {
+      if (onEscape) {
+        if (ev.key === "Escape") {
          onEscape(ev);
        }

        if (
          ev.key === "ArrowUp" &&
-          // If the first item is focused and the user presses ArrowUp
-          ev.currentTarget.firstElementChild === document.activeElement
+          composite.currentId === composite.items[0].id
        ) {
          onEscape(ev);
        }
      }
    },
-    [onEscape]
+    [composite.currentId, composite.items, onEscape]
  );

  return (
-    <RovingTabIndexProvider
-      options={{ focusOnClick: true, direction: "both" }}
-      items={items}
+    <Composite
+      {...rest}
+      {...composite}
+      onKeyDown={handleKeyDown}
+      role="menu"
+      ref={ref}
    >
-      <div {...rest} onKeyDown={handleKeyDown} ref={ref}>
-        {children()}
-      </div>
-    </RovingTabIndexProvider>
+      {children(composite)}
+    </Composite>
  );
 }

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

 type Props = {
  children: JSX.Element;
@@ -15,25 +13,26 @@ type Props = {
 const Authenticated = ({ children }: Props) => {
  const { auth } = useStores();
  const { i18n } = useTranslation();
-  const user = useCurrentUser({ rejectOnEmpty: false });
-  const language = user?.language;
+  const language = auth.user?.language;

-  // Watching for language changes here as this is the earliest point we might have the user
-  // available and means we can start loading translations faster
+  // 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;
+
+    if (!team || !user) {
+      return <LoadingIndicator />;
+    }
+
    return children;
  }

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

 export default observer(Authenticated);
@@ -1,19 +1,20 @@
 import { AnimatePresence } from "framer-motion";
-import { observer } from "mobx-react";
+import { observer, useLocalStore } from "mobx-react";
 import * as React from "react";
 import { Switch, Route, useLocation, matchPath } from "react-router-dom";
 import { TeamPreference } from "@shared/types";
 import ErrorSuspended from "~/scenes/ErrorSuspended";
+import DocumentContext from "~/components/DocumentContext";
+import type { DocumentContextValue } from "~/components/DocumentContext";
 import Layout from "~/components/Layout";
 import RegisterKeyDown from "~/components/RegisterKeyDown";
 import Sidebar from "~/components/Sidebar";
 import SidebarRight from "~/components/Sidebar/Right";
 import SettingsSidebar from "~/components/Sidebar/Settings";
-import useCurrentTeam from "~/hooks/useCurrentTeam";
+import type { Editor as TEditor } from "~/editor";
 import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
 import history from "~/utils/history";
-import lazyWithRetry from "~/utils/lazyWithRetry";
 import {
  searchPath,
  newDocumentPath,
@@ -22,32 +23,30 @@ import {
  matchDocumentSlug as slug,
  matchDocumentInsights,
 } from "~/utils/routeHelpers";
-import { DocumentContextProvider } from "./DocumentContext";
 import Fade from "./Fade";
-import { PortalContext } from "./Portal";

-const DocumentComments = lazyWithRetry(
+const DocumentComments = React.lazy(
  () => import("~/scenes/Document/components/Comments")
 );
-const DocumentHistory = lazyWithRetry(
+const DocumentHistory = React.lazy(
  () => import("~/scenes/Document/components/History")
 );
-const DocumentInsights = lazyWithRetry(
+const DocumentInsights = React.lazy(
  () => import("~/scenes/Document/components/Insights")
 );
-const CommandBar = lazyWithRetry(() => import("~/components/CommandBar"));
+const CommandBar = React.lazy(() => import("~/components/CommandBar"));

-type Props = {
-  children?: React.ReactNode;
-};
-
-const AuthenticatedLayout: React.FC = ({ children }: Props) => {
+const AuthenticatedLayout: React.FC = ({ children }) => {
  const { ui, auth } = useStores();
  const location = useLocation();
-  const layoutRef = React.useRef<HTMLDivElement>(null);
-  const can = usePolicy(ui.activeDocumentId);
-  const canCollection = usePolicy(ui.activeCollectionId);
-  const team = useCurrentTeam();
+  const can = usePolicy(ui.activeCollectionId);
+  const { user, team } = auth;
+  const documentContext = useLocalStore<DocumentContextValue>(() => ({
+    editor: null,
+    setEditor: (editor: TEditor) => {
+      documentContext.editor = editor;
+    },
+  }));

  const goToSearch = (ev: KeyboardEvent) => {
    if (!ev.metaKey && !ev.ctrlKey) {
@@ -62,7 +61,7 @@ const AuthenticatedLayout: React.FC = ({ children }: Props) => {
      return;
    }
    const { activeCollectionId } = ui;
-    if (!activeCollectionId || !canCollection.createDocument) {
+    if (!activeCollectionId || !can.update) {
      return;
    }
    history.push(newDocumentPath(activeCollectionId));
@@ -72,36 +71,31 @@ const AuthenticatedLayout: React.FC = ({ children }: Props) => {
    return <ErrorSuspended />;
  }

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

-  const showHistory =
-    !!matchPath(location.pathname, {
-      path: matchDocumentHistory,
-    }) && can.listRevisions;
-  const showInsights =
-    !!matchPath(location.pathname, {
-      path: matchDocumentInsights,
-    }) && can.listViews;
+  const showHistory = !!matchPath(location.pathname, {
+    path: matchDocumentHistory,
+  });
+  const showInsights = !!matchPath(location.pathname, {
+    path: matchDocumentInsights,
+  });
  const showComments =
    !showInsights &&
    !showHistory &&
-    can.comment &&
-    ui.activeDocumentId &&
-    ui.commentsExpanded &&
-    team.getPreference(TeamPreference.Commenting);
+    !ui.commentsCollapsed &&
+    team?.getPreference(TeamPreference.Commenting);

  const sidebarRight = (
-    <AnimatePresence
-      initial={false}
-      key={ui.activeDocumentId ? "active" : "inactive"}
-    >
+    <AnimatePresence>
      {(showHistory || showInsights || showComments) && (
        <Route path={`/doc/${slug}`}>
          <SidebarRight>
@@ -117,24 +111,15 @@ const AuthenticatedLayout: React.FC = ({ children }: Props) => {
  );

  return (
-    <DocumentContextProvider>
-      <PortalContext.Provider value={layoutRef.current}>
-        <Layout
-          title={team.name}
-          sidebar={sidebar}
-          sidebarRight={sidebarRight}
-          ref={layoutRef}
-        >
-          <RegisterKeyDown trigger="n" handler={goToNewDocument} />
-          <RegisterKeyDown trigger="t" handler={goToSearch} />
-          <RegisterKeyDown trigger="/" handler={goToSearch} />
-          {children}
-          <React.Suspense fallback={null}>
-            <CommandBar />
-          </React.Suspense>
-        </Layout>
-      </PortalContext.Provider>
-    </DocumentContextProvider>
+    <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}
+        <CommandBar />
+      </Layout>
+    </DocumentContext.Provider>
  );
 };

@@ -3,16 +3,6 @@ import styled from "styled-components";
 import useBoolean from "~/hooks/useBoolean";
 import Initials from "./Initials";

-export enum AvatarSize {
-  Small = 16,
-  Toast = 18,
-  Medium = 24,
-  Large = 28,
-  XLarge = 32,
-  XXLarge = 48,
-  Upload = 64,
-}
-
 export interface IAvatar {
  avatarUrl: string | null;
  color?: string;
@@ -21,44 +11,45 @@ export interface IAvatar {
 }

 type Props = {
-  /** The size of the avatar */
-  size: AvatarSize;
-  /** The source of the avatar image, if not passing a model. */
+  size: number;
  src?: string;
-  /** The avatar model, if not passing a source. */
+  icon?: React.ReactNode;
  model?: IAvatar;
-  /** The alt text for the image */
  alt?: string;
-  /** Optional click handler */
+  showBorder?: boolean;
  onClick?: React.MouseEventHandler<HTMLImageElement>;
-  /** Optional class name */
  className?: string;
-  /** Optional style */
  style?: React.CSSProperties;
 };

 function Avatar(props: Props) {
-  const { model, style, ...rest } = props;
+  const { icon, showBorder, model, style, ...rest } = props;
  const src = props.src || model?.avatarUrl;
  const [error, handleError] = useBoolean(false);

  return (
    <Relative style={style}>
      {src && !error ? (
-        <CircleImg onError={handleError} src={src} {...rest} />
+        <CircleImg
+          onError={handleError}
+          src={src}
+          $showBorder={showBorder}
+          {...rest}
+        />
      ) : model ? (
-        <Initials color={model.color} {...rest}>
+        <Initials color={model.color} $showBorder={showBorder} {...rest}>
          {model.initial}
        </Initials>
      ) : (
-        <Initials {...rest} />
+        <Initials $showBorder={showBorder} {...rest} />
      )}
+      {icon && <IconWrapper>{icon}</IconWrapper>}
    </Relative>
  );
 }

 Avatar.defaultProps = {
-  size: AvatarSize.Medium,
+  size: 24,
 };

 const Relative = styled.div`
@@ -67,11 +58,27 @@ const Relative = styled.div`
  flex-shrink: 0;
 `;

-const CircleImg = styled.img<{ size: number }>`
+const IconWrapper = styled.div`
+  display: flex;
+  position: absolute;
+  bottom: -2px;
+  right: -2px;
+  background: ${(props) => props.theme.accent};
+  border: 2px solid ${(props) => props.theme.background};
+  border-radius: 100%;
+  width: 20px;
+  height: 20px;
+`;
+
+const CircleImg = styled.img<{ size: number; $showBorder?: boolean }>`
  display: block;
  width: ${(props) => props.size}px;
  height: ${(props) => props.size}px;
  border-radius: 50%;
+  border: ${(props) =>
+    props.$showBorder === false
+      ? "none"
+      : `2px solid ${props.theme.background}`};
  flex-shrink: 0;
  overflow: hidden;
 `;
@@ -2,10 +2,9 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled, { css } from "styled-components";
-import { s } from "@shared/styles";
 import User from "~/models/User";
+import Avatar from "~/components/Avatar";
 import Tooltip from "~/components/Tooltip";
-import Avatar, { AvatarSize } from "./Avatar";

 type Props = {
  user: User;
@@ -14,8 +13,6 @@ type Props = {
  isObserving: boolean;
  isCurrentUser: boolean;
  onClick?: React.MouseEventHandler<HTMLImageElement>;
-  size?: AvatarSize;
-  style?: React.CSSProperties;
 };

 function AvatarWithPresence({
@@ -25,8 +22,6 @@ function AvatarWithPresence({
  isEditing,
  isObserving,
  isCurrentUser,
-  size = AvatarSize.Large,
-  style,
 }: Props) {
  const { t } = useTranslation();
  const status = isPresent
@@ -38,7 +33,7 @@ function AvatarWithPresence({
  return (
    <>
      <Tooltip
-        content={
+        tooltip={
          <Centered>
            <strong>{user.name}</strong> {isCurrentUser && `(${t("You")})`}
            {status && (
@@ -51,14 +46,13 @@ function AvatarWithPresence({
        }
        placement="bottom"
      >
-        <AvatarPresence
+        <AvatarWrapper
          $isPresent={isPresent}
          $isObserving={isObserving}
          $color={user.color}
-          style={style}
        >
-          <Avatar model={user} onClick={onClick} size={size} />
-        </AvatarPresence>
+          <Avatar model={user} onClick={onClick} size={32} />
+        </AvatarWrapper>
      </Tooltip>
    </>
  );
@@ -74,7 +68,7 @@ type AvatarWrapperProps = {
  $color: string;
 };

-const AvatarPresence = styled.div<AvatarWrapperProps>`
+const AvatarWrapper = styled.div<AvatarWrapperProps>`
  opacity: ${(props) => (props.$isPresent ? 1 : 0.5)};
  transition: opacity 250ms ease-in-out;
  border-radius: 50%;
@@ -112,7 +106,7 @@ const AvatarPresence = styled.div<AvatarWrapperProps>`

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

 const Initials = styled(Flex)<{
-  /** The color of the background, defaults to textTertiary. */
  color?: string;
-  /** Content is only used to calculate font size, use children to render. */
-  content?: string;
-  /** The size of the avatar */
  size: number;
+  $showBorder?: boolean;
 }>`
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  width: 100%;
  height: 100%;
-  color: ${s("white75")};
-  background-color: ${(props) => props.color ?? props.theme.textTertiary};
+  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;
-
-  // adjust font size down for each additional character
-  font-size: ${(props) => props.size / 2 - (props.content?.length ?? 0)}px;
+  font-size: ${(props) => props.size / 2}px;
  font-weight: 500;
 `;

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

-export { Avatar, GroupAvatar, AvatarSize, AvatarWithPresence };
+export { AvatarWithPresence };

-export type { IAvatar };
+export default Avatar;
@@ -7,11 +7,7 @@ const Badge = styled.span<{ yellow?: boolean; primary?: boolean }>`
  background-color: ${({ yellow, primary, theme }) =>
    yellow ? theme.yellow : primary ? theme.accent : "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,7 +1,7 @@
 import * as React from "react";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
-import { depths, s } from "@shared/styles";
+import { depths } from "@shared/styles";
 import env from "~/env";
 import OutlineIcon from "./Icons/OutlineIcon";

@@ -26,25 +26,24 @@ 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: ${(props) => props.theme.sidebarBackground};
  }

  ${breakpoint("tablet")`
    z-index: ${depths.sidebar + 1};
-    background: ${s("sidebarBackground")};
    position: fixed;
    bottom: 0;
-    right: 0;
+    left: 0;
    padding: 16px;
-
-    &:hover {
-      background: ${s("sidebarControlHoverBackground")};
-    }
  `};
 `;

@@ -2,22 +2,22 @@ import { GoToIcon } from "outline-icons";
 import * as React from "react";
 import { Link } from "react-router-dom";
 import styled from "styled-components";
-import { s, ellipsis } from "@shared/styles";
 import Flex from "~/components/Flex";
 import BreadcrumbMenu from "~/menus/BreadcrumbMenu";
-import { undraggableOnDesktop } from "~/styles";
 import { MenuInternalLink } from "~/types";

-type Props = React.PropsWithChildren<{
+type Props = {
  items: MenuInternalLink[];
  max?: number;
  highlightFirstItem?: boolean;
-}>;
+};

-function Breadcrumb(
-  { items, highlightFirstItem, children, max = 2 }: Props,
-  ref: React.RefObject<HTMLDivElement> | null
-) {
+function Breadcrumb({
+  items,
+  highlightFirstItem,
+  children,
+  max = 2,
+}: React.PropsWithChildren<Props>) {
  const totalItems = items.length;
  const topLevelItems: MenuInternalLink[] = [...items];
  let overflowItems;
@@ -35,13 +35,9 @@ function Breadcrumb(
  }

  return (
-    <Flex justify="flex-start" align="center" ref={ref}>
+    <Flex justify="flex-start" align="center">
      {topLevelItems.map((item, index) => (
-        <React.Fragment
-          key={
-            (typeof item.to === "string" ? item.to : item.to.pathname) || index
-          }
-        >
+        <React.Fragment key={String(item.to) || index}>
          {item.icon}
          {item.to ? (
            <Item
@@ -64,20 +60,20 @@ function Breadcrumb(

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

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

@@ -90,4 +86,4 @@ const Item = styled(Link)<{ $highlight: boolean; $withIcon: boolean }>`
  }
 `;

-export default React.forwardRef<HTMLDivElement, Props>(Breadcrumb);
+export default Breadcrumb;
@@ -1,9 +1,8 @@
 import { LocationDescriptor } from "history";
-import { DisclosureIcon } from "outline-icons";
+import { ExpandedIcon } from "outline-icons";
 import { darken, lighten, transparentize } from "polished";
 import * as React from "react";
 import styled from "styled-components";
-import { s } from "@shared/styles";
 import ActionButton, {
  Props as ActionButtonProps,
 } from "~/components/ActionButton";
@@ -14,6 +13,7 @@ type RealProps = {
  $borderOnHover?: boolean;
  $neutral?: boolean;
  $danger?: boolean;
+  $iconColor?: string;
 };

 const RealButton = styled(ActionButton)<RealProps>`
@@ -22,10 +22,10 @@ const RealButton = styled(ActionButton)<RealProps>`
  margin: 0;
  padding: 0;
  border: 0;
-  background: ${s("accent")};
-  color: ${s("accentText")};
+  background: ${(props) => props.theme.accent};
+  color: ${(props) => props.theme.accentText};
  box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px;
-  border-radius: 6px;
+  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  height: 32px;
@@ -36,6 +36,14 @@ const RealButton = styled(ActionButton)<RealProps>`
  appearance: none !important;
  ${undraggableOnDesktop()}

+  ${(props) =>
+    !props.$borderOnHover &&
+    `
+      svg {
+        fill: ${props.$iconColor || "currentColor"};
+      }
+    `}
+
  &::-moz-focus-inner {
    padding: 0;
    border: 0;
@@ -49,8 +57,8 @@ const RealButton = styled(ActionButton)<RealProps>`
  &:disabled {
    cursor: default;
    pointer-events: none;
-    color: ${(props) => transparentize(0.3, props.theme.accentText)};
-    background: ${(props) => transparentize(0.1, props.theme.accent)};
+    color: ${(props) => transparentize(0.5, props.theme.accentText)};
+    background: ${(props) => lighten(0.2, props.theme.accent)};

    svg {
      fill: ${(props) => props.theme.white50};
@@ -60,7 +68,7 @@ const RealButton = styled(ActionButton)<RealProps>`
  ${(props) =>
    props.$neutral &&
    `
-    background: inherit;
+    background: ${props.theme.buttonNeutralBackground};
    color: ${props.theme.buttonNeutralText};
    box-shadow: ${
      props.$borderOnHover
@@ -68,6 +76,15 @@ const RealButton = styled(ActionButton)<RealProps>`
        : `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: ${
@@ -105,7 +122,7 @@ const RealButton = styled(ActionButton)<RealProps>`
        background: ${lighten(0.05, props.theme.danger)};
      }

-      &:focus-visible {
+      &.focus-visible {
        outline-color: ${darken(0.2, props.theme.danger)} !important;
      }
  `};
@@ -138,6 +155,7 @@ export const Inner = styled.span<{

 export type Props<T> = ActionButtonProps & {
  icon?: React.ReactNode;
+  iconColor?: string;
  children?: React.ReactNode;
  disclosure?: boolean;
  neutral?: boolean;
@@ -165,13 +183,14 @@ const Button = <T extends React.ElementType = "button">(
    neutral,
    action,
    icon,
+    iconColor,
    borderOnHover,
    hideIcon,
    fullwidth,
    danger,
    ...rest
  } = props;
-  const hasText = !!children || value !== undefined;
+  const hasText = children !== undefined || value !== undefined;
  const ic = hideIcon ? undefined : action?.icon ?? icon;
  const hasIcon = ic !== undefined;

@@ -184,19 +203,16 @@ const Button = <T extends React.ElementType = "button">(
      $danger={danger}
      $fullwidth={fullwidth}
      $borderOnHover={borderOnHover}
+      $iconColor={iconColor}
      {...rest}
    >
      <Inner hasIcon={hasIcon} hasText={hasText} disclosure={disclosure}>
        {hasIcon && ic}
        {hasText && <Label hasIcon={hasIcon}>{children || value}</Label>}
-        {disclosure && <StyledDisclosureIcon />}
+        {disclosure && <ExpandedIcon color="currentColor" />}
      </Inner>
    </RealButton>
  );
 };

-const StyledDisclosureIcon = styled(DisclosureIcon)`
-  opacity: 0.8;
-`;
-
 export default React.forwardRef(Button);
@@ -3,8 +3,6 @@ import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";

 type Props = {
-  children?: React.ReactNode;
-  maxWidth?: string;
  withStickyHeader?: boolean;
 };

@@ -19,25 +17,21 @@ const Container = styled.div<Props>`
  `};
 `;

-type ContentProps = { $maxWidth?: string };
-
-const Content = styled.div<ContentProps>`
-  max-width: ${(props) => props.$maxWidth ?? "46em"};
+const Content = styled.div`
+  max-width: 46em;
  margin: 0 auto;

  ${breakpoint("desktopLarge")`
-    max-width: ${(props: ContentProps) => props.$maxWidth ?? "52em"};
+    max-width: 52em;
  `};
 `;

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

 export default CenteredContent;
@@ -1,17 +0,0 @@
-import * as React from "react";
-import { useTranslation } from "react-i18next";
-import { changeLanguage } from "~/utils/language";
-
-type Props = {
-  locale: string;
-};
-
-export default function ChangeLanguage({ locale }: Props) {
-  const { i18n } = useTranslation();
-
-  React.useEffect(() => {
-    void changeLanguage(locale, i18n);
-  }, [locale, i18n]);
-
-  return null;
-}
@@ -42,7 +42,7 @@ const Circle = ({
      style={{
        transition: "stroke-dashoffset 0.6s ease 0s",
      }}
-    />
+    ></circle>
  );
 };

@@ -1,9 +1,6 @@
 import styled from "styled-components";

-const ClickablePadding = styled.div<{
-  grow?: boolean;
-  minHeight?: React.CSSProperties["paddingBottom"];
-}>`
+const ClickablePadding = styled.div<{ grow?: boolean; minHeight?: string }>`
  min-height: ${(props) => props.minHeight || "50vh"};
  flex-grow: 100;
  cursor: text;
@@ -1,35 +1,26 @@
-import filter from "lodash/filter";
-import isEqual from "lodash/isEqual";
-import orderBy from "lodash/orderBy";
-import uniq from "lodash/uniq";
+import { sortBy, filter, uniq, isEqual } from "lodash";
 import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { usePopoverState, PopoverDisclosure } from "reakit/Popover";
 import Document from "~/models/Document";
-import { AvatarSize, AvatarWithPresence } from "~/components/Avatar";
+import AvatarWithPresence from "~/components/Avatar/AvatarWithPresence";
 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";

 type Props = {
-  /** The document to display live collaborators for */
  document: Document;
-  /** The maximum number of collaborators to display, defaults to 6 */
-  limit?: number;
 };

-/**
- * Displays a list of live collaborators for a document, including their avatars
- * and presence status.
- */
 function Collaborators(props: Props) {
-  const { limit = 6 } = props;
  const { t } = useTranslation();
  const user = useCurrentUser();
+  const team = useCurrentTeam();
  const currentUserId = user?.id;
  const [requestedUserIds, setRequestedUserIds] = React.useState<string[]>([]);
  const { users, presence, ui } = useStores();
@@ -47,16 +38,15 @@ function Collaborators(props: Props) {
  // ensure currently present via websocket are always ordered first
  const collaborators = React.useMemo(
    () =>
-      orderBy(
+      sortBy(
        filter(
          users.orderedData,
-          (u) =>
-            (presentIds.includes(u.id) ||
-              document.collaboratorIds.includes(u.id)) &&
-            !u.isSuspended
+          (user) =>
+            (presentIds.includes(user.id) ||
+              document.collaboratorIds.includes(user.id)) &&
+            !user.isSuspended
        ),
-        [(u) => presentIds.includes(u.id), "id"],
-        ["asc", "asc"]
+        (user) => presentIds.includes(user.id)
      ),
    [document.collaboratorIds, users.orderedData, presentIds]
  );
@@ -69,7 +59,7 @@ function Collaborators(props: Props) {

    if (!isEqual(requestedUserIds, ids) && ids.length > 0) {
      setRequestedUserIds(ids);
-      void users.fetchPage({ ids, limit: 100 });
+      users.fetchPage({ ids, limit: 100 });
    }
  }, [document, users, presentIds, document.collaboratorIds, requestedUserIds]);

@@ -78,56 +68,44 @@ function Collaborators(props: Props) {
    placement: "bottom-end",
  });

-  const renderAvatar = React.useCallback(
-    ({ model: collaborator, ...rest }) => {
-      const isPresent = presentIds.includes(collaborator.id);
-      const isEditing = editingIds.includes(collaborator.id);
-      const isObserving = ui.observingUserId === collaborator.id;
-      const isObservable = collaborator.id !== currentUserId;
-
-      return (
-        <AvatarWithPresence
-          {...rest}
-          key={collaborator.id}
-          user={collaborator}
-          isPresent={isPresent}
-          isEditing={isEditing}
-          isObserving={isObserving}
-          isCurrentUser={currentUserId === collaborator.id}
-          onClick={
-            isObservable
-              ? (ev) => {
-                  if (isPresent) {
-                    ev.preventDefault();
-                    ev.stopPropagation();
-                    ui.setObservingUser(
-                      isObserving ? undefined : collaborator.id
-                    );
-                  }
-                }
-              : undefined
-          }
-        />
-      );
-    },
-    [presentIds, ui, currentUserId, editingIds]
-  );
-
  return (
    <>
      <PopoverDisclosure {...popover}>
-        {(popoverProps) => (
-          <NudeButton
-            width={Math.min(collaborators.length, limit) * AvatarSize.Large}
-            height={AvatarSize.Large}
-            {...popoverProps}
-          >
+        {(props) => (
+          <NudeButton width={collaborators.length * 32} height={32} {...props}>
            <Facepile
-              size={AvatarSize.Large}
-              limit={limit}
-              overflow={Math.max(0, collaborators.length - limit)}
              users={collaborators}
-              renderAvatar={renderAvatar}
+              renderAvatar={(collaborator) => {
+                const isPresent = presentIds.includes(collaborator.id);
+                const isEditing = editingIds.includes(collaborator.id);
+                const isObserving = ui.observingUserId === collaborator.id;
+                const isObservable =
+                  team.collaborativeEditing && collaborator.id !== user.id;
+
+                return (
+                  <AvatarWithPresence
+                    key={collaborator.id}
+                    user={collaborator}
+                    isPresent={isPresent}
+                    isEditing={isEditing}
+                    isObserving={isObserving}
+                    isCurrentUser={currentUserId === collaborator.id}
+                    onClick={
+                      isObservable
+                        ? (ev) => {
+                            if (isPresent) {
+                              ev.preventDefault();
+                              ev.stopPropagation();
+                              ui.setObservingUser(
+                                isObserving ? undefined : collaborator.id
+                              );
+                            }
+                          }
+                        : undefined
+                    }
+                  />
+                );
+              }}
            />
          </NudeButton>
        )}
@@ -1,32 +0,0 @@
-import { observer } from "mobx-react";
-import * as React from "react";
-import { toast } from "sonner";
-import useStores from "~/hooks/useStores";
-import { CollectionForm, FormData } from "./CollectionForm";
-
-type Props = {
-  collectionId: string;
-  onSubmit: () => void;
-};
-
-export const CollectionEdit = observer(function CollectionEdit_({
-  collectionId,
-  onSubmit,
-}: Props) {
-  const { collections } = useStores();
-  const collection = collections.get(collectionId);
-
-  const handleSubmit = React.useCallback(
-    async (data: FormData) => {
-      try {
-        await collection?.save(data);
-        onSubmit?.();
-      } catch (error) {
-        toast.error(error.message);
-      }
-    },
-    [collection, onSubmit]
-  );
-
-  return <CollectionForm collection={collection} handleSubmit={handleSubmit} />;
-});
@@ -1,190 +0,0 @@
-import { observer } from "mobx-react";
-import * as React from "react";
-import { Controller, useForm } from "react-hook-form";
-import { Trans, useTranslation } from "react-i18next";
-import styled from "styled-components";
-import Icon from "@shared/components/Icon";
-import { randomElement } from "@shared/random";
-import { CollectionPermission } from "@shared/types";
-import { IconLibrary } from "@shared/utils/IconLibrary";
-import { colorPalette } from "@shared/utils/collections";
-import { CollectionValidation } from "@shared/validations";
-import Collection from "~/models/Collection";
-import Button from "~/components/Button";
-import Flex from "~/components/Flex";
-import Input from "~/components/Input";
-import InputSelectPermission from "~/components/InputSelectPermission";
-import Switch from "~/components/Switch";
-import Text from "~/components/Text";
-import useBoolean from "~/hooks/useBoolean";
-import useCurrentTeam from "~/hooks/useCurrentTeam";
-import { EmptySelectValue } from "~/types";
-
-const IconPicker = React.lazy(() => import("~/components/IconPicker"));
-
-export interface FormData {
-  name: string;
-  icon: string;
-  color: string | null;
-  sharing: boolean;
-  permission: CollectionPermission | undefined;
-}
-
-export const CollectionForm = observer(function CollectionForm_({
-  handleSubmit,
-  collection,
-}: {
-  handleSubmit: (data: FormData) => void;
-  collection?: Collection;
-}) {
-  const team = useCurrentTeam();
-  const { t } = useTranslation();
-
-  const [hasOpenedIconPicker, setHasOpenedIconPicker] = useBoolean(false);
-
-  const iconColor = React.useMemo(
-    () => collection?.color ?? randomElement(colorPalette),
-    [collection?.color]
-  );
-
-  const fallbackIcon = <Icon value="collection" color={iconColor} />;
-
-  const {
-    register,
-    handleSubmit: formHandleSubmit,
-    formState,
-    watch,
-    control,
-    setValue,
-    setFocus,
-  } = useForm<FormData>({
-    mode: "all",
-    defaultValues: {
-      name: collection?.name ?? "",
-      icon: collection?.icon,
-      sharing: collection?.sharing ?? true,
-      permission: collection?.permission,
-      color: iconColor,
-    },
-  });
-
-  const values = watch();
-
-  React.useEffect(() => {
-    // If the user hasn't picked an icon yet, go ahead and suggest one based on
-    // the name of the collection. It's the little things sometimes.
-    if (!hasOpenedIconPicker && !collection) {
-      setValue(
-        "icon",
-        IconLibrary.findIconByKeyword(values.name) ??
-          values.icon ??
-          "collection"
-      );
-    }
-  }, [collection, hasOpenedIconPicker, setValue, values.name, values.icon]);
-
-  React.useEffect(() => {
-    setTimeout(() => setFocus("name", { shouldSelect: true }), 100);
-  }, [setFocus]);
-
-  const handleIconChange = React.useCallback(
-    (icon: string, color: string | null) => {
-      if (icon !== values.icon) {
-        setFocus("name");
-      }
-
-      setValue("icon", icon);
-      setValue("color", color);
-    },
-    [setFocus, setValue, values.icon]
-  );
-
-  return (
-    <form onSubmit={formHandleSubmit(handleSubmit)}>
-      <Text as="p">
-        <Trans>
-          Collections are used to group documents and choose permissions
-        </Trans>
-        .
-      </Text>
-      <Flex gap={8}>
-        <Input
-          type="text"
-          placeholder={t("Name")}
-          {...register("name", {
-            required: true,
-            maxLength: CollectionValidation.maxNameLength,
-          })}
-          prefix={
-            <React.Suspense fallback={fallbackIcon}>
-              <StyledIconPicker
-                icon={values.icon}
-                color={values.color ?? iconColor}
-                initial={values.name[0]}
-                popoverPosition="right"
-                onOpen={setHasOpenedIconPicker}
-                onChange={handleIconChange}
-              />
-            </React.Suspense>
-          }
-          autoComplete="off"
-          autoFocus
-          flex
-        />
-      </Flex>
-
-      {/* Following controls are available in create flow, but moved elsewhere for edit */}
-      {!collection && (
-        <Controller
-          control={control}
-          name="permission"
-          render={({ field }) => (
-            <InputSelectPermission
-              ref={field.ref}
-              value={field.value}
-              onChange={(
-                value: CollectionPermission | typeof EmptySelectValue
-              ) => {
-                field.onChange(value === EmptySelectValue ? null : value);
-              }}
-              note={t(
-                "The default access for workspace members, you can share with more users or groups later."
-              )}
-            />
-          )}
-        />
-      )}
-
-      {team.sharing && (
-        <Switch
-          id="sharing"
-          label={t("Public document sharing")}
-          note={t(
-            "Allow documents within this collection to be shared publicly on the internet."
-          )}
-          {...register("sharing")}
-        />
-      )}
-
-      <Flex justify="flex-end">
-        <Button
-          type="submit"
-          disabled={formState.isSubmitting || !formState.isValid}
-        >
-          {collection
-            ? formState.isSubmitting
-              ? `${t("Saving")}…`
-              : t("Save")
-            : formState.isSubmitting
-            ? `${t("Creating")}…`
-            : t("Create")}
-        </Button>
-      </Flex>
-    </form>
-  );
-});
-
-const StyledIconPicker = styled(IconPicker)`
-  margin-left: 4px;
-  margin-right: 4px;
-`;
@@ -1,35 +0,0 @@
-import { runInAction } from "mobx";
-import { observer } from "mobx-react";
-import * as React from "react";
-import { toast } from "sonner";
-import useStores from "~/hooks/useStores";
-import history from "~/utils/history";
-import { CollectionForm, FormData } from "./CollectionForm";
-
-type Props = {
-  onSubmit: () => void;
-};
-
-export const CollectionNew = observer(function CollectionNew_({
-  onSubmit,
-}: Props) {
-  const { collections } = useStores();
-  const handleSubmit = React.useCallback(
-    async (data: FormData) => {
-      try {
-        const collection = await collections.save(data);
-        // Avoid flash of loading state for the new collection, we know it's empty.
-        runInAction(() => {
-          collection.documents = [];
-        });
-        onSubmit?.();
-        history.push(collection.path);
-      } catch (error) {
-        toast.error(error.message);
-      }
-    },
-    [collections, onSubmit]
-  );
-
-  return <CollectionForm handleSubmit={handleSubmit} />;
-});
@@ -1,45 +0,0 @@
-import { ArchiveIcon } from "outline-icons";
-import * as React from "react";
-import { useTranslation } from "react-i18next";
-import Collection from "~/models/Collection";
-import CollectionIcon from "~/components/Icons/CollectionIcon";
-import { MenuInternalLink } from "~/types";
-import { archivePath, collectionPath } from "~/utils/routeHelpers";
-import Breadcrumb from "./Breadcrumb";
-
-type Props = {
-  collection: Collection;
-};
-
-export const CollectionBreadcrumb: React.FC<Props> = ({ collection }) => {
-  const { t } = useTranslation();
-
-  const items = React.useMemo(() => {
-    const collectionNode: MenuInternalLink = {
-      type: "route",
-      title: collection.name,
-      icon: <CollectionIcon collection={collection} expanded />,
-      to: collectionPath(collection.path),
-    };
-
-    const category: MenuInternalLink | undefined = collection.isArchived
-      ? {
-          type: "route",
-          icon: <ArchiveIcon />,
-          title: t("Archive"),
-          to: archivePath(),
-        }
-      : undefined;
-
-    const output = [];
-    if (category) {
-      output.push(category);
-    }
-
-    output.push(collectionNode);
-
-    return output;
-  }, [collection, t]);
-
-  return <Breadcrumb items={items} highlightFirstItem />;
-};
@@ -2,7 +2,6 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation, Trans } from "react-i18next";
 import { useHistory } from "react-router-dom";
-import { toast } from "sonner";
 import Collection from "~/models/Collection";
 import ConfirmationDialog from "~/components/ConfirmationDialog";
 import Text from "~/components/Text";
@@ -23,14 +22,11 @@ function CollectionDeleteDialog({ collection, onSubmit }: Props) {

  const handleSubmit = async () => {
    const redirect = collection.id === ui.activeCollectionId;
-
+    await collection.delete();
+    onSubmit();
    if (redirect) {
      history.push(homePath());
    }
-
-    await collection.delete();
-    onSubmit();
-    toast.success(t("Collection deleted"));
  };

  return (
@@ -41,9 +37,9 @@ function CollectionDeleteDialog({ collection, onSubmit }: Props) {
      danger
    >
      <>
-        <Text as="p" type="secondary">
+        <Text type="secondary">
          <Trans
-            defaults="Are you sure about that? Deleting the <em>{{collectionName}}</em> collection is permanent and cannot be restored, however all published documents within will be moved to the trash."
+            defaults="Are you sure about that? Deleting the <em>{{collectionName}}</em> collection is permanent and cannot be restored, however documents within will be moved to the trash."
            values={{
              collectionName: collection.name,
            }}
@@ -53,7 +49,7 @@ function CollectionDeleteDialog({ collection, onSubmit }: Props) {
          />
        </Text>
        {team.defaultCollectionId === collection.id ? (
-          <Text as="p" type="secondary">
+          <Text type="secondary">
            <Trans
              defaults="Also, <em>{{collectionName}}</em> is being used as the start view – deleting it will reset the start view to the Home page."
              values={{
@@ -1,20 +1,18 @@
 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 { toast } from "sonner";
 import styled from "styled-components";
-import { richExtensions } from "@shared/editor/nodes";
-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 { withUIExtensions } from "~/editor/extensions";
+import NudeButton from "~/components/NudeButton";
 import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
-import Text from "./Text";
-
-const extensions = withUIExtensions(richExtensions);
+import useToasts from "~/hooks/useToasts";

 type Props = {
  collection: Collection;
@@ -22,62 +20,211 @@ type Props = {

 function CollectionDescription({ collection }: Props) {
  const { collections } = useStores();
+  const { showToast } = useToasts();
  const { t } = useTranslation();
+  const [isExpanded, setExpanded] = React.useState(false);
+  const [isEditing, setEditing] = React.useState(false);
+  const [isDirty, setDirty] = React.useState(false);
  const can = usePolicy(collection);

+  const handleStartEditing = React.useCallback(() => {
+    setEditing(true);
+  }, []);
+
+  const handleStopEditing = React.useCallback(() => {
+    setEditing(false);
+  }, []);
+
+  const handleClickDisclosure = React.useCallback(
+    (event) => {
+      event.preventDefault();
+
+      if (isExpanded && document.activeElement) {
+        // @ts-expect-error ts-migrate(2339) FIXME: Property 'blur' does not exist on type 'Element'.
+        document.activeElement.blur();
+      }
+
+      setExpanded(!isExpanded);
+    },
+    [isExpanded]
+  );
+
  const handleSave = React.useMemo(
    () =>
      debounce(async (getValue) => {
        try {
          await collection.save({
-            data: getValue(false),
+            description: getValue(),
          });
+          setDirty(false);
        } catch (err) {
-          toast.error(t("Sorry, an error occurred saving the collection"));
+          showToast(
+            t("Sorry, an error occurred saving the collection", {
+              type: "error",
+            })
+          );
          throw err;
        }
      }, 1000),
-    [collection, t]
+    [collection, showToast, t]
  );

-  const childRef = React.useRef<HTMLDivElement>(null);
-  const childOffsetHeight = childRef.current?.offsetHeight || 0;
-  const editorStyle = React.useMemo(
-    () => ({
-      padding: "0 32px",
-      margin: "0 -32px",
-      paddingBottom: `calc(50vh - ${childOffsetHeight}px)`,
-    }),
-    [childOffsetHeight]
+  const handleChange = React.useCallback(
+    (getValue) => {
+      setDirty(true);
+      handleSave(getValue);
+    },
+    [handleSave]
  );

+  React.useEffect(() => {
+    setEditing(false);
+  }, [collection.id]);
+  const placeholder = `${t("Add a description")}…`;
+  const key = isEditing || isDirty ? "draft" : collection.updatedAt;
+
  return (
-    <>
-      {collections.isSaving && <LoadingIndicator />}
-      {(collection.hasDescription || can.update) && (
-        <React.Suspense fallback={<Placeholder>Loading…</Placeholder>}>
-          <Editor
-            defaultValue={collection.data}
-            onChange={handleSave}
-            placeholder={`${t("Add a description")}…`}
-            extensions={extensions}
-            maxLength={1000}
-            canUpdate={can.update}
-            readOnly={!can.update}
-            editorStyle={editorStyle}
-            embedsDisabled
-          />
-          <div ref={childRef} />
-        </React.Suspense>
+    <MaxHeight data-editing={isEditing} data-expanded={isExpanded}>
+      <Input data-editing={isEditing} data-expanded={isExpanded}>
+        <span onClick={can.update ? handleStartEditing : undefined}>
+          {collections.isSaving && <LoadingIndicator />}
+          {collection.hasDescription || isEditing || isDirty ? (
+            <React.Suspense
+              fallback={
+                <Placeholder
+                  onClick={() => {
+                    //
+                  }}
+                >
+                  Loading…
+                </Placeholder>
+              }
+            >
+              <Editor
+                key={key}
+                defaultValue={collection.description || ""}
+                onChange={handleChange}
+                placeholder={placeholder}
+                readOnly={!isEditing}
+                autoFocus={isEditing}
+                onBlur={handleStopEditing}
+                maxLength={1000}
+                embedsDisabled
+                readOnlyWriteCheckboxes
+              />
+            </React.Suspense>
+          ) : (
+            can.update && (
+              <Placeholder
+                onClick={() => {
+                  //
+                }}
+              >
+                {placeholder}
+              </Placeholder>
+            )
+          )}
+        </span>
+      </Input>
+      {!isEditing && (
+        <Disclosure
+          onClick={handleClickDisclosure}
+          aria-label={isExpanded ? t("Collapse") : t("Expand")}
+          size={30}
+        >
+          <Arrow />
+        </Disclosure>
      )}
-    </>
+    </MaxHeight>
  );
 }

-const Placeholder = styled(Text)`
-  color: ${s("placeholder")};
+const Disclosure = styled(NudeButton)`
+  opacity: 0;
+  color: ${(props) => props.theme.divider};
+  position: absolute;
+  top: calc(25vh - 50px);
+  left: 50%;
+  z-index: 1;
+  transform: rotate(-90deg) translateX(-50%);
+  transition: opacity 100ms ease-in-out;
+
+  &:focus,
+  &:hover {
+    opacity: 1;
+  }
+
+  &:active {
+    color: ${(props) => props.theme.sidebarText};
+  }
+`;
+
+const Placeholder = styled(ButtonLink)`
+  color: ${(props) => props.theme.placeholder};
  cursor: text;
  min-height: 27px;
 `;

+const MaxHeight = styled.div`
+  position: relative;
+  max-height: 25vh;
+  overflow: hidden;
+  margin: -12px -8px -8px;
+  padding: 8px;
+
+  &[data-editing="true"],
+  &[data-expanded="true"] {
+    max-height: initial;
+    overflow: initial;
+
+    ${Disclosure} {
+      top: initial;
+      bottom: 0;
+      transform: rotate(90deg) translateX(-50%);
+    }
+  }
+
+  &:hover ${Disclosure} {
+    opacity: 1;
+  }
+`;
+
+const Input = styled.div`
+  margin: -8px;
+  padding: 8px;
+  border-radius: 8px;
+  transition: ${(props) => props.theme.backgroundTransition};
+
+  &:after {
+    content: "";
+    position: absolute;
+    top: calc(25vh - 50px);
+    left: 0;
+    right: 0;
+    height: 50px;
+    pointer-events: none;
+    background: linear-gradient(
+      180deg,
+      ${(props) => transparentize(1, props.theme.background)} 0%,
+      ${(props) => props.theme.background} 100%
+    );
+  }
+
+  &[data-editing="true"],
+  &[data-expanded="true"] {
+    &:after {
+      background: transparent;
+    }
+  }
+
+  &[data-editing="true"] {
+    background: ${(props) => props.theme.secondaryBackground};
+  }
+
+  .block-menu-trigger,
+  .heading-anchor {
+    display: none !important;
+  }
+`;
+
 export default observer(CollectionDescription);
@@ -0,0 +1,131 @@
+import { useKBar, KBarPositioner, KBarAnimator, KBarSearch } from "kbar";
+import { observer } from "mobx-react";
+import { QuestionMarkIcon } from "outline-icons";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { Portal } from "react-portal";
+import styled from "styled-components";
+import breakpoint from "styled-components-breakpoint";
+import { depths } from "@shared/styles";
+import CommandBarResults from "~/components/CommandBarResults";
+import SearchActions from "~/components/SearchActions";
+import rootActions from "~/actions/root";
+import useCommandBarActions from "~/hooks/useCommandBarActions";
+import useSettingsActions from "~/hooks/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 { ui } = useStores();
+  const settingsActions = useSettingsActions();
+  const commandBarActions = React.useMemo(
+    () => [...rootActions, settingsActions],
+    [settingsActions]
+  );
+
+  useCommandBarActions(commandBarActions);
+
+  const { rootAction } = useKBar((state) => ({
+    rootAction: state.currentRootActionId
+      ? ((state.actions[
+          state.currentRootActionId
+        ] as unknown) as CommandBarAction)
+      : undefined,
+  }));
+
+  return (
+    <>
+      <KBarPortal>
+        <Positioner>
+          <Animator>
+            <SearchActions />
+            <SearchInput
+              placeholder={`${
+                rootAction?.placeholder ||
+                rootAction?.name ||
+                t("Type a command or search")
+              }…`}
+            />
+            <CommandBarResults />
+            {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>
+    </>
+  );
+}
+
+const KBarPortal: React.FC = ({ children }) => {
+  const { showing } = useKBar((state) => ({
+    showing: state.visualState !== "hidden",
+  }));
+
+  if (!showing) {
+    return null;
+  }
+
+  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};
+`;
+
+const SearchInput = styled(KBarSearch)`
+  padding: 16px 20px;
+  width: 100%;
+  outline: none;
+  border: none;
+  background: ${(props) => props.theme.menuBackground};
+  color: ${(props) => props.theme.text};
+
+  &:disabled,
+  &::placeholder {
+    color: ${(props) => props.theme.placeholder};
+  }
+`;
+
+const Animator = styled(KBarAnimator)`
+  max-width: 600px;
+  max-height: 75vh;
+  width: 90vw;
+  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;
+  transition: max-width 0.2s ease-in-out;
+
+  ${breakpoint("desktopLarge")`
+    max-width: 740px;
+  `};
+
+  @media print {
+    display: none;
+  }
+`;
+
+export default observer(CommandBar);
@@ -1,112 +0,0 @@
-import { useKBar, KBarPositioner, KBarAnimator, KBarSearch } from "kbar";
-import { observer } from "mobx-react";
-import * as React from "react";
-import { useTranslation } from "react-i18next";
-import { Portal } from "react-portal";
-import styled from "styled-components";
-import breakpoint from "styled-components-breakpoint";
-import { depths, s } from "@shared/styles";
-import SearchActions from "~/components/SearchActions";
-import rootActions from "~/actions/root";
-import useCommandBarActions from "~/hooks/useCommandBarActions";
-import CommandBarResults from "./CommandBarResults";
-import useRecentDocumentActions from "./useRecentDocumentActions";
-import useSettingsAction from "./useSettingsAction";
-import useTemplatesAction from "./useTemplatesAction";
-
-function CommandBar() {
-  const { t } = useTranslation();
-  const recentDocumentActions = useRecentDocumentActions();
-  const settingsAction = useSettingsAction();
-  const templatesAction = useTemplatesAction();
-  const commandBarActions = React.useMemo(
-    () => [
-      ...recentDocumentActions,
-      ...rootActions,
-      templatesAction,
-      settingsAction,
-    ],
-    [recentDocumentActions, settingsAction, templatesAction]
-  );
-
-  useCommandBarActions(commandBarActions);
-
-  return (
-    <>
-      <KBarPortal>
-        <Positioner>
-          <Animator>
-            <SearchActions />
-            <SearchInput
-              defaultPlaceholder={`${t("Type a command or search")}…`}
-            />
-            <CommandBarResults />
-          </Animator>
-        </Positioner>
-      </KBarPortal>
-    </>
-  );
-}
-
-type Props = {
-  children?: React.ReactNode;
-};
-
-const KBarPortal: React.FC = ({ children }: Props) => {
-  const { showing } = useKBar((state) => ({
-    showing: state.visualState !== "hidden",
-  }));
-
-  if (!showing) {
-    return null;
-  }
-
-  return <Portal>{children}</Portal>;
-};
-
-const Positioner = styled(KBarPositioner)`
-  z-index: ${depths.commandBar};
-`;
-
-const SearchInput = styled(KBarSearch)`
-  position: relative;
-  padding: 16px 12px;
-  margin: 0 8px;
-  width: calc(100% - 16px);
-  outline: none;
-  border: none;
-  background: ${s("menuBackground")};
-  color: ${s("text")};
-
-  &:not(:last-child) {
-    border-bottom: 1px solid ${s("inputBorder")};
-  }
-
-  &:disabled,
-  &::placeholder {
-    color: ${s("placeholder")};
-    opacity: 1;
-  }
-`;
-
-const Animator = styled(KBarAnimator)`
-  max-width: 600px;
-  max-height: 75vh;
-  width: 90vw;
-  background: ${s("menuBackground")};
-  color: ${s("text")};
-  border-radius: 8px;
-  overflow: hidden;
-  box-shadow: rgb(0 0 0 / 40%) 0px 16px 60px;
-  transition: max-width 0.2s ease-in-out;
-
-  ${breakpoint("desktopLarge")`
-    max-width: 740px;
-  `};
-
-  @media print {
-    display: none;
-  }
-`;
-
-export default observer(CommandBar);
@@ -1,50 +0,0 @@
-import { useMatches, KBarResults } from "kbar";
-import * as React from "react";
-import styled from "styled-components";
-import Text from "~/components/Text";
-import CommandBarItem from "./CommandBarItem";
-
-export default function CommandBarResults() {
-  const { results, rootActionId } = useMatches();
-
-  if (results.length === 0) {
-    return null;
-  }
-
-  return (
-    <Container>
-      <KBarResults
-        items={results}
-        maxHeight={400}
-        onRender={({ item, active }) =>
-          typeof item === "string" ? (
-            <Header type="tertiary" size="xsmall" ellipsis>
-              {item}
-            </Header>
-          ) : (
-            <CommandBarItem
-              action={item}
-              active={active}
-              currentRootActionId={rootActionId}
-            />
-          )
-        }
-      />
-    </Container>
-  );
-}
-
-// Cannot style KBarResults unfortunately, so we must wrap and target the inner
-const Container = styled.div`
-  > div {
-    padding-bottom: 8px;
-  }
-`;
-
-const Header = styled(Text).attrs({ as: "h3" })`
-  letter-spacing: 0.03em;
-  margin: 0;
-  padding: 16px 0 4px 20px;
-  height: 36px;
-  cursor: default;
-`;
@@ -1,3 +0,0 @@
-import CommandBar from "./CommandBar";
-
-export default CommandBar;
@@ -1,35 +0,0 @@
-import { DocumentIcon } from "outline-icons";
-import * as React from "react";
-import Icon from "@shared/components/Icon";
-import { createAction } from "~/actions";
-import { RecentSection } from "~/actions/sections";
-import useStores from "~/hooks/useStores";
-import history from "~/utils/history";
-import { documentPath } from "~/utils/routeHelpers";
-
-const useRecentDocumentActions = (count = 6) => {
-  const { documents, ui } = useStores();
-
-  return React.useMemo(
-    () =>
-      documents.recentlyViewed
-        .filter((document) => document.id !== ui.activeDocumentId)
-        .slice(0, count)
-        .map((item) =>
-          createAction({
-            name: item.titleWithDefault,
-            analyticsName: "Recently viewed document",
-            section: RecentSection,
-            icon: item.icon ? (
-              <Icon value={item.icon} color={item.color ?? undefined} />
-            ) : (
-              <DocumentIcon />
-            ),
-            perform: () => history.push(documentPath(item)),
-          })
-        ),
-    [count, ui.activeDocumentId, documents.recentlyViewed]
-  );
-};
-
-export default useRecentDocumentActions;
@@ -1,89 +0,0 @@
-import { NewDocumentIcon, ShapesIcon } from "outline-icons";
-import * as React from "react";
-import Icon from "@shared/components/Icon";
-import { createAction } from "~/actions";
-import {
-  ActiveCollectionSection,
-  DocumentSection,
-  TeamSection,
-} from "~/actions/sections";
-import useStores from "~/hooks/useStores";
-import history from "~/utils/history";
-import { newDocumentPath } from "~/utils/routeHelpers";
-
-const useTemplatesAction = () => {
-  const { documents } = useStores();
-
-  React.useEffect(() => {
-    void documents.fetchAllTemplates();
-  }, [documents]);
-
-  const actions = React.useMemo(
-    () =>
-      documents.templatesAlphabetical.map((template) =>
-        createAction({
-          name: template.titleWithDefault,
-          analyticsName: "New document",
-          section: template.isWorkspaceTemplate
-            ? TeamSection
-            : ActiveCollectionSection,
-          icon: template.icon ? (
-            <Icon value={template.icon} color={template.color ?? undefined} />
-          ) : (
-            <NewDocumentIcon />
-          ),
-          keywords: "create",
-          visible: ({ currentTeamId, activeCollectionId, stores }) => {
-            if (activeCollectionId) {
-              return (
-                stores.policies.abilities(activeCollectionId).createDocument &&
-                (template.collectionId === activeCollectionId ||
-                  template.isWorkspaceTemplate)
-              );
-            }
-            return (
-              !!currentTeamId &&
-              stores.policies.abilities(currentTeamId).createDocument &&
-              template.isWorkspaceTemplate
-            );
-          },
-          perform: ({ activeCollectionId, sidebarContext }) =>
-            history.push(
-              newDocumentPath(template.collectionId ?? activeCollectionId, {
-                templateId: template.id,
-              }),
-              {
-                sidebarContext,
-              }
-            ),
-        })
-      ),
-    [documents.templatesAlphabetical]
-  );
-
-  const newFromTemplate = React.useMemo(
-    () =>
-      createAction({
-        id: "templates",
-        name: ({ t }) => t("New from template"),
-        placeholder: ({ t }) => t("Choose a template"),
-        section: DocumentSection,
-        icon: <ShapesIcon />,
-        visible: ({ currentTeamId, activeCollectionId, stores }) => {
-          if (activeCollectionId) {
-            return stores.policies.abilities(activeCollectionId).createDocument;
-          }
-          return (
-            !!currentTeamId &&
-            stores.policies.abilities(currentTeamId).createDocument
-          );
-        },
-        children: () => actions,
-      }),
-    [actions]
-  );
-
-  return newFromTemplate;
-};
-
-export default useTemplatesAction;
@@ -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 "~/components/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,56 +55,43 @@ 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" type="secondary">
-                    then
-                  </Text>{" "}
-                </>
-              ) : (
-                ""
-              )}
-              {sc.split("+").map((key) => (
-                <Key key={key}>{key}</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;
+  font-size: 15px;
  padding: 9px 12px;
  margin: 0 8px;
  border-radius: 4px;
@@ -116,7 +102,9 @@ const Item = styled.div<{ active?: boolean }>`
  justify-content: space-between;
  cursor: var(--pointer);

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

@@ -0,0 +1,35 @@
+import { useMatches, KBarResults } from "kbar";
+import * as React from "react";
+import styled from "styled-components";
+import CommandBarItem from "~/components/CommandBarItem";
+
+export default function CommandBarResults() {
+  const { results, rootActionId } = useMatches();
+
+  return (
+    <KBarResults
+      items={results}
+      maxHeight={400}
+      onRender={({ item, active }) =>
+        typeof item === "string" ? (
+          <Header>{item}</Header>
+        ) : (
+          <CommandBarItem
+            action={item}
+            active={active}
+            currentRootActionId={rootActionId}
+          />
+        )
+      }
+    />
+  );
+}
+
+const Header = styled.h3`
+  font-size: 13px;
+  letter-spacing: 0.04em;
+  margin: 0;
+  padding: 16px 0 4px 20px;
+  color: ${(props) => props.theme.textTertiary};
+  height: 36px;
+`;
@@ -1,11 +1,11 @@
 import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation, Trans } from "react-i18next";
-import { toast } from "sonner";
 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;
@@ -14,6 +14,7 @@ type Props = {

 function CommentDeleteDialog({ comment, onSubmit }: Props) {
  const { comments } = useStores();
+  const { showToast } = useToasts();
  const { t } = useTranslation();
  const hasChildComments = comments.inThread(comment.id).length > 1;

@@ -22,7 +23,7 @@ function CommentDeleteDialog({ comment, onSubmit }: Props) {
      await comment.delete();
      onSubmit?.();
    } catch (err) {
-      toast.error(err.message);
+      showToast(err.message, { type: "error" });
    }
  };

@@ -33,7 +34,7 @@ function CommentDeleteDialog({ comment, onSubmit }: Props) {
      savingText={`${t("Deleting")}…`}
      danger
    >
-      <Text as="p" type="secondary">
+      <Text type="secondary">
        {hasChildComments ? (
          <Trans>
            Are you sure you want to permanently delete this entire comment
@@ -1,83 +0,0 @@
-import { observer } from "mobx-react";
-import * as React from "react";
-import { Trans, useTranslation } from "react-i18next";
-import { toast } from "sonner";
-import { CollectionPermission, NavigationNode } from "@shared/types";
-import type Collection from "~/models/Collection";
-import ConfirmationDialog from "~/components/ConfirmationDialog";
-import useStores from "~/hooks/useStores";
-import { AuthorizationError } from "~/utils/errors";
-
-type Props = {
-  /** The navigation node to move, must represent a document. */
-  item: NavigationNode;
-  /** The collection to move the document to. */
-  collection: Collection;
-  /** The parent document to move the document under. */
-  parentDocumentId?: string | null;
-  /** The index to move the document to. */
-  index?: number | null;
-};
-
-function ConfirmMoveDialog({ collection, item, ...rest }: Props) {
-  const { documents, dialogs, collections } = useStores();
-  const { t } = useTranslation();
-  const prevCollection = collections.get(item.collectionId!);
-  const accessMapping: Record<Partial<CollectionPermission> | "null", string> =
-    {
-      [CollectionPermission.Admin]: t("manage access"),
-      [CollectionPermission.ReadWrite]: t("view and edit access"),
-      [CollectionPermission.Read]: t("view only access"),
-      null: t("no access"),
-    };
-
-  const handleSubmit = async () => {
-    try {
-      await documents.move({
-        documentId: item.id,
-        collectionId: collection.id,
-        ...rest,
-      });
-    } catch (err) {
-      if (err instanceof AuthorizationError) {
-        toast.error(
-          t(
-            "You do not have permission to move {{ documentName }} to the {{ collectionName }} collection",
-            {
-              documentName: item.title,
-              collectionName: collection.name,
-            }
-          )
-        );
-      } else {
-        toast.error(err.message);
-      }
-    } finally {
-      dialogs.closeAllModals();
-    }
-  };
-
-  return (
-    <ConfirmationDialog
-      onSubmit={handleSubmit}
-      submitText={t("Move document")}
-      savingText={`${t("Moving")}…`}
-    >
-      <Trans
-        defaults="Moving the document <em>{{ title }}</em> to the {{ newCollectionName }} collection will change permission for all workspace members from <em>{{ prevPermission }}</em> to <em>{{ newPermission }}</em>."
-        values={{
-          title: item.title,
-          prevCollectionName: prevCollection?.name,
-          newCollectionName: collection.name,
-          prevPermission: accessMapping[prevCollection?.permission || "null"],
-          newPermission: accessMapping[collection.permission || "null"],
-        }}
-        components={{
-          em: <strong />,
-        }}
-      />
-    </ConfirmationDialog>
-  );
-}
-
-export default observer(ConfirmMoveDialog);
@@ -1,24 +1,20 @@
 import { observer } from "mobx-react";
 import * as React from "react";
-import { useTranslation } from "react-i18next";
-import { toast } from "sonner";
 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. Return false to prevent closing. */
-  onSubmit: () => Promise<void | boolean> | void;
+  /** 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> = ({
@@ -27,48 +23,38 @@ const ConfirmationDialog: React.FC<Props> = ({
  submitText,
  savingText,
  danger,
-  disabled = false,
-}: Props) => {
+}) => {
  const [isSaving, setIsSaving] = React.useState(false);
-  const { t } = useTranslation();
  const { dialogs } = useStores();
+  const { showToast } = useToasts();

  const handleSubmit = React.useCallback(
    async (ev: React.SyntheticEvent) => {
      ev.preventDefault();
      setIsSaving(true);
      try {
-        const res = await onSubmit();
-        if (res === false) {
-          return;
-        }
+        await onSubmit();
        dialogs.closeAllModals();
      } catch (err) {
-        toast.error(err.message);
+        showToast(err.message, {
+          type: "error",
+        });
      } finally {
        setIsSaving(false);
      }
    },
-    [onSubmit, dialogs]
+    [onSubmit, dialogs, showToast]
  );

  return (
-    <form onSubmit={handleSubmit}>
-      <Flex gap={12} column>
+    <Flex column>
+      <form onSubmit={handleSubmit}>
        <Text type="secondary">{children}</Text>
-
-        <Flex justify="flex-end">
-          <Button
-            type="submit"
-            disabled={isSaving || disabled}
-            danger={danger}
-            autoFocus
-          >
-            {isSaving && savingText ? savingText : submitText ?? t("Confirm")}
-          </Button>
-        </Flex>
-      </Flex>
-    </form>
+        <Button type="submit" disabled={isSaving} danger={danger} autoFocus>
+          {isSaving && savingText ? savingText : submitText}
+        </Button>
+      </form>
+    </Flex>
  );
 };

@@ -2,7 +2,7 @@ import { observer } from "mobx-react";
 import { DisconnectedIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
-import styled from "styled-components";
+import styled, { useTheme } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import Fade from "~/components/Fade";
 import NudeButton from "~/components/NudeButton";
@@ -11,56 +11,24 @@ import useStores from "~/hooks/useStores";

 function ConnectionStatus() {
  const { ui } = useStores();
+  const theme = useTheme();
  const { t } = useTranslation();

-  const codeToMessage = {
-    1009: {
-      title: t("Document is too large"),
-      body: t(
-        "This document has reached the maximum size and can no longer be edited"
-      ),
-    },
-    4401: {
-      title: t("Authentication failed"),
-      body: t("Please try logging out and back in again"),
-    },
-    4403: {
-      title: t("Authorization failed"),
-      body: t("You may have lost access to this document, try reloading"),
-    },
-    4503: {
-      title: t("Too many users connected to document"),
-      body: t("Your edits will sync once other users leave the document"),
-    },
-  };
-
-  const message = ui.multiplayerErrorCode
-    ? codeToMessage[ui.multiplayerErrorCode as keyof typeof codeToMessage]
-    : undefined;
-
  return ui.multiplayerStatus === "connecting" ||
    ui.multiplayerStatus === "disconnected" ? (
    <Tooltip
-      content={
-        message ? (
-          <Centered>
-            <strong>{message.title}</strong>
-            <br />
-            {message.body}
-          </Centered>
-        ) : (
-          <Centered>
-            <strong>{t("Server connection lost")}</strong>
-            <br />
-            {t("Edits you make will sync once you’re online")}
-          </Centered>
-        )
+      tooltip={
+        <Centered>
+          <strong>{t("Server connection lost")}</strong>
+          <br />
+          {t("Edits you make will sync once you’re online")}
+        </Centered>
      }
      placement="bottom"
    >
      <Button>
        <Fade>
-          <DisconnectedIcon />
+          <DisconnectedIcon color={theme.sidebarText} />
        </Fade>
      </Button>
    </Tooltip>
@@ -71,7 +39,7 @@ const Button = styled(NudeButton)`
  display: none;
  position: fixed;
  bottom: 0;
-  margin: 20px;
+  margin: 24px;
  transform: translateX(-32px);

  ${breakpoint("tablet")`
@@ -1,7 +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"> & {
@@ -9,7 +8,6 @@ type Props = Omit<React.HTMLAttributes<HTMLSpanElement>, "ref" | "onChange"> & {
  readOnly?: boolean;
  onClick?: React.MouseEventHandler<HTMLDivElement>;
  onChange?: (text: string) => void;
-  onFocus?: React.FocusEventHandler<HTMLSpanElement> | undefined;
  onBlur?: React.FocusEventHandler<HTMLSpanElement> | undefined;
  onInput?: React.FormEventHandler<HTMLSpanElement> | undefined;
  onKeyDown?: React.KeyboardEventHandler<HTMLSpanElement> | undefined;
@@ -31,75 +29,63 @@ export type RefHandle = {
 * 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,
-    onFocus,
-    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,
+    ref: React.RefObject<RefHandle>
+  ) => {
+    const contentRef = React.useRef<HTMLSpanElement>(null);
+    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) {
+    React.useImperativeHandle(ref, () => ({
+      focus: () => {
+        contentRef.current?.focus();
+      },
+      focusAtStart: () => {
+        if (contentRef.current) {
+          contentRef.current.focus();
          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";
-    },
-  }));
+      },
+      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 = contentRef.current?.innerText || "";

      if (maxLength && isPrintableKeyEvent(event) && text.length >= maxLength) {
        event?.preventDefault();
@@ -108,63 +94,62 @@ 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);
+    // This is to account for being within a React.Suspense boundary, in this
+    // case the component may be rendered with display: none. React 18 may solve
+    // this in the future by delaying useEffect hooks:
+    // https://github.com/facebook/react/issues/14536#issuecomment-861980492
+    const isVisible = useOnScreen(contentRef);

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

-  React.useEffect(() => {
-    if (contentRef.current && value !== contentRef.current.textContent) {
-      setInnerValue(value);
-    }
-  }, [value, contentRef]);
+    React.useEffect(() => {
+      if (value !== contentRef.current?.innerText) {
+        setInnerValue(value);
+      }
+    }, [value, contentRef]);

-  // Ensure only plain text can be pasted into input when pasting from another
-  // rich text source. Note: If `onPaste` prop is passed then it takes
-  // priority over this behavior.
-  const handlePaste = React.useCallback(
-    (event: React.ClipboardEvent<HTMLSpanElement>) => {
-      event.preventDefault();
-      const text = event.clipboardData.getData("text/plain");
-      window.document.execCommand("insertText", false, text);
-    },
-    []
-  );
+    // Ensure only plain text can be pasted into input when pasting from another
+    // rich text source
+    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} tabIndex={-1}>
-      {children}
-      <Content
-        ref={contentRef}
-        contentEditable={!disabled && !readOnly}
-        onInput={wrappedEvent(onInput)}
-        onFocus={wrappedEvent(onFocus)}
-        onBlur={wrappedEvent(onBlur)}
-        onKeyDown={wrappedEvent(onKeyDown)}
-        onPaste={handlePaste}
-        data-placeholder={placeholder}
-        suppressContentEditableWarning
-        role="textbox"
-        {...rest}
-      >
-        {innerValue}
-      </Content>
-    </div>
-  );
-});
+    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 (
@@ -181,13 +166,13 @@ function placeCaret(element: HTMLElement, atStart: boolean) {
 }

 const Content = styled.span`
-  background: ${s("background")};
-  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;
@@ -195,8 +180,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,18 +1,14 @@
 import { LocationDescriptor } from "history";
 import { CheckmarkIcon } from "outline-icons";
-import { ellipsis, transparentize } from "polished";
 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 { s } from "@shared/styles";
-import Text from "../Text";
-import MenuIconWrapper from "./MenuIconWrapper";
+import MenuIconWrapper from "../MenuIconWrapper";

 type Props = {
-  id?: string;
-  onClick?: (event: React.MouseEvent) => void | Promise<void>;
+  onClick?: (event: React.SyntheticEvent) => void | Promise<void>;
  active?: boolean;
  selected?: boolean;
  disabled?: boolean;
@@ -23,9 +19,8 @@ type Props = {
  as?: string | React.ComponentType<any>;
  hide?: () => void;
  level?: number;
-  icon?: React.ReactNode;
+  icon?: React.ReactElement;
  children?: React.ReactNode;
-  ref?: React.LegacyRef<HTMLButtonElement> | undefined;
 };

 const MenuItem = (
@@ -42,51 +37,26 @@ const MenuItem = (
  }: Props,
  ref: React.Ref<HTMLAnchorElement>
 ) => {
-  const content = React.useCallback(
-    (props) => {
-      // 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 preventDefault = (ev: React.MouseEvent) => {
+  const handleClick = React.useCallback(
+    (ev) => {
+      if (onClick) {
        ev.preventDefault();
-        ev.stopPropagation();
-      };
+        onClick(ev);
+      }

-      const handleClick = async (ev: React.MouseEvent) => {
-        hide?.();
-
-        if (onClick) {
-          preventDefault(ev);
-          await onClick(ev);
-        }
-      };
-
-      return (
-        <MenuAnchor
-          {...props}
-          $active={active}
-          as={onClick ? "button" : as}
-          onClick={handleClick}
-          onPointerDown={preventDefault}
-          onMouseDown={preventDefault}
-          ref={mergeRefs([
-            ref,
-            props.ref as React.RefObject<HTMLAnchorElement>,
-          ])}
-        >
-          {selected !== undefined && (
-            <SelectedWrapper aria-hidden>
-              {selected ? <CheckmarkIcon /> : <Spacer />}
-            </SelectedWrapper>
-          )}
-          {icon && <MenuIconWrapper aria-hidden>{icon}</MenuIconWrapper>}
-          <Title>{children}</Title>
-        </MenuAnchor>
-      );
+      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}
@@ -94,7 +64,32 @@ const MenuItem = (
      hide={hide}
      {...rest}
    >
-      {content}
+      {(props) => (
+        <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 color="currentColor" /> : <Spacer />}
+              &nbsp;
+            </>
+          )}
+          {icon && (
+            <MenuIconWrapper>
+              {React.cloneElement(icon, { color: "currentColor" })}
+            </MenuIconWrapper>
+          )}
+          {children}
+        </MenuAnchor>
+      )}
    </BaseMenuItem>
  );
 };
@@ -105,14 +100,6 @@ const Spacer = styled.svg`
  flex-shrink: 0;
 `;

-const Title = styled.div`
-  ${ellipsis()}
-  flex-grow: 1;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-`;
-
 type MenuAnchorProps = {
  level?: number;
  disabled?: boolean;
@@ -141,6 +128,10 @@ export const MenuAnchorCSS = css<MenuAnchorProps>`
  white-space: nowrap;
  position: relative;

+  svg:not(:last-child) {
+    margin-right: 4px;
+  }
+
  svg {
    flex-shrink: 0;
    opacity: ${(props) => (props.disabled ? ".5" : 1)};
@@ -155,20 +146,15 @@ export const MenuAnchorCSS = css<MenuAnchorProps>`
  @media (hover: hover) {
    &:hover,
    &:focus,
-    &:focus-visible {
+    &.focus-visible {
      color: ${props.theme.accentText};
      background: ${props.dangerous ? props.theme.danger : props.theme.accent};
      box-shadow: none;
      cursor: var(--pointer);

      svg {
-        color: ${props.theme.accentText};
        fill: ${props.theme.accentText};
      }
-
-      ${Text} {
-        color: ${transparentize(0.5, props.theme.accentText)};
-      }
    }
  }
  `}
@@ -199,13 +185,4 @@ export const MenuAnchor = styled.a`
  ${MenuAnchorCSS}
 `;

-const SelectedWrapper = styled.span`
-  width: 24px;
-  height: 24px;
-  margin-right: 4px;
-  margin-left: -8px;
-  flex-shrink: 0;
-  color: ${s("textSecondary")};
-`;
-
 export default React.forwardRef<HTMLAnchorElement, Props>(MenuItem);
@@ -2,17 +2,17 @@ import * as React from "react";
 import { useMousePosition } from "~/hooks/useMousePosition";

 type Positions = {
-  /** Sub-menu x */
+  /* Sub-menu x */
  x: number;
-  /** Sub-menu y */
+  /* Sub-menu y */
  y: number;
-  /** Sub-menu height */
+  /* Sub-menu height */
  h: number;
-  /** Sub-menu width */
+  /* Sub-menu width */
  w: number;
-  /** Mouse x */
+  /* Mouse x */
  mouseX: number;
-  /** Mouse y */
+  /* Mouse y */
  mouseY: number;
 };

@@ -24,12 +24,8 @@ type Positions = {
 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 { 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 };

@@ -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>
@@ -9,8 +9,8 @@ import {
  MenuStateReturn,
 } from "reakit/Menu";
 import styled, { useTheme } from "styled-components";
-import MenuIconWrapper from "~/components/ContextMenu/MenuIconWrapper";
 import Flex from "~/components/Flex";
+import MenuIconWrapper from "~/components/MenuIconWrapper";
 import { actionToMenuItem } from "~/actions";
 import useActionContext from "~/hooks/useActionContext";
 import {
@@ -30,7 +30,6 @@ type Props = Omit<MenuStateReturn, "items"> & {
  actions?: (Action | MenuSeparator | MenuHeading)[];
  context?: Partial<ActionContext>;
  items?: TMenuItem[];
-  showIcons?: boolean;
 };

 const Disclosure = styled(ExpandedIcon)`
@@ -45,35 +44,36 @@ type SubMenuProps = MenuStateReturn & {
  title: React.ReactNode;
 };

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

 export function filterTemplateItems(items: TMenuItem[]): TMenuItem[] {
  return items
@@ -99,7 +99,7 @@ export function filterTemplateItems(items: TMenuItem[]): TMenuItem[] {
    });
 }

-function Template({ items, actions, context, showIcons, ...menu }: Props) {
+function Template({ items, actions, context, ...menu }: Props) {
  const ctx = useActionContext({
    isContextMenu: true,
  });
@@ -125,22 +125,20 @@ function Template({ items, actions, context, showIcons, ...menu }: Props) {
        if (
          iconIsPresentInAnyMenuItem &&
          item.type !== "separator" &&
-          item.type !== "heading" &&
-          showIcons !== false
+          item.type !== "heading"
        ) {
-          item.icon = item.icon || <MenuIconWrapper aria-hidden />;
+          item.icon = item.icon || <MenuIconWrapper />;
        }

        if (item.type === "route") {
          return (
            <MenuItem
              as={Link}
-              id={`${item.title}-${index}`}
              to={item.to}
              key={index}
              disabled={item.disabled}
              selected={item.selected}
-              icon={showIcons !== false ? item.icon : undefined}
+              icon={item.icon}
              {...menu}
            >
              {item.title}
@@ -151,14 +149,13 @@ function Template({ items, actions, context, showIcons, ...menu }: Props) {
        if (item.type === "link") {
          return (
            <MenuItem
-              id={`${item.title}-${index}`}
              href={item.href}
              key={index}
              disabled={item.disabled}
              selected={item.selected}
              level={item.level}
              target={item.href.startsWith("#") ? undefined : "_blank"}
-              icon={showIcons !== false ? item.icon : undefined}
+              icon={item.icon}
              {...menu}
            >
              {item.title}
@@ -170,13 +167,12 @@ function Template({ items, actions, context, showIcons, ...menu }: Props) {
          return (
            <MenuItem
              as="button"
-              id={`${item.title}-${index}`}
              onClick={item.onClick}
              disabled={item.disabled}
              selected={item.selected}
              dangerous={item.dangerous}
              key={index}
-              icon={showIcons !== false ? item.icon : undefined}
+              icon={item.icon}
              {...menu}
            >
              {item.title}
@@ -189,15 +185,9 @@ function Template({ items, actions, context, showIcons, ...menu }: Props) {
            <BaseMenuItem
              key={index}
              as={SubMenu}
-              id={`${item.title}-${index}`}
              templateItems={item.items}
              parentMenuState={menu}
-              title={
-                <Title
-                  title={item.title}
-                  icon={showIcons !== false ? item.icon : undefined}
-                />
-              }
+              title={<Title title={item.title} icon={item.icon} />}
              {...menu}
            />
          );
@@ -208,7 +198,7 @@ function Template({ items, actions, context, showIcons, ...menu }: Props) {
        }

        if (item.type === "heading") {
-          return <Header key={index}>{item.title}</Header>;
+          return <Header>{item.title}</Header>;
        }

        const _exhaustiveCheck: never = item;
@@ -227,7 +217,7 @@ function Title({
 }) {
  return (
    <Flex align="center">
-      {icon && <MenuIconWrapper aria-hidden>{icon}</MenuIconWrapper>}
+      {icon && <MenuIconWrapper>{icon}</MenuIconWrapper>}
      {title}
    </Flex>
  );
@@ -4,9 +4,8 @@ import { useTranslation } from "react-i18next";
 import { Menu, MenuStateReturn } from "reakit/Menu";
 import styled, { DefaultTheme } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
-import { depths, s } from "@shared/styles";
+import { depths } from "@shared/styles";
 import Scrollable from "~/components/Scrollable";
-import useEventListener from "~/hooks/useEventListener";
 import useMenuContext from "~/hooks/useMenuContext";
 import useMenuHeight from "~/hooks/useMenuHeight";
 import useMobile from "~/hooks/useMobile";
@@ -38,38 +37,31 @@ export type Placement =
  | "left-start";

 type Props = MenuStateReturn & {
-  "aria-label"?: string;
-  /** Reference to the rendered menu div element */
-  menuRef?: React.RefObject<HTMLDivElement>;
+  "aria-label": string;
  /** The parent menu state if this is a submenu. */
-  parentMenuState?: Omit<MenuStateReturn, "items">;
+  parentMenuState?: MenuStateReturn;
  /** Called when the context menu is opened. */
  onOpen?: () => void;
  /** Called when the context menu is closed. */
  onClose?: () => void;
  /** Called when the context menu is clicked. */
  onClick?: (ev: React.MouseEvent) => void;
-  /** The maximum width of the context menu. */
-  maxWidth?: number;
-  /** The minimum height of the context menu. */
-  minHeight?: number;
-  children?: React.ReactNode;
 };

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

  useUnmount(() => {
    setIsMenuOpen(false);
@@ -79,7 +71,7 @@ const ContextMenu: React.FC<Props> = ({
    if (rest.visible && !previousVisible) {
      onOpen?.();

-      if (!isSubMenu) {
+      if (!parentMenuState) {
        setIsMenuOpen(true);
      }
    }
@@ -87,7 +79,7 @@ const ContextMenu: React.FC<Props> = ({
    if (!rest.visible && previousVisible) {
      onClose?.();

-      if (!isSubMenu) {
+      if (!parentMenuState) {
        setIsMenuOpen(false);
      }
    }
@@ -98,10 +90,23 @@ const ContextMenu: React.FC<Props> = ({
    rest.visible,
    ui.sidebarCollapsed,
    setIsMenuOpen,
-    isSubMenu,
+    parentMenuState,
    t,
  ]);

+  // We must manually manage scroll lock for iOS support so that the scrollable
+  // element can be passed into body-scroll-lock. See:
+  // https://github.com/ariakit/ariakit/issues/469
+  React.useEffect(() => {
+    const scrollElement = backgroundRef.current;
+    if (rest.visible && scrollElement) {
+      disableBodyScroll(scrollElement);
+    }
+    return () => {
+      scrollElement && enableBodyScroll(scrollElement);
+    };
+  }, [rest.visible]);
+
  // Perf win – don't render anything until the menu has been opened
  if (!rest.visible && !previousVisible) {
    return null;
@@ -111,132 +116,52 @@ const ContextMenu: React.FC<Props> = ({
  // trigger and the bottom of the window
  return (
    <>
-      <Menu
-        ref={menuRef}
-        hideOnClickOutside={!isMobile}
-        preventBodyScroll={false}
-        {...rest}
-      >
-        {(props) => (
-          <InnerContextMenu
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            menuProps={props as any}
-            {...rest}
-            isSubMenu={isSubMenu}
-          >
-            {children}
-          </InnerContextMenu>
-        )}
+      <Menu hideOnClickOutside={!isMobile} preventBodyScroll={false} {...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
+          // positioning.
+          const topAnchor = props.style?.top === "0";
+          // @ts-expect-error ts-migrate(2339) FIXME: Property 'placement' does not exist on type 'Extra... Remove this comment to see the full error message
+          const rightAnchor = props.placement === "bottom-end";
+
+          return (
+            <>
+              {isMobile && (
+                <Backdrop
+                  onClick={(ev) => {
+                    ev.preventDefault();
+                    ev.stopPropagation();
+                    rest.hide?.();
+                  }}
+                />
+              )}
+              <Position {...props}>
+                <Background
+                  dir="auto"
+                  topAnchor={topAnchor}
+                  rightAnchor={rightAnchor}
+                  ref={backgroundRef}
+                  hiddenScrollbars
+                  style={
+                    maxHeight && topAnchor
+                      ? {
+                          maxHeight,
+                        }
+                      : undefined
+                  }
+                >
+                  {rest.visible || rest.animating ? children : null}
+                </Background>
+              </Position>
+            </>
+          );
+        }}
      </Menu>
    </>
  );
 };

-type InnerContextMenuProps = MenuStateReturn & {
-  isSubMenu: boolean;
-  menuProps: { style?: React.CSSProperties; placement: string };
-  children: React.ReactNode;
-  maxWidth?: number;
-  minHeight?: number;
-};
-
-/**
- * Inner context menu allows deferring expensive window measurement hooks etc
- * until the menu is actually opened.
- */
-const InnerContextMenu = (props: InnerContextMenuProps) => {
-  const { menuProps } = 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
-  // positioning.
-  const topAnchor =
-    menuProps.style?.top === "0" || menuProps.style?.position === "fixed";
-  const rightAnchor = menuProps.placement === "bottom-end";
-  const backgroundRef = React.useRef<HTMLDivElement>(null);
-  const isMobile = useMobile();
-
-  const maxHeight = useMenuHeight({
-    visible: props.visible,
-    elementRef: props.unstable_disclosureRef,
-  });
-
-  // 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 (props.visible && scrollElement && !props.isSubMenu) {
-      disableBodyScroll(scrollElement, {
-        reserveScrollBarGap: true,
-      });
-    }
-    return () => {
-      scrollElement && !props.isSubMenu && enableBodyScroll(scrollElement);
-    };
-  }, [props.isSubMenu, props.visible]);
-
-  useEventListener(
-    "animationstart",
-    (event) => {
-      if (event.target instanceof HTMLElement) {
-        const parent = event.target.parentElement;
-        if (parent) {
-          parent.style.pointerEvents = "none";
-        }
-      }
-    },
-    backgroundRef.current
-  );
-
-  useEventListener(
-    "animationend",
-    (event) => {
-      if (event.target instanceof HTMLElement) {
-        const parent = event.target.parentElement;
-        if (parent) {
-          parent.style.pointerEvents = "auto";
-        }
-      }
-    },
-    backgroundRef.current
-  );
-
-  const style =
-    topAnchor && !isMobile
-      ? {
-          maxHeight,
-        }
-      : undefined;
-
-  return (
-    <>
-      {isMobile && (
-        <Backdrop
-          onClick={(ev) => {
-            ev.preventDefault();
-            ev.stopPropagation();
-            props.hide?.();
-          }}
-        />
-      )}
-      <Position {...menuProps}>
-        <Background
-          dir="auto"
-          maxWidth={props.maxWidth}
-          minHeight={props.minHeight}
-          topAnchor={topAnchor}
-          rightAnchor={rightAnchor}
-          ref={backgroundRef}
-          hiddenScrollbars
-          style={style}
-        >
-          {props.visible || props.animating ? props.children : null}
-        </Background>
-      </Position>
-    </>
-  );
-};
-
 export default ContextMenu;

 export const Backdrop = styled.div`
@@ -246,7 +171,7 @@ export const Backdrop = styled.div`
  left: 0;
  right: 0;
  bottom: 0;
-  background: ${s("backdrop")};
+  background: ${(props) => props.theme.backdrop};
  z-index: ${depths.menu - 1};
 `;

@@ -254,16 +179,6 @@ export const Position = styled.div`
  position: absolute;
  z-index: ${depths.menu};

-  // Note: pointer events are re-enabled after the animation ends, see event listeners above
-  pointer-events: none;
-
-  &:focus-visible {
-    transition-delay: 250ms;
-    transition-property: outline-width;
-    transition-duration: 0;
-    outline: none;
-  }
-
  /*
   * overrides make mobile-first coding style challenging
   * so we explicitly define mobile breakpoint here
@@ -281,8 +196,6 @@ export const Position = styled.div`
 type BackgroundProps = {
  topAnchor?: boolean;
  rightAnchor?: boolean;
-  maxWidth?: number;
-  minHeight?: number;
  theme: DefaultTheme;
 };

@@ -290,12 +203,13 @@ 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;
  min-width: 180px;
-  min-height: ${(props) => props.minHeight || 44}px;
+  min-height: 44px;
  max-height: 75vh;
+  pointer-events: all;
  font-weight: normal;

  @media print {
@@ -307,8 +221,7 @@ export const Background = styled(Scrollable)<BackgroundProps>`
      props.topAnchor ? fadeAndSlideDown : fadeAndSlideUp} 200ms ease;
    transform-origin: ${(props: BackgroundProps) =>
      props.rightAnchor ? "75%" : "25%"} 0;
-    max-width: ${(props: BackgroundProps) => props.maxWidth ?? 276}px;
-    max-height: 100vh;
+    max-width: 276px;
    background: ${(props: BackgroundProps) => props.theme.menuBackground};
    box-shadow: ${(props: BackgroundProps) => props.theme.menuShadow};
  `};
@@ -1,6 +1,5 @@
 import copy from "copy-to-clipboard";
 import * as React from "react";
-import { mergeRefs } from "react-merge-refs";
 import env from "~/env";

 type Props = {
@@ -10,43 +9,32 @@ type Props = {
  onCopy?: () => void;
 };

-function CopyToClipboard(props: Props, ref: React.Ref<HTMLElement>) {
-  const { text, onCopy, children, ...rest } = props;
+class CopyToClipboard extends React.PureComponent<Props> {
+  onClick = (ev: React.SyntheticEvent) => {
+    const { text, onCopy, children } = this.props;
+    const elem = React.Children.only(children);

-  const onClick = React.useCallback(
-    (ev: React.MouseEvent<HTMLElement>) => {
-      const elem = React.Children.only(children);
+    copy(text, {
+      debug: env.ENVIRONMENT !== "production",
+      format: "text/plain",
+    });

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

-      onCopy?.();
+    if (elem && elem.props && typeof elem.props.onClick === "function") {
+      elem.props.onClick(ev);
+    }
+  };

-      if (elem && elem.props && typeof elem.props.onClick === "function") {
-        elem.props.onClick(ev);
-      } else {
-        ev.preventDefault();
-        ev.stopPropagation();
-      }
-    },
-    [children, onCopy, text]
-  );
+  render() {
+    const { text, onCopy, children, ...rest } = this.props;
+    const elem = React.Children.only(children);
+    if (!elem) {
+      return null;
+    }

-  const elem = React.Children.only(children);
-  if (!elem) {
-    return null;
+    return React.cloneElement(elem, { ...rest, onClick: this.onClick });
  }
-
-  return React.cloneElement(elem, {
-    ...rest,
-    ref:
-      "ref" in elem
-        ? mergeRefs([elem.ref as React.MutableRefObject<HTMLElement>, ref])
-        : ref,
-    onClick,
-  });
 }

-export default React.forwardRef(CopyToClipboard);
+export default CopyToClipboard;
@@ -1,13 +1,13 @@
 import { HomeIcon } from "outline-icons";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { toast } from "sonner";
 import { Optional } from "utility-types";
 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>
@@ -25,9 +25,10 @@ const DefaultCollectionInputSelect = ({
  const { collections } = useStores();
  const [fetching, setFetching] = useState(false);
  const [fetchError, setFetchError] = useState();
+  const { showToast } = useToasts();

  React.useEffect(() => {
-    async function fetchData() {
+    async function load() {
      if (!collections.isLoaded && !fetching && !fetchError) {
        try {
          setFetching(true);
@@ -35,8 +36,11 @@ const DefaultCollectionInputSelect = ({
            limit: 100,
          });
        } catch (error) {
-          toast.error(
-            t("Collections could not be loaded, please reload the app")
+          showToast(
+            t("Collections could not be loaded, please reload the app"),
+            {
+              type: "error",
+            }
          );
          setFetchError(error);
        } finally {
@@ -44,12 +48,12 @@ const DefaultCollectionInputSelect = ({
        }
      }
    }
-    void fetchData();
-  }, [fetchError, t, fetching, collections]);
+    load();
+  }, [showToast, fetchError, t, fetching, collections]);

  const options = React.useMemo(
    () =>
-      collections.nonPrivate.reduce(
+      collections.publicCollections.reduce(
        (acc, collection) => [
          ...acc,
          {
@@ -69,7 +73,7 @@ const DefaultCollectionInputSelect = ({
            label: (
              <Flex align="center">
                <IconWrapper>
-                  <HomeIcon />
+                  <HomeIcon color="currentColor" />
                </IconWrapper>
                {t("Home")}
              </Flex>
@@ -78,7 +82,7 @@ const DefaultCollectionInputSelect = ({
          },
        ]
      ),
-    [collections.nonPrivate, t]
+    [collections.publicCollections, t]
  );

  if (fetching) {
@@ -1,10 +1,10 @@
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { useHistory } from "react-router-dom";
-import { toast } from "sonner";
 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() {
@@ -12,7 +12,7 @@ export default function DesktopEventHandler() {
  const { t } = useTranslation();
  const history = useHistory();
  const { dialogs } = useStores();
-  const hasDisabledUpdateMessage = React.useRef(false);
+  const { showToast } = useToasts();

  React.useEffect(() => {
    Desktop.bridge?.redirect((path: string, replace = false) => {
@@ -24,18 +24,13 @@ export default function DesktopEventHandler() {
    });

    Desktop.bridge?.updateDownloaded(() => {
-      if (hasDisabledUpdateMessage.current) {
-        return;
-      }
-
-      hasDisabledUpdateMessage.current = true;
-      toast.message("An update is ready to install.", {
-        duration: Infinity,
-        dismissible: true,
+      showToast("An update is ready to install.", {
+        type: "info",
+        timeout: Infinity,
        action: {
-          label: t("Install now"),
+          text: "Install now",
          onClick: () => {
-            void Desktop.bridge?.restartAndInstall();
+            Desktop.bridge?.restartAndInstall();
          },
        },
      });
@@ -55,7 +50,7 @@ export default function DesktopEventHandler() {
        content: <KeyboardShortcuts />,
      });
    });
-  }, [t, history, dialogs]);
+  }, [t, history, dialogs, showToast]);

  return null;
 }
@@ -22,10 +22,9 @@ function Dialogs() {
        <Modal
          key={id}
          isOpen={modal.isOpen}
-          fullscreen={modal.fullscreen ?? false}
+          isCentered={modal.isCentered}
          onRequestClose={() => dialogs.closeModal(id)}
          title={modal.title}
-          style={modal.style}
        >
          {modal.content}
        </Modal>
@@ -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,19 +3,15 @@ import { ArchiveIcon, GoToIcon, ShapesIcon, TrashIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
-import Icon from "@shared/components/Icon";
 import type { NavigationNode } from "@shared/types";
 import Document from "~/models/Document";
 import Breadcrumb from "~/components/Breadcrumb";
 import CollectionIcon from "~/components/Icons/CollectionIcon";
-import { useLocationSidebarContext } from "~/hooks/useLocationSidebarContext";
-import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
 import { MenuInternalLink } from "~/types";
-import { archivePath, settingsPath, trashPath } from "~/utils/routeHelpers";
+import { collectionUrl } from "~/utils/routeHelpers";

 type Props = {
-  children?: React.ReactNode;
  document: Document;
  onlyText?: boolean;
 };
@@ -26,72 +22,66 @@ 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.template) {
+  if (document.isTemplate) {
    return {
      type: "route",
-      icon: <ShapesIcon />,
+      icon: <ShapesIcon color="currentColor" />,
      title: t("Templates"),
-      to: settingsPath("templates"),
+      to: "/templates",
    };
  }

  return null;
 }

-function DocumentBreadcrumb(
-  { document, children, onlyText }: Props,
-  ref: React.RefObject<HTMLDivElement> | null
-) {
+const DocumentBreadcrumb: React.FC<Props> = ({
+  document,
+  children,
+  onlyText,
+}) => {
  const { collections } = useStores();
  const { t } = useTranslation();
  const category = useCategory(document);
-  const sidebarContext = useLocationSidebarContext();
-  const collection = document.collectionId
-    ? collections.get(document.collectionId)
-    : undefined;
-  const can = usePolicy(collection);
-
-  React.useEffect(() => {
-    void document.loadRelations({ withoutPolicies: true });
-  }, [document]);
+  const collection = collections.get(document.collectionId);

  let collectionNode: MenuInternalLink | undefined;

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

-  const path = document.pathTo;
+  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]
+  );

  const items = React.useMemo(() => {
    const output = [];
@@ -104,25 +94,15 @@ function DocumentBreadcrumb(
      output.push(collectionNode);
    }

-    path.slice(0, -1).forEach((node: NavigationNode) => {
-      const title = node.title || t("Untitled");
+    path.forEach((node: NavigationNode) => {
      output.push({
        type: "route",
-        title: node.icon ? (
-          <>
-            <StyledIcon value={node.icon} color={node.color} /> {title}
-          </>
-        ) : (
-          title
-        ),
-        to: {
-          pathname: node.url,
-          state: { sidebarContext },
-        },
+        title: node.title,
+        to: node.url,
      });
    });
    return output;
-  }, [t, path, category, sidebarContext, collectionNode]);
+  }, [path, category, collectionNode]);

  if (!collections.isLoaded) {
    return null;
@@ -132,26 +112,18 @@ function DocumentBreadcrumb(
    return (
      <>
        {collection?.name}
-        {path.slice(0, -1).map((node: NavigationNode) => (
+        {path.map((node: NavigationNode) => (
          <React.Fragment key={node.id}>
            <SmallSlash />
-            {node.title || t("Untitled")}
+            {node.title}
          </React.Fragment>
        ))}
      </>
    );
  }

-  return (
-    <Breadcrumb items={items} ref={ref} highlightFirstItem>
-      {children}
-    </Breadcrumb>
-  );
-}
-
-const StyledIcon = styled(Icon)`
-  margin-right: 2px;
-`;
+  return <Breadcrumb items={items} children={children} highlightFirstItem />;
+};

 const SmallSlash = styled(GoToIcon)`
  width: 12px;
@@ -159,8 +131,8 @@ const SmallSlash = styled(GoToIcon)`
  vertical-align: middle;
  flex-shrink: 0;

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

-export default observer(React.forwardRef(DocumentBreadcrumb));
+export default observer(DocumentBreadcrumb);
@@ -1,26 +1,21 @@
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
-import { subDays } from "date-fns";
 import { m } from "framer-motion";
 import { observer } from "mobx-react";
-import { CloseIcon, DocumentIcon, ClockIcon, EyeIcon } from "outline-icons";
+import { CloseIcon, DocumentIcon, ClockIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import styled, { useTheme } from "styled-components";
-import Icon from "@shared/components/Icon";
-import Squircle from "@shared/components/Squircle";
-import { s, hover, ellipsis } from "@shared/styles";
-import { IconType } from "@shared/types";
-import { determineIconType } from "@shared/utils/icon";
 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 { useTextStats } from "~/hooks/useTextStats";
 import CollectionIcon from "./Icons/CollectionIcon";
+import EmojiIcon from "./Icons/EmojiIcon";
+import Squircle from "./Squircle";
 import Text from "./Text";
 import Tooltip from "./Tooltip";

@@ -40,10 +35,7 @@ function DocumentCard(props: Props) {
  const { collections } = useStores();
  const theme = useTheme();
  const { document, pin, canUpdatePin, isDraggable } = props;
-  const pinnedToHome = React.useRef(!pin?.collectionId).current;
-  const collection = document.collectionId
-    ? collections.get(document.collectionId)
-    : undefined;
+  const collection = collections.get(document.collectionId);
  const {
    attributes,
    listeners,
@@ -56,26 +48,20 @@ function DocumentCard(props: Props) {
    disabled: !isDraggable || !canUpdatePin,
  });

-  const hasEmojiInTitle = determineIconType(document.icon) === IconType.Emoji;
-
  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
  };

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

-  // If the document was updated within the last 7 days, show a timestamp instead of reading time
-  const isRecentlyUpdated =
-    new Date(document.updatedAt) > subDays(new Date(), 7);
-
  return (
    <Reorderable
      ref={setNodeRef}
@@ -119,22 +105,15 @@ function DocumentCard(props: Props) {
              <path d="M19.5 19.5H6C2.96243 19.5 0.5 17.0376 0.5 14V0.5H0.792893L19.5 19.2071V19.5Z" />
            </Fold>

-            {document.icon ? (
-              <DocumentSquircle
-                icon={document.icon}
-                color={document.color ?? undefined}
-              />
+            {document.emoji ? (
+              <Squircle color={theme.slateLight}>
+                <EmojiIcon emoji={document.emoji} size={26} />
+              </Squircle>
            ) : (
-              <Squircle
-                color={
-                  collection?.color ??
-                  (pinnedToHome ? theme.slateLight : theme.slateDark)
-                }
-              >
+              <Squircle color={collection?.color}>
                {collection?.icon &&
-                collection?.icon !== "letter" &&
                collection?.icon !== "collection" &&
-                pinnedToHome ? (
+                !pin?.collectionId ? (
                  <CollectionIcon collection={collection} color="white" />
                ) : (
                  <DocumentIcon color="white" />
@@ -143,28 +122,27 @@ function DocumentCard(props: Props) {
            )}
            <div>
              <Heading dir={document.dir}>
-                {hasEmojiInTitle
-                  ? document.titleWithDefault.replace(document.icon!, "")
+                {document.emoji
+                  ? document.titleWithDefault.replace(document.emoji, "")
                  : document.titleWithDefault}
              </Heading>
              <DocumentMeta size="xsmall">
-                {isRecentlyUpdated ? (
-                  <>
-                    <Clock size={18} />
-                    <Time dateTime={document.updatedAt} addSuffix shorten />
-                  </>
-                ) : (
-                  <ReadingTime document={document} />
-                )}
+                <Clock color="currentColor" size={18} />
+                <Time
+                  dateTime={document.updatedAt}
+                  tooltipDelay={500}
+                  addSuffix
+                  shorten
+                />
              </DocumentMeta>
            </div>
          </Content>
          {canUpdatePin && (
            <Actions dir={document.dir} gap={4}>
              {!isDragging && pin && (
-                <Tooltip content={t("Unpin")}>
+                <Tooltip tooltip={t("Unpin")}>
                  <PinButton onClick={handleUnpin} aria-label={t("Unpin")}>
-                    <CloseIcon />
+                    <CloseIcon color="currentColor" />
                  </PinButton>
                </Tooltip>
              )}
@@ -176,39 +154,6 @@ function DocumentCard(props: Props) {
  );
 }

-const ReadingTime = ({ document }: { document: Document }) => {
-  const { t } = useTranslation();
-  const markdown = React.useMemo(() => document.toMarkdown(), [document]);
-  const stats = useTextStats(markdown);
-
-  return (
-    <>
-      <EyeIcon size={18} />
-      {t(`{{ minutes }}m read`, {
-        minutes: stats.total.readingTime,
-      })}
-    </>
-  );
-};
-
-const DocumentSquircle = ({
-  icon,
-  color,
-}: {
-  icon: string;
-  color?: string;
-}) => {
-  const theme = useTheme();
-  const iconType = determineIconType(icon)!;
-  const squircleColor = iconType === IconType.SVG ? color : theme.slateLight;
-
-  return (
-    <Squircle color={squircleColor}>
-      <Icon value={icon} color={theme.white} forceColor />
-    </Squircle>
-  );
-};
-
 const Clock = styled(ClockIcon)`
  flex-shrink: 0;
 `;
@@ -219,9 +164,9 @@ const AnimatePresence = styled(m.div)`
 `;

 const Fold = styled.svg`
-  fill: ${s("background")};
-  stroke: ${s("inputBorder")};
-  background: ${s("background")};
+  fill: ${(props) => props.theme.background};
+  stroke: ${(props) => props.theme.inputBorder};
+  background: ${(props) => props.theme.background};

  position: absolute;
  top: -1px;
@@ -229,11 +174,11 @@ const Fold = styled.svg`
 `;

 const PinButton = styled(NudeButton)`
-  color: ${s("textTertiary")};
+  color: ${(props) => props.theme.textTertiary};

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

@@ -243,7 +188,7 @@ const Actions = styled(Flex)`
  right: ${(props) => (props.dir === "rtl" ? "auto" : "4px")};
  left: ${(props) => (props.dir === "rtl" ? "4px" : "auto")};
  opacity: 0;
-  color: ${s("textTertiary")};
+  color: ${(props) => props.theme.textTertiary};

  // move actions above content
  z-index: 2;
@@ -261,7 +206,7 @@ const Reorderable = styled.div<{ $isDragging: boolean }>`
  z-index: ${(props) => (props.$isDragging ? 1 : "inherit")};
  pointer-events: ${(props) => (props.$isDragging ? "none" : "inherit")};

-  &: ${hover} ${Actions} {
+  &:hover ${Actions} {
    opacity: 1;
  }
 `;
@@ -272,12 +217,14 @@ const Content = styled(Flex)`
 `;

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

 const DocumentLink = styled(Link)<{
@@ -290,9 +237,9 @@ const DocumentLink = styled(Link)<{
  height: 100%;
  border-radius: 8px;
  cursor: var(--pointer);
-  background: ${s("background")};
+  background: ${(props) => props.theme.background};
  transition: transform 50ms ease-in-out;
-  border: 1px solid ${s("inputBorder")};
+  border: 1px solid ${(props) => props.theme.inputBorder};
  border-bottom-width: 2px;
  border-right-width: 2px;

@@ -300,7 +247,7 @@ const DocumentLink = styled(Link)<{
    opacity: 0;
  }

-  &:${hover},
+  &:hover,
  &:active,
  &:focus,
  &:focus-within {
@@ -329,9 +276,9 @@ const Heading = styled.h3`
  max-height: 66px; // 3*line-height
  overflow: hidden;

-  color: ${s("text")};
-  font-family: ${s("fontFamily")};
-  font-weight: 500;
+  color: ${(props) => props.theme.text};
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 `;

 export default observer(DocumentCard);
@@ -0,0 +1,19 @@
+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,84 +0,0 @@
-import { action, computed, observable } from "mobx";
-import React, { PropsWithChildren } from "react";
-import { Heading } from "@shared/utils/ProsemirrorHelper";
-import Document from "~/models/Document";
-import { Editor } from "~/editor";
-
-class DocumentContext {
-  /** The current document */
-  document?: Document;
-
-  /** The editor instance for this document */
-  editor?: Editor;
-
-  @observable
-  isEditorInitialized: boolean = false;
-
-  @observable
-  headings: Heading[] = [];
-
-  @computed
-  get hasHeadings() {
-    return this.headings.length > 0;
-  }
-
-  @action
-  setDocument = (document: Document) => {
-    this.document = document;
-    this.updateState();
-  };
-
-  @action
-  setEditor = (editor: Editor) => {
-    this.editor = editor;
-    this.updateState();
-  };
-
-  @action
-  setEditorInitialized = (initialized: boolean) => {
-    this.isEditorInitialized = initialized;
-  };
-
-  @action
-  updateState = () => {
-    this.updateHeadings();
-    this.updateTasks();
-  };
-
-  private updateHeadings() {
-    const currHeadings = this.editor?.getHeadings() ?? [];
-    const hasChanged =
-      currHeadings.map((h) => h.level + h.title).join("") !==
-      this.headings.map((h) => h.level + h.title).join("");
-
-    if (hasChanged) {
-      this.headings = currHeadings;
-    }
-  }
-
-  private updateTasks() {
-    const tasks = this.editor?.getTasks() ?? [];
-    const total = tasks.length ?? 0;
-    const completed = tasks.filter((t) => t.completed).length ?? 0;
-    this.document?.updateTasks(total, completed);
-  }
-}
-
-const Context = React.createContext<DocumentContext | null>(null);
-
-export const useDocumentContext = () => {
-  const ctx = React.useContext(Context);
-  if (!ctx) {
-    throw new Error(
-      "useDocumentContext must be used within DocumentContextProvider"
-    );
-  }
-  return ctx;
-};
-
-export const DocumentContextProvider = ({
-  children,
-}: PropsWithChildren<unknown>) => {
-  const context = React.useMemo(() => new DocumentContext(), []);
-  return <Context.Provider value={context}>{children}</Context.Provider>;
-};
@@ -1,149 +0,0 @@
-import flatten from "lodash/flatten";
-import { observer } from "mobx-react";
-import * as React from "react";
-import { Trans, useTranslation } from "react-i18next";
-import { toast } from "sonner";
-import styled from "styled-components";
-import { NavigationNode } from "@shared/types";
-import Document from "~/models/Document";
-import { FlexContainer, Footer, StyledText } from "~/scenes/DocumentMove";
-import Button from "~/components/Button";
-import DocumentExplorer from "~/components/DocumentExplorer";
-import useCollectionTrees from "~/hooks/useCollectionTrees";
-import useStores from "~/hooks/useStores";
-import { flattenTree } from "~/utils/tree";
-import Switch from "./Switch";
-import Text from "./Text";
-
-type Props = {
-  /** The original document to duplicate */
-  document: Document;
-  onSubmit: (documents: Document[]) => void;
-};
-
-function DocumentCopy({ document, onSubmit }: Props) {
-  const { t } = useTranslation();
-  const { policies } = useStores();
-  const collectionTrees = useCollectionTrees();
-  const [publish, setPublish] = React.useState<boolean>(!!document.publishedAt);
-  const [recursive, setRecursive] = React.useState<boolean>(true);
-  const [selectedPath, selectPath] = React.useState<NavigationNode | null>(
-    null
-  );
-
-  const items = React.useMemo(() => {
-    const nodes = flatten(collectionTrees.map(flattenTree)).filter((node) =>
-      node.collectionId
-        ? policies.get(node.collectionId)?.abilities.createDocument
-        : true
-    );
-
-    if (document.isTemplate) {
-      return nodes
-        .filter((node) => node.type === "collection")
-        .map((node) => ({ ...node, children: [] }));
-    }
-    return nodes;
-  }, [policies, collectionTrees, document.isTemplate]);
-
-  const handlePublishChange = React.useCallback(
-    (ev: React.ChangeEvent<HTMLInputElement>) => {
-      setPublish(ev.target.checked);
-    },
-    []
-  );
-
-  const handleRecursiveChange = React.useCallback(
-    (ev: React.ChangeEvent<HTMLInputElement>) => {
-      setRecursive(ev.target.checked);
-    },
-    []
-  );
-
-  const copy = async () => {
-    if (!selectedPath) {
-      toast.message(t("Select a location to copy"));
-      return;
-    }
-
-    try {
-      const result = await document.duplicate({
-        publish,
-        recursive,
-        title: document.title,
-        collectionId: selectedPath.collectionId,
-        ...(selectedPath.type === "document"
-          ? { parentDocumentId: selectedPath.id }
-          : {}),
-      });
-
-      toast.success(t("Document copied"));
-      onSubmit(result);
-    } catch (err) {
-      toast.error(t("Couldn’t copy the document, try again?"));
-    }
-  };
-
-  return (
-    <FlexContainer column>
-      <DocumentExplorer
-        items={items}
-        onSubmit={copy}
-        onSelect={selectPath}
-        defaultValue={document.parentDocumentId || document.collectionId || ""}
-      />
-      <OptionsContainer>
-        {!document.isTemplate && (
-          <>
-            {document.collectionId && (
-              <Text size="small">
-                <Switch
-                  name="publish"
-                  label={t("Publish")}
-                  labelPosition="right"
-                  checked={publish}
-                  onChange={handlePublishChange}
-                />
-              </Text>
-            )}
-            {document.publishedAt && document.childDocuments.length > 0 && (
-              <Text size="small">
-                <Switch
-                  name="recursive"
-                  label={t("Include nested documents")}
-                  labelPosition="right"
-                  checked={recursive}
-                  onChange={handleRecursiveChange}
-                />
-              </Text>
-            )}
-          </>
-        )}
-      </OptionsContainer>
-      <Footer justify="space-between" align="center" gap={8}>
-        <StyledText type="secondary">
-          {selectedPath ? (
-            <Trans
-              defaults="Copy to <em>{{ location }}</em>"
-              values={{ location: selectedPath.title }}
-              components={{ em: <strong /> }}
-            />
-          ) : (
-            t("Select a location to copy")
-          )}
-        </StyledText>
-        <Button disabled={!selectedPath} onClick={copy}>
-          {t("Copy")}
-        </Button>
-      </Footer>
-    </FlexContainer>
-  );
-}
-
-const OptionsContainer = styled.div`
-  margin: 16px 0 8px 0;
-  padding-left: 24px;
-  padding-right: 24px;
-`;
-
-export default observer(DocumentCopy);
@@ -1,45 +1,41 @@
 import FuzzySearch from "fuzzy-search";
-import concat from "lodash/concat";
-import difference from "lodash/difference";
-import fill from "lodash/fill";
-import filter from "lodash/filter";
-import includes from "lodash/includes";
-import map from "lodash/map";
+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 "scroll-into-view-if-needed";
+import scrollIntoView from "smooth-scroll-into-view-if-needed";
 import styled, { useTheme } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
-import Icon from "@shared/components/Icon";
 import { NavigationNode } from "@shared/types";
-import { isModKey } from "@shared/utils/keyboard";
+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[];
-  /** Automatically expand to and select item with the given id */
-  defaultValue?: string;
 };

-function DocumentExplorer({ onSubmit, onSelect, items, defaultValue }: Props) {
+function DocumentExplorer({ onSubmit, onSelect, items }: Props) {
  const isMobile = useMobile();
  const { collections, documents } = useStores();
  const { t } = useTranslation();
@@ -47,25 +43,14 @@ function DocumentExplorer({ onSubmit, onSelect, items, defaultValue }: Props) {

  const [searchTerm, setSearchTerm] = React.useState<string>();
  const [selectedNode, selectNode] = React.useState<NavigationNode | null>(
-    () => {
-      const node =
-        defaultValue && items.find((item) => item.id === defaultValue);
-      return node || null;
-    }
+    null
  );
-  const [initialScrollOffset, setInitialScrollOffset] =
-    React.useState<number>(0);
+  const [initialScrollOffset, setInitialScrollOffset] = React.useState<number>(
+    0
+  );
+  const [nodes, setNodes] = React.useState<NavigationNode[]>([]);
  const [activeNode, setActiveNode] = React.useState<number>(0);
-  const [expandedNodes, setExpandedNodes] = React.useState<string[]>(() => {
-    if (defaultValue) {
-      const node = items.find((item) => item.id === defaultValue);
-      if (node) {
-        return ancestors(node).map((node) => node.id);
-      }
-    }
-    return [];
-  });
-
+  const [expandedNodes, setExpandedNodes] = React.useState<string[]>([]);
  const [itemRefs, setItemRefs] = React.useState<
    React.RefObject<HTMLSpanElement>[]
  >([]);
@@ -78,13 +63,11 @@ function DocumentExplorer({ onSubmit, onSelect, items, defaultValue }: Props) {
  const VERTICAL_PADDING = 6;
  const HORIZONTAL_PADDING = 24;

-  const searchIndex = React.useMemo(
-    () =>
-      new FuzzySearch(items, ["title"], {
-        caseSensitive: false,
-      }),
-    [items]
-  );
+  const searchIndex = React.useMemo(() => {
+    return new FuzzySearch(items, ["title"], {
+      caseSensitive: false,
+    });
+  }, [items]);

  React.useEffect(() => {
    if (searchTerm) {
@@ -94,6 +77,19 @@ function DocumentExplorer({ onSubmit, onSelect, items, defaultValue }: Props) {
    setActiveNode(0);
  }, [searchTerm]);

+  React.useEffect(() => {
+    let results;
+
+    if (searchTerm) {
+      results = searchIndex.search(searchTerm);
+    } else {
+      results = items.filter((item) => item.type === "collection");
+    }
+
+    setInitialScrollOffset(0);
+    setNodes(results);
+  }, [searchTerm, items, searchIndex]);
+
  React.useEffect(() => {
    setItemRefs((itemRefs) =>
      map(
@@ -107,31 +103,6 @@ function DocumentExplorer({ onSubmit, onSelect, items, defaultValue }: Props) {
    onSelect(selectedNode);
  }, [selectedNode, onSelect]);

-  React.useEffect(() => {
-    if (defaultValue && selectedNode && listRef) {
-      const index = nodes.findIndex((node) => node.id === selectedNode.id);
-      if (index > 0) {
-        setTimeout(() => listRef.current?.scrollToItem(index, "center"), 50);
-      }
-    }
-  }, []);
-
-  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) {
@@ -148,7 +119,9 @@ function DocumentExplorer({ onSubmit, onSelect, items, defaultValue }: Props) {
    setSearchTerm(ev.target.value);
  };

-  const isExpanded = (node: number) => includes(expandedNodes, nodes[node].id);
+  const isExpanded = (node: number) => {
+    return includes(expandedNodes, nodes[node].id);
+  };

  const calculateInitialScrollOffset = (itemCount: number) => {
    if (listRef.current) {
@@ -157,7 +130,7 @@ function DocumentExplorer({ onSubmit, onSelect, items, defaultValue }: Props) {
        scrollOffset: number;
      };
      const itemsHeight = itemCount * itemSize;
-      return itemsHeight < Number(height) ? 0 : scrollOffset;
+      return itemsHeight < height ? 0 : scrollOffset;
    }
    return 0;
  };
@@ -172,6 +145,7 @@ function DocumentExplorer({ onSubmit, onSelect, items, defaultValue }: Props) {
    const newNodes = filter(nodes, (node) => !includes(descendantIds, node.id));
    const scrollOffset = calculateInitialScrollOffset(newNodes.length);
    setInitialScrollOffset(scrollOffset);
+    setNodes(newNodes);
  };

  const expand = (node: number) => {
@@ -182,18 +156,9 @@ function DocumentExplorer({ onSubmit, onSelect, items, defaultValue }: Props) {
    newNodes.splice(node + 1, 0, ...descendants(nodes[node], 1));
    const scrollOffset = calculateInitialScrollOffset(newNodes.length);
    setInitialScrollOffset(scrollOffset);
+    setNodes(newNodes);
  };

-  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;
@@ -204,8 +169,9 @@ function DocumentExplorer({ onSubmit, onSelect, items, defaultValue }: Props) {
    return selectedNodeId === nodeId;
  };

-  const hasChildren = (node: number) =>
-    nodes[node].children.length > 0 || nodes[node].type === "collection";
+  const hasChildren = (node: number) => {
+    return nodes[node].children.length > 0;
+  };

  const toggleCollapse = (node: number) => {
    if (!hasChildren(node)) {
@@ -226,112 +192,107 @@ function DocumentExplorer({ onSubmit, onSelect, items, defaultValue }: Props) {
    }
  };

-  const ListItem = observer(
-    ({
-      index,
-      data,
-      style,
-    }: {
-      index: number;
-      data: NavigationNode[];
-      style: React.CSSProperties;
-    }) => {
-      const node = data[index];
-      const isCollection = node.type === "collection";
-      let renderedIcon,
-        title: string,
-        icon: string | undefined,
-        color: string | undefined,
-        path;
+  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);
-        renderedIcon = col && (
-          <CollectionIcon collection={col} expanded={isExpanded(index)} />
-        );
-        title = node.title;
+    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 {
-        const doc = documents.get(node.id);
-        icon = doc?.icon ?? node.icon ?? node.emoji;
-        color = doc?.color ?? node.color;
-        title = doc?.title ?? node.title;
-
-        if (icon) {
-          renderedIcon = <Icon value={icon} color={color} />;
-        } else if (doc?.isStarred) {
-          renderedIcon = <StarredIcon color={theme.yellow} />;
-        } else {
-          renderedIcon = <DocumentIcon color={theme.textSecondary} />;
-        }
-
-        path = ancestors(node)
-          .map((a) => a.title)
-          .join(" / ");
+        icon = <DocumentIcon />;
      }

-      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={renderedIcon}
-          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={renderedIcon}
-          title={title}
-          depth={node.depth as number}
-          hasChildren={hasChildren(index)}
-          ref={itemRefs[index]}
-        />
-      );
+      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 next = () => {
+    return Math.min(activeNode + 1, nodes.length - 1);
+  };

-  const prev = () => Math.max(activeNode - 1, 0);
+  const prev = () => {
+    return 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 {
@@ -368,21 +329,16 @@ function DocumentExplorer({ onSubmit, onSelect, items, defaultValue }: Props) {
  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}
-      />
-    );
-  });
+  >(({ style, ...rest }, ref) => (
+    <div
+      ref={ref}
+      style={{
+        ...style,
+        height: `${parseFloat(style?.height + "") + VERTICAL_PADDING * 2}px`,
+      }}
+      {...rest}
+    />
+  ));

  return (
    <Container tabIndex={-1} onKeyDown={handleKeyDown}>
@@ -416,9 +372,7 @@ function DocumentExplorer({ onSubmit, onSelect, items, defaultValue }: Props) {
          </AutoSizer>
        ) : (
          <FlexContainer>
-            <Text as="p" type="secondary">
-              {t("No results found")}.
-            </Text>
+            <Text type="secondary">{t("No results found")}.</Text>
          </FlexContainer>
        )}
      </ListContainer>
@@ -3,7 +3,6 @@ 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";
@@ -71,7 +70,9 @@ function DocumentExplorerNode(
 }

 const Title = styled(Text)`
-  ${ellipsis()}
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
  margin: 0 4px 0 4px;
  color: inherit;
 `;
@@ -98,7 +99,7 @@ export const Node = styled.span<{
  overflow: hidden;
  font-size: 16px;
  width: ${(props) => props.style.width};
-  color: ${s("text")};
+  color: ${(props) => props.theme.text};
  cursor: var(--pointer);
  padding: 12px;
  border-radius: 6px;
@@ -120,7 +121,6 @@ export const Node = styled.span<{
      color: ${props.theme.white};

      svg {
-        color: ${props.theme.white};
        fill: ${props.theme.white};
      }
    `}
@@ -1,9 +1,8 @@
 import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
-import scrollIntoView from "scroll-into-view-if-needed";
+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";
@@ -74,8 +73,10 @@ const Title = styled(Text)`
 `;

 const Path = styled(Text)<{ $selected: boolean }>`
-  ${ellipsis()}
  padding-top: 2px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
  margin: 0 4px 0 8px;
  color: ${(props) =>
    props.$selected ? props.theme.white50 : props.theme.textTertiary};
@@ -1,30 +1,28 @@
-import {
-  useFocusEffect,
-  useRovingTabIndex,
-} from "@getoutline/react-roving-tabindex";
 import { observer } from "mobx-react";
+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 EventBoundary from "@shared/components/EventBoundary";
-import Icon from "@shared/components/Icon";
-import { s, hover } from "@shared/styles";
 import Document from "~/models/Document";
 import Badge from "~/components/Badge";
+import Button from "~/components/Button";
 import DocumentMeta from "~/components/DocumentMeta";
+import EventBoundary from "~/components/EventBoundary";
 import Flex from "~/components/Flex";
 import Highlight from "~/components/Highlight";
 import NudeButton from "~/components/NudeButton";
 import StarButton, { AnimatedStar } from "~/components/Star";
 import Tooltip from "~/components/Tooltip";
 import useBoolean from "~/hooks/useBoolean";
+import useCurrentTeam from "~/hooks/useCurrentTeam";
 import useCurrentUser from "~/hooks/useCurrentUser";
-import { useLocationSidebarContext } from "~/hooks/useLocationSidebarContext";
+import usePolicy from "~/hooks/usePolicy";
 import DocumentMenu from "~/menus/DocumentMenu";
-import { documentPath } from "~/utils/routeHelpers";
-import { determineSidebarContext } from "./Sidebar/components/SidebarContext";
+import { hover } from "~/styles";
+import { newDocumentPath } from "~/utils/routeHelpers";

 type Props = {
  document: Document;
@@ -36,13 +34,14 @@ type Props = {
  showPin?: boolean;
  showDraft?: boolean;
  showTemplate?: boolean;
-};
+} & CompositeStateReturn;

 const SEARCH_RESULT_REGEX = /<b\b[^>]*>(.*?)<\/b>/gi;

 function replaceResultMarks(tag: string) {
-  // don't use SEARCH_RESULT_REGEX directly here as it causes an infinite loop
-  return tag.replace(new RegExp(SEARCH_RESULT_REGEX.source), "$1");
+  // don't use SEARCH_RESULT_REGEX here as it causes
+  // an infinite loop to trigger a regex inside it's own callback
+  return tag.replace(/<b\b[^>]*>(.*?)<\/b>/gi, "$1");
 }

 function DocumentListItem(
@@ -51,18 +50,9 @@ function DocumentListItem(
 ) {
  const { t } = useTranslation();
  const user = useCurrentUser();
-  const locationSidebarContext = useLocationSidebarContext();
+  const team = useCurrentTeam();
  const [menuOpen, handleMenuOpen, handleMenuClose] = useBoolean();

-  let itemRef: React.Ref<HTMLAnchorElement> =
-    React.useRef<HTMLAnchorElement>(null);
-  if (ref) {
-    itemRef = ref;
-  }
-
-  const { focused, ...rovingTabIndex } = useRovingTabIndex(itemRef, false);
-  useFocusEffect(focused, itemRef);
-
  const {
    document,
    showParentDocuments,
@@ -78,57 +68,51 @@ function DocumentListItem(
  const queryIsInTitle =
    !!highlight &&
    !!document.title.toLowerCase().includes(highlight.toLowerCase());
-  const canStar = !document.isArchived && !document.isTemplate;
-
-  const sidebarContext = determineSidebarContext({
-    document,
-    user,
-    currentContext: locationSidebarContext,
-  });
+  const canStar =
+    !document.isDraft && !document.isArchived && !document.isTemplate;
+  const can = usePolicy(team);
+  const canCollection = usePolicy(document.collectionId);

  return (
-    <DocumentLink
-      ref={itemRef}
+    <CompositeItem
+      as={DocumentLink}
+      ref={ref}
      dir={document.dir}
      role="menuitem"
      $isStarred={document.isStarred}
      $menuOpen={menuOpen}
      to={{
-        pathname: documentPath(document),
+        pathname: document.url,
        state: {
          title: document.titleWithDefault,
-          sidebarContext,
        },
      }}
      {...rest}
-      {...rovingTabIndex}
    >
      <Content>
        <Heading dir={document.dir}>
-          {document.icon && (
-            <>
-              <Icon value={document.icon} color={document.color ?? undefined} />
-              &nbsp;
-            </>
-          )}
          <Title
            text={document.titleWithDefault}
            highlight={highlight}
            dir={document.dir}
          />
-          {document.isBadgedNew && document.createdBy?.id !== user.id && (
+          {document.isBadgedNew && document.createdBy.id !== user.id && (
            <Badge yellow>{t("New")}</Badge>
          )}
-          {document.isDraft && showDraft && (
-            <Tooltip content={t("Only visible to you")} placement="top">
-              <Badge>{t("Draft")}</Badge>
-            </Tooltip>
-          )}
          {canStar && (
            <StarPositioner>
              <StarButton document={document} />
            </StarPositioner>
          )}
+          {document.isDraft && showDraft && (
+            <Tooltip
+              tooltip={t("Only visible to you")}
+              delay={500}
+              placement="top"
+            >
+              <Badge>{t("Draft")}</Badge>
+            </Tooltip>
+          )}
          {document.isTemplate && showTemplate && (
            <Badge primary>{t("Template")}</Badge>
          )}
@@ -150,6 +134,25 @@ function DocumentListItem(
        />
      </Content>
      <Actions>
+        {document.isTemplate &&
+          !document.isArchived &&
+          !document.isDeleted &&
+          can.createDocument &&
+          canCollection.update && (
+            <>
+              <Button
+                as={Link}
+                to={newDocumentPath(document.collectionId, {
+                  templateId: document.id,
+                })}
+                icon={<PlusIcon />}
+                neutral
+              >
+                {t("New doc")}
+              </Button>
+              &nbsp;
+            </>
+          )}
        <DocumentMenu
          document={document}
          showPin={showPin}
@@ -158,7 +161,7 @@ function DocumentListItem(
          modal={false}
        />
      </Actions>
-    </DocumentLink>
+    </CompositeItem>
  );
 }

@@ -174,11 +177,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};
    }
  }

@@ -220,7 +223,7 @@ const DocumentLink = styled(Link)<{
  &:active,
  &:focus,
  &:focus-within {
-    background: ${s("listItemHoverBackground")};
+    background: ${(props) => props.theme.listItemHoverBackground};

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

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

      ${Actions} {
        opacity: 1;
@@ -254,12 +257,14 @@ 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")};
-  font-family: ${s("fontFamily")};
-  font-weight: 500;
+  color: ${(props) => props.theme.text};
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 `;

 const StarPositioner = styled(Flex)`
@@ -275,12 +280,10 @@ const Title = styled(Highlight)`

 const ResultContext = styled(Highlight)`
  display: block;
-  color: ${s("textSecondary")};
-  font-size: 15px;
+  color: ${(props) => props.theme.textTertiary};
+  font-size: 14px;
  margin-top: -0.25em;
  margin-bottom: 0.25em;
-  max-height: 90px;
-  overflow: hidden;
 `;

 export default observer(React.forwardRef(DocumentListItem));
@@ -4,9 +4,7 @@ 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";
@@ -15,13 +13,11 @@ import useCurrentUser from "~/hooks/useCurrentUser";
 import useStores from "~/hooks/useStores";

 type Props = {
-  children?: React.ReactNode;
  showCollection?: boolean;
  showPublished?: boolean;
  showLastViewed?: boolean;
  showParentDocuments?: boolean;
  document: Document;
-  revision?: Revision;
  replace?: boolean;
  to?: LocationDescriptor;
 };
@@ -32,12 +28,11 @@ const DocumentMeta: React.FC<Props> = ({
  showLastViewed,
  showParentDocuments,
  document,
-  revision,
  children,
  replace,
  to,
  ...rest
-}: Props) => {
+}) => {
  const { t } = useTranslation();
  const { collections } = useStores();
  const user = useCurrentUser();
@@ -61,23 +56,12 @@ 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) {
-    content = (
-      <span>
-        {revision.createdBy?.id === user.id
-          ? t("You updated")
-          : t("{{ userName }} updated", { userName })}{" "}
-        <Time dateTime={revision.createdAt} addSuffix />
-      </span>
-    );
-  } else if (deletedAt) {
+  if (deletedAt) {
    content = (
      <span>
        {lastUpdatedByCurrentUser
@@ -95,21 +79,6 @@ const DocumentMeta: React.FC<Props> = ({
        <Time dateTime={archivedAt} addSuffix />
      </span>
    );
-  } else if (
-    document.sourceMetadata &&
-    document.sourceMetadata?.importedAt &&
-    document.sourceMetadata.importedAt >= updatedAt
-  ) {
-    content = (
-      <span>
-        {document.sourceMetadata.createdByName
-          ? t("{{ userName }} updated", {
-              userName: document.sourceMetadata.createdByName,
-            })
-          : t("Imported")}{" "}
-        <Time dateTime={createdAt} addSuffix />
-      </span>
-    );
  } else if (createdAt === updatedAt) {
    content = (
      <span>
@@ -128,6 +97,15 @@ const DocumentMeta: React.FC<Props> = ({
        <Time dateTime={publishedAt} addSuffix />
      </span>
    );
+  } else if (isDraft) {
+    content = (
+      <span>
+        {lastUpdatedByCurrentUser
+          ? t("You saved")
+          : t("{{ userName }} saved", { userName })}{" "}
+        <Time dateTime={updatedAt} addSuffix />
+      </span>
+    );
  } else {
    content = (
      <Modified highlight={modifiedSinceViewed && !lastUpdatedByCurrentUser}>
@@ -140,7 +118,7 @@ const DocumentMeta: React.FC<Props> = ({
  }

  const nestedDocumentsCount = collection
-    ? collection.getChildrenForDocument(document.id).length
+    ? collection.getDocumentChildren(document.id).length
    : 0;
  const canShowProgressBar = isTasks && !isTemplate;

@@ -168,13 +146,7 @@ const DocumentMeta: React.FC<Props> = ({
  };

  return (
-    <Container
-      align="center"
-      rtl={document.dir === "rtl"}
-      {...rest}
-      dir="ltr"
-      lang=""
-    >
+    <Container align="center" rtl={document.dir === "rtl"} {...rest} dir="ltr">
      {to ? (
        <Link to={to} replace={replace}>
          {content}
@@ -185,9 +157,9 @@ const DocumentMeta: React.FC<Props> = ({
      {showCollection && collection && (
        <span>
          &nbsp;{t("in")}&nbsp;
-          <Strong>
+          <strong>
            <DocumentBreadcrumb document={document} onlyText />
-          </Strong>
+          </strong>
        </span>
      )}
      {showParentDocuments && nestedDocumentsCount > 0 && (
@@ -210,13 +182,9 @@ const DocumentMeta: React.FC<Props> = ({
  );
 };

-const Strong = styled.strong`
-  font-weight: 550;
-`;
-
 const Container = styled(Flex)<{ rtl?: boolean }>`
  justify-content: ${(props) => (props.rtl ? "flex-end" : "flex-start")};
-  color: ${s("textTertiary")};
+  color: ${(props) => props.theme.textTertiary};
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
@@ -224,7 +192,8 @@ const Container = styled(Flex)<{ rtl?: boolean }>`
 `;

 const Viewed = styled.span`
-  ${ellipsis()}
+  text-overflow: ellipsis;
+  overflow: hidden;
 `;

 const Modified = styled.span<{ highlight?: boolean }>`
@@ -0,0 +1,52 @@
+import invariant from "invariant";
+import { observer } from "mobx-react";
+import * as React from "react";
+import { useTranslation, Trans } from "react-i18next";
+import { useHistory } from "react-router-dom";
+import ConfirmationDialog from "~/components/ConfirmationDialog";
+import useStores from "~/hooks/useStores";
+import useToasts from "~/hooks/useToasts";
+import { documentUrl } from "~/utils/routeHelpers";
+
+type Props = {
+  documentId: string;
+};
+
+function DocumentTemplatizeDialog({ documentId }: Props) {
+  const history = useHistory();
+  const { showToast } = useToasts();
+  const { t } = useTranslation();
+  const { documents } = useStores();
+  const document = documents.get(documentId);
+  invariant(document, "Document must exist");
+
+  const handleSubmit = React.useCallback(async () => {
+    const template = await document?.templatize();
+    if (template) {
+      history.push(documentUrl(template));
+      showToast(t("Template created, go ahead and customize it"), {
+        type: "info",
+      });
+    }
+  }, [document, showToast, history, t]);
+
+  return (
+    <ConfirmationDialog
+      onSubmit={handleSubmit}
+      submitText={t("Create template")}
+      savingText={`${t("Creating")}…`}
+    >
+      <Trans
+        defaults="Creating a template from <em>{{titleWithDefault}}</em> is a non-destructive action – we'll make a copy of the document and turn it into a template that can be used as a starting point for new documents."
+        values={{
+          titleWithDefault: document.titleWithDefault,
+        }}
+        components={{
+          em: <strong />,
+        }}
+      />
+    </ConfirmationDialog>
+  );
+}
+
+export default observer(DocumentTemplatizeDialog);
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Tom Moor	474f9ccfd5	iterate	2023-02-28 20:23:29 -05:00
Tom Moor	976cc7dce5	Fine, no popper	2023-02-28 19:58:12 -05:00
Tom Moor	164748421c	First pass	2023-02-28 19:50:58 -05:00