test

Add support for SSL in development
2026-06-13 11:25:03 +03:00 · 2023-08-08 23:12:41 -04:00 · 2023-08-08 22:46:31 -04:00
1637 changed files with 49286 additions and 99782 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
@@ -107,11 +107,11 @@ jobs:
          name: Send bundle stats to RelativeCI
          command: npx relative-ci-agent
  build-image:
-    resource_class: xlarge
    executor: docker-publisher
    steps:
      - checkout
-      - setup_remote_docker
+      - setup_remote_docker:
+          version: 20.10.6
      - run:
          name: Install Docker buildx
          command: |
@@ -128,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:
@@ -142,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
@@ -171,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=https://app.outline.dev: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,7 +93,6 @@ 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
@@ -116,36 +104,6 @@ OIDC_DISPLAY_NAME=OpenID Connect
 # Space separated auth scopes.
 OIDC_SCOPES=openid profile email

-# To configure the GitHub integration, you'll need to create a GitHub App at
-# => https://github.com/settings/apps
-#
-# When configuring the Client ID, add a redirect URL under "Permissions & events":
-# https://<URL>/api/github.callback
-GITHUB_CLIENT_ID=
-GITHUB_CLIENT_SECRET=
-GITHUB_APP_NAME=
-GITHUB_APP_ID=
-GITHUB_APP_PRIVATE_KEY=
-
-# 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:
@@ -205,8 +166,8 @@ SMTP_HOST=
 SMTP_PORT=
 SMTP_USERNAME=
 SMTP_PASSWORD=
-SMTP_FROM_EMAIL=
-SMTP_REPLY_EMAIL=
+SMTP_FROM_EMAIL=hello@example.com
+SMTP_REPLY_EMAIL=hello@example.com
 SMTP_TLS_CIPHERS=
 SMTP_SECURE=true

@@ -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
@@ -21,7 +21,7 @@
    "eslint-plugin-import",
    "eslint-plugin-node",
    "eslint-plugin-react",
-    "eslint-plugin-lodash"
+    "import"
  ],
  "rules": {
    "eqeqeq": 2,
@@ -32,21 +32,11 @@
    "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": [
@@ -65,7 +55,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 +129,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
@@ -13,16 +13,3 @@ updates:
        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
@@ -24,6 +24,6 @@ jobs:
          operations-per-run: 60
          stale-issue-label: stale
          stale-pr-label: stale
-          exempt-issue-labels: "security,pinned,A1"
+          exempt-issue-labels: "security,pinned"
      - name: Print outputs
        run: echo ${{ join(steps.stale.outputs.*, ',') }}
@@ -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"],
      "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,19 @@
 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
+FROM node:18-alpine AS runner
+
+RUN apk update && apk add --no-cache curl && apk add --no-cache ca-certificates

 LABEL org.opencontainers.image.source="https://github.com/outline/outline"

 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 +22,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:18-alpine 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.82.0
-                      The Licensed Work is (c) 2025 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:          2029-02-15
+Change Date:          2026-05-23

 Change License:       Apache License, Version 2.0

@@ -1,28 +1,28 @@
 up:
-	docker compose up -d redis postgres
+	docker-compose up -d redis postgres s3
 	yarn install-local-ssl
 	yarn install --pure-lockfile
 	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
@@ -32,7 +32,7 @@ There is a short guide for [setting up a development environment](https://docs.g

 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;
@@ -3,13 +3,7 @@
  "description": "Open source wiki and knowledge base for growing teams",
  "website": "https://www.getoutline.com/",
  "repository": "https://github.com/outline/outline",
-  "keywords": [
-    "wiki",
-    "team",
-    "node",
-    "markdown",
-    "slack"
-  ],
+  "keywords": ["wiki", "team", "node", "markdown", "slack"],
  "success_url": "/",
  "formation": {
    "web": {
@@ -39,11 +33,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 +81,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",
@@ -147,6 +128,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 +148,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
@@ -218,4 +199,4 @@
      "required": false
    }
  }
-}
+}
@@ -2,10 +2,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,32 +1,23 @@
 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 CollectionEdit from "~/scenes/CollectionEdit";
+import CollectionNew from "~/scenes/CollectionNew";
+import CollectionPermissions from "~/scenes/CollectionPermissions";
 import CollectionDeleteDialog from "~/components/CollectionDeleteDialog";
-import ConfirmationDialog from "~/components/ConfirmationDialog";
 import DynamicCollectionIcon from "~/components/Icons/CollectionIcon";
-import SharePopover from "~/components/Sharing/Collection/SharePopover";
-import { getHeaderExpandedKey } from "~/components/Sidebar/components/Header";
 import { createAction } from "~/actions";
-import { ActiveCollectionSection, CollectionSection } from "~/actions/sections";
-import { setPersistedState } from "~/hooks/usePersistedState";
+import { CollectionSection } from "~/actions/sections";
 import history from "~/utils/history";
-import { newTemplatePath, searchPath } from "~/utils/routeHelpers";

 const ColorCollectionIcon = ({ collection }: { collection: Collection }) => (
  <DynamicCollectionIcon collection={collection} />
@@ -43,11 +34,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 +65,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 +91,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 +124,23 @@ export const starCollection = createAction({
      stores.policies.abilities(activeCollectionId).star
    );
  },
-  perform: async ({ activeCollectionId }) => {
+  perform: async ({ activeCollectionId, stores }) => {
    if (!activeCollectionId) {
      return;
    }

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

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

-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")}…`,
+  name: ({ t }) => t("Delete"),
  analyticsName: "Delete collection",
-  section: ActiveCollectionSection,
-  dangerous: true,
+  section: CollectionSection,
  icon: <TrashIcon />,
-  visible: ({ activeCollectionId }) => {
+  visible: ({ activeCollectionId, stores }) => {
    if (!activeCollectionId) {
      return false;
    }
    return stores.policies.abilities(activeCollectionId).delete;
  },
-  perform: ({ activeCollectionId, t }) => {
+  perform: ({ activeCollectionId, stores, t }) => {
    if (!activeCollectionId) {
      return;
    }
@@ -294,6 +182,7 @@ export const deleteCollection = createAction({
    }

    stores.dialogs.openModal({
+      isCentered: true,
      title: t("Delete collection"),
      content: (
        <CollectionDeleteDialog
@@ -305,27 +194,6 @@ export const deleteCollection = createAction({
  },
 });

-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));
-  },
-});
-
 export const rootCollectionActions = [
  openCollection,
  createCollection,
@@ -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,153 +1,38 @@
-import copy from "copy-to-clipboard";
-import {
-  BeakerIcon,
-  CopyIcon,
-  EditIcon,
-  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),
-      }),
-    ];
-  },
-});
-
-function generateRandomText() {
-  const characters =
-    "abcdefghijklmno pqrstuvwxyzABCDEFGHIJKL MNOPQRSTUVWXYZ 0123456789\n";
-  let text = "";
-  for (let i = 0; i < Math.floor(Math.random() * 10) + 1; i++) {
-    text += characters.charAt(Math.floor(Math.random() * characters.length));
-  }
-  return text;
-}
-
-export const startTyping = createAction({
-  name: "Start automatic typing",
-  icon: <EditIcon />,
-  section: DeveloperSection,
-  visible: ({ activeDocumentId }) =>
-    !!activeDocumentId && env.ENVIRONMENT === "development",
-  perform: () => {
-    const intervalId = setInterval(() => {
-      const text = generateRandomText();
-      document.execCommand("insertText", false, text);
-    }, 250);
-
-    window.addEventListener("keydown", (event) => {
-      if (event.key === "Escape") {
-        intervalId && clearInterval(intervalId);
-      }
-    });
-
-    toast.info("Automatic typing started, press Escape to stop");
-  },
-});

 export const clearIndexedDB = createAction({
-  name: ({ t }) => t("Clear IndexedDB cache"),
+  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" });
+    }
  },
 });

@@ -155,9 +40,9 @@ export const toggleDebugLogging = createAction({
  name: ({ t }) => t("Toggle debug logging"),
  icon: <ToolsIcon />,
  section: DeveloperSection,
-  perform: ({ t }) => {
+  perform: async ({ t }) => {
    Logger.debugLoggingEnabled = !Logger.debugLoggingEnabled;
-    toast.message(
+    stores.toasts.showToast(
      Logger.debugLoggingEnabled
        ? t("Debug logging enabled")
        : t("Debug logging disabled")
@@ -165,45 +50,13 @@ export const toggleDebugLogging = createAction({
  },
 });

-export const toggleFeatureFlag = createAction({
-  name: "Toggle feature flag",
-  icon: <BeakerIcon />,
-  section: DeveloperSection,
-  visible: () => env.ENVIRONMENT === "development",
-  children: Object.values(Feature).map((flag) =>
-    createAction({
-      id: `flag-${flag}`,
-      name: flag,
-      selected: () => FeatureFlags.isEnabled(flag),
-      section: DeveloperSection,
-      perform: () => {
-        if (FeatureFlags.isEnabled(flag)) {
-          FeatureFlags.disable(flag);
-          toast.success(`Disabled feature flag: ${flag}`);
-        } else {
-          FeatureFlags.enable(flag);
-          toast.success(`Enabled feature flag: ${flag}`);
-        }
-      },
-    })
-  ),
-});
-
 export const developer = createAction({
  name: ({ t }) => t("Development"),
  keywords: "debug",
  icon: <ToolsIcon />,
  iconInContextMenu: false,
  section: DeveloperSection,
-  children: [
-    copyId,
-    toggleDebugLogging,
-    toggleFeatureFlag,
-    createToast,
-    createTestUsers,
-    clearIndexedDB,
-    startTyping,
-  ],
+  children: [clearIndexedDB, toggleDebugLogging, createTestUsers],
 });

 export const rootDeveloperActions = [developer];
@@ -3,32 +3,37 @@ 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 {
  homePath,
  searchPath,
  draftsPath,
+  templatesPath,
  archivePath,
  trashPath,
  settingsPath,
@@ -57,11 +62,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,16 +101,8 @@ 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,
+  visible: ({ stores }) =>
+    stores.policies.abilities(stores.auth.team?.id || "").update,
  perform: () => history.push(settingsPath("details")),
 });

@@ -109,15 +115,6 @@ export const navigateToProfileSettings = createAction({
  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",
@@ -136,22 +133,13 @@ export const navigateToAccountPreferences = createAction({
  perform: () => history.push(settingsPath("preferences")),
 });

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

 export const toggleSidebar = createAction({
@@ -159,7 +147,7 @@ export const toggleSidebar = createAction({
  analyticsName: "Toggle sidebar",
  keywords: "hide show navigation",
  section: NavigationSection,
-  perform: () => stores.ui.toggleCollapsedSidebar(),
+  perform: ({ stores }) => stores.ui.toggleCollapsedSidebar(),
 });

 export const openFeedbackUrl = createAction({
@@ -168,14 +156,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 +172,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,23 +210,16 @@ 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,
@@ -1,4 +1,4 @@
-import { ArchiveIcon, MarkAsReadIcon } from "outline-icons";
+import { MarkAsReadIcon } from "outline-icons";
 import * as React from "react";
 import { createAction } from "..";
 import { NotificationSection } from "../sections";
@@ -13,17 +13,4 @@ export const markNotificationsAsRead = createAction({
  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,
-];
+export const rootNotificationActions = [markNotificationsAsRead];
@@ -2,7 +2,6 @@ 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";
@@ -17,7 +16,7 @@ export const restoreRevision = createAction({
  analyticsName: "Restore revision",
  icon: <RestoreIcon />,
  section: RevisionSection,
-  visible: ({ activeDocumentId }) =>
+  visible: ({ activeDocumentId, stores }) =>
    !!activeDocumentId && stores.policies.abilities(activeDocumentId).update,
  perform: async ({ event, location, activeDocumentId }) => {
    event?.preventDefault();
@@ -47,7 +46,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;
    }
@@ -69,7 +68,9 @@ export const copyLinkToRevision = createAction({
    copy(url, {
      format: "text/plain",
      onCopy: () => {
-        toast.message(t("Link copied"));
+        stores.toasts.showToast(t("Link copied"), {
+          type: "info",
+        });
      },
    });
  },
@@ -1,14 +1,12 @@
-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 }) =>
@@ -62,33 +60,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,8 @@
 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 { UserDeleteDialog } from "~/components/UserDialogs";
 import { createAction } from "~/actions";
 import { UserSection } from "~/actions/sections";

@@ -18,51 +12,16 @@ 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")}…`,
@@ -70,7 +29,7 @@ export const deleteUserActionFactory = (userId: string) =>
    keywords: "leave",
    dangerous: true,
    section: UserSection,
-    visible: () => stores.policies.abilities(userId).delete,
+    visible: ({ stores }) => stores.policies.abilities(userId).delete,
    perform: ({ t }) => {
      const user = stores.users.get(userId);
      if (!user) {
@@ -79,6 +38,7 @@ export const deleteUserActionFactory = (userId: string) =>

      stores.dialogs.openModal({
        title: t("Delete user"),
+        isCentered: true,
        content: (
          <UserDeleteDialog
            user={user}
@@ -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 {
@@ -74,7 +73,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 +105,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 +115,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,30 +2,10 @@ 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");
@@ -36,13 +16,7 @@ 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,8 +1,6 @@
 /* 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> & {
@@ -26,7 +24,6 @@ const ActionButton = React.forwardRef<HTMLButtonElement, Props>(
    { action, context, tooltip, hideOnActionDisabled, ...rest }: Props,
    ref: React.Ref<HTMLButtonElement>
  ) {
-    const isMounted = useIsMounted();
    const [executing, setExecuting] = React.useState(false);
    const disabled = rest.disabled;

@@ -63,12 +60,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
@@ -31,6 +31,7 @@ const Actions = styled(Flex)`
  left: 0;
  border-radius: 3px;
  background: ${s("background")};
+  transition: ${s("backgroundTransition")};
  padding: 12px;
  backdrop-filter: blur(20px);

@@ -1,15 +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) => {
  // Google Analytics 3
  React.useEffect(() => {
@@ -44,16 +43,12 @@ const Analytics: React.FC = ({ children }: Props) => {
  React.useEffect(() => {
    const measurementIds = [];

+    if (env.analytics.service === IntegrationService.GoogleAnalytics) {
+      measurementIds.push(escape(env.analytics.settings?.measurementId));
+    }
    if (env.GOOGLE_ANALYTICS_ID?.startsWith("G-")) {
      measurementIds.push(env.GOOGLE_ANALYTICS_ID);
    }
-
-    (env.analytics as PublicEnv["analytics"]).forEach((integration) => {
-      if (integration.service === IntegrationService.GoogleAnalytics) {
-        measurementIds.push(escape(integration.settings?.measurementId));
-      }
-    });
-
    if (measurementIds.length === 0) {
      return;
    }
@@ -80,50 +75,6 @@ const Analytics: React.FC = ({ children }: Props) => {
    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}</>;
 };

@@ -1,50 +1,54 @@
-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 composite = useCompositeState();
+
  const handleKeyDown = React.useCallback(
-    (ev: React.KeyboardEvent<HTMLDivElement>) => {
+    (ev) => {
      if (onEscape) {
        if (ev.nativeEvent.isComposing) {
          return;
        }

-        if (ev.key === "Escape" || ev.key === "Backspace") {
-          ev.preventDefault();
+        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,10 +2,8 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { Redirect } from "react-router-dom";
-import useCurrentUser from "~/hooks/useCurrentUser";
 import useStores from "~/hooks/useStores";
 import { changeLanguage } from "~/utils/language";
-import { logoutPath } from "~/utils/routeHelpers";
 import LoadingIndicator from "./LoadingIndicator";

 type Props = {
@@ -15,11 +13,10 @@ 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);
  }, [i18n, language]);
@@ -33,7 +30,7 @@ const Authenticated = ({ children }: Props) => {
  }

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

 export default observer(Authenticated);
@@ -1,15 +1,17 @@
 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";
@@ -22,9 +24,7 @@ import {
  matchDocumentSlug as slug,
  matchDocumentInsights,
 } from "~/utils/routeHelpers";
-import { DocumentContextProvider } from "./DocumentContext";
 import Fade from "./Fade";
-import { PortalContext } from "./Portal";

 const DocumentComments = lazyWithRetry(
  () => import("~/scenes/Document/components/Comments")
@@ -44,10 +44,14 @@ type Props = {
 const AuthenticatedLayout: React.FC = ({ children }: Props) => {
  const { ui, auth } = useStores();
  const location = useLocation();
-  const layoutRef = React.useRef<HTMLDivElement>(null);
-  const can = usePolicy(ui.activeDocumentId);
-  const canCollection = usePolicy(ui.activeCollectionId);
-  const team = useCurrentTeam();
+  const 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 +66,7 @@ const AuthenticatedLayout: React.FC = ({ children }: Props) => {
      return;
    }
    const { activeCollectionId } = ui;
-    if (!activeCollectionId || !canCollection.createDocument) {
+    if (!activeCollectionId || !can.createDocument) {
      return;
    }
    history.push(newDocumentPath(activeCollectionId));
@@ -72,30 +76,29 @@ 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.commentsExpanded.includes(ui.activeDocumentId) &&
+    team?.getPreference(TeamPreference.Commenting);

  const sidebarRight = (
    <AnimatePresence
@@ -117,24 +120,17 @@ 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}
+        <React.Suspense fallback={null}>
+          <CommandBar />
+        </React.Suspense>
+      </Layout>
+    </DocumentContext.Provider>
  );
 };

@@ -5,12 +5,10 @@ import Initials from "./Initials";

 export enum AvatarSize {
  Small = 16,
-  Toast = 18,
  Medium = 24,
-  Large = 28,
-  XLarge = 32,
-  XXLarge = 48,
-  Upload = 64,
+  Large = 32,
+  XLarge = 48,
+  XXLarge = 64,
 }

 export interface IAvatar {
@@ -21,37 +19,36 @@ export interface IAvatar {
 }

 type Props = {
-  /** The size of the avatar */
  size: AvatarSize;
-  /** The source of the avatar image, if not passing a model. */
  src?: string;
-  /** The avatar model, if not passing a source. */
  model?: IAvatar;
-  /** The alt text for the image */
  alt?: string;
-  /** Optional click handler */
+  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 { 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} />
      )}
    </Relative>
  );
@@ -67,11 +64,15 @@ const Relative = styled.div`
  flex-shrink: 0;
 `;

-const CircleImg = styled.img<{ size: number }>`
+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;
 `;
@@ -4,8 +4,8 @@ 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 +14,6 @@ type Props = {
  isObserving: boolean;
  isCurrentUser: boolean;
  onClick?: React.MouseEventHandler<HTMLImageElement>;
-  size?: AvatarSize;
-  style?: React.CSSProperties;
 };

 function AvatarWithPresence({
@@ -25,8 +23,6 @@ function AvatarWithPresence({
  isEditing,
  isObserving,
  isCurrentUser,
-  size = AvatarSize.Large,
-  style,
 }: Props) {
  const { t } = useTranslation();
  const status = isPresent
@@ -38,7 +34,7 @@ function AvatarWithPresence({
  return (
    <>
      <Tooltip
-        content={
+        tooltip={
          <Centered>
            <strong>{user.name}</strong> {isCurrentUser && `(${t("You")})`}
            {status && (
@@ -51,14 +47,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 +69,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%;
@@ -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;
@@ -34,17 +34,16 @@ const Link = styled.a`
    fill: ${s("text")};
  }

+  &:hover {
+    background: ${s("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")};
-    }
  `};
 `;

@@ -5,19 +5,20 @@ 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 +36,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
@@ -69,8 +66,6 @@ const Slash = styled(GoToIcon)`

 const Item = styled(Link)<{ $highlight: boolean; $withIcon: boolean }>`
  ${ellipsis()}
-  ${undraggableOnDesktop()}
-
  display: flex;
  flex-shrink: 1;
  min-width: 0;
@@ -90,4 +85,4 @@ const Item = styled(Link)<{ $highlight: boolean; $withIcon: boolean }>`
  }
 `;

-export default React.forwardRef<HTMLDivElement, Props>(Breadcrumb);
+export default Breadcrumb;
@@ -1,5 +1,5 @@
 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";
@@ -25,7 +25,7 @@ const RealButton = styled(ActionButton)<RealProps>`
  background: ${s("accent")};
  color: ${s("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;
@@ -49,8 +49,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};
@@ -105,7 +105,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;
      }
  `};
@@ -171,7 +171,7 @@ const Button = <T extends React.ElementType = "button">(
    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;

@@ -189,14 +189,10 @@ const Button = <T extends React.ElementType = "button">(
      <Inner hasIcon={hasIcon} hasText={hasText} disclosure={disclosure}>
        {hasIcon && ic}
        {hasText && <Label hasIcon={hasIcon}>{children || value}</Label>}
-        {disclosure && <StyledDisclosureIcon />}
+        {disclosure && <ExpandedIcon />}
      </Inner>
    </RealButton>
  );
 };

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

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

@@ -19,24 +18,18 @@ 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) => (
+const CenteredContent: React.FC<Props> = ({ children, ...rest }: Props) => (
  <Container {...rest}>
-    <Content $maxWidth={maxWidth}>{children}</Content>
+    <Content>{children}</Content>
  </Container>
 );

@@ -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;
-}
@@ -1,13 +1,10 @@
-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";
@@ -16,18 +13,10 @@ 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 currentUserId = user?.id;
@@ -47,16 +36,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]
  );
@@ -78,56 +66,43 @@ 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 = 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,7 +37,7 @@ 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."
            values={{
@@ -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,19 @@
 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 +21,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(
+    async (getValue) => {
+      setDirty(true);
+      await 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
+                canUpdate
+              />
+            </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)`
+const Disclosure = styled(NudeButton)`
+  opacity: 0;
+  color: ${s("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: ${s("sidebarText")};
+  }
+`;
+
+const Placeholder = styled(ButtonLink)`
  color: ${s("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: ${s("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%,
+      ${s("background")} 100%
+    );
+  }
+
+  &[data-editing="true"],
+  &[data-expanded="true"] {
+    &:after {
+      background: transparent;
+    }
+  }
+
+  &[data-editing="true"] {
+    background: ${s("secondaryBackground")};
+  }
+
+  .block-menu-trigger,
+  .heading-anchor {
+    display: none !important;
+  }
+`;
+
 export default observer(CollectionDescription);
@@ -6,31 +6,31 @@ import { Portal } from "react-portal";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import { depths, s } from "@shared/styles";
+import CommandBarResults from "~/components/CommandBarResults";
 import SearchActions from "~/components/SearchActions";
 import rootActions from "~/actions/root";
 import useCommandBarActions from "~/hooks/useCommandBarActions";
-import CommandBarResults from "./CommandBarResults";
-import useRecentDocumentActions from "./useRecentDocumentActions";
-import useSettingsAction from "./useSettingsAction";
-import useTemplatesAction from "./useTemplatesAction";
+import useSettingsActions from "~/hooks/useSettingsActions";
+import { CommandBarAction } from "~/types";

 function CommandBar() {
  const { t } = useTranslation();
-  const recentDocumentActions = useRecentDocumentActions();
-  const settingsAction = useSettingsAction();
-  const templatesAction = useTemplatesAction();
+  const settingsActions = useSettingsActions();
  const commandBarActions = React.useMemo(
-    () => [
-      ...recentDocumentActions,
-      ...rootActions,
-      templatesAction,
-      settingsAction,
-    ],
-    [recentDocumentActions, settingsAction, templatesAction]
+    () => [...rootActions, settingsActions],
+    [settingsActions]
  );

  useCommandBarActions(commandBarActions);

+  const { rootAction } = useKBar((state) => ({
+    rootAction: state.currentRootActionId
+      ? (state.actions[
+          state.currentRootActionId
+        ] as unknown as CommandBarAction)
+      : undefined,
+  }));
+
  return (
    <>
      <KBarPortal>
@@ -38,7 +38,11 @@ function CommandBar() {
          <Animator>
            <SearchActions />
            <SearchInput
-              defaultPlaceholder={`${t("Type a command or search")}…`}
+              placeholder={`${
+                rootAction?.placeholder ||
+                rootAction?.name ||
+                t("Type a command or search")
+              }…`}
            />
            <CommandBarResults />
          </Animator>
@@ -69,23 +73,16 @@ const Positioner = styled(KBarPositioner)`
 `;

 const SearchInput = styled(KBarSearch)`
-  position: relative;
-  padding: 16px 12px;
-  margin: 0 8px;
-  width: calc(100% - 16px);
+  padding: 16px 20px;
+  width: 100%;
  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;
  }
 `;

@@ -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;
@@ -5,7 +5,7 @@ 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";
+import Text from "./Text";

 type Props = {
  action: ActionImpl;
@@ -62,15 +62,15 @@ function CommandBarItem(
              {index > 0 ? (
                <>
                  {" "}
-                  <Text size="xsmall" type="secondary">
+                  <Text size="xsmall" as="span" type="secondary">
                    then
                  </Text>{" "}
                </>
              ) : (
                ""
              )}
-              {sc.split("+").map((key) => (
-                <Key key={key}>{key}</Key>
+              {sc.split("+").map((s) => (
+                <Key key={s}>{s}</Key>
              ))}
            </React.Fragment>
          ))}
@@ -1,16 +1,12 @@
 import { useMatches, KBarResults } from "kbar";
 import * as React from "react";
 import styled from "styled-components";
-import Text from "~/components/Text";
-import CommandBarItem from "./CommandBarItem";
+import { s } from "@shared/styles";
+import CommandBarItem from "~/components/CommandBarItem";

 export default function CommandBarResults() {
  const { results, rootActionId } = useMatches();

-  if (results.length === 0) {
-    return null;
-  }
-
  return (
    <Container>
      <KBarResults
@@ -18,9 +14,7 @@ export default function CommandBarResults() {
        maxHeight={400}
        onRender={({ item, active }) =>
          typeof item === "string" ? (
-            <Header type="tertiary" size="xsmall" ellipsis>
-              {item}
-            </Header>
+            <Header>{item}</Header>
          ) : (
            <CommandBarItem
              action={item}
@@ -41,10 +35,11 @@ const Container = styled.div`
  }
 `;

-const Header = styled(Text).attrs({ as: "h3" })`
-  letter-spacing: 0.03em;
+const Header = styled.h3`
+  font-size: 13px;
+  letter-spacing: 0.04em;
  margin: 0;
  padding: 16px 0 4px 20px;
+  color: ${s("textTertiary")};
  height: 36px;
-  cursor: default;
 `;
@@ -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,15 +1,14 @@
 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 */
@@ -30,45 +29,41 @@ const ConfirmationDialog: React.FC<Props> = ({
  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 || disabled}
+          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")`
@@ -9,7 +9,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;
@@ -36,7 +35,6 @@ const ContentEditable = React.forwardRef(function _ContentEditable(
    disabled,
    onChange,
    onInput,
-    onFocus,
    onBlur,
    onKeyDown,
    value,
@@ -145,13 +143,11 @@ const ContentEditable = React.forwardRef(function _ContentEditable(
  );

  return (
-    <div className={className} dir={dir} onClick={onClick} tabIndex={-1}>
-      {children}
+    <div className={className} dir={dir} onClick={onClick}>
      <Content
        ref={contentRef}
        contentEditable={!disabled && !readOnly}
        onInput={wrappedEvent(onInput)}
-        onFocus={wrappedEvent(onFocus)}
        onBlur={wrappedEvent(onBlur)}
        onKeyDown={wrappedEvent(onKeyDown)}
        onPaste={handlePaste}
@@ -162,6 +158,7 @@ const ContentEditable = React.forwardRef(function _ContentEditable(
      >
        {innerValue}
      </Content>
+      {children}
    </div>
  );
 });
@@ -182,6 +179,7 @@ function placeCaret(element: HTMLElement, atStart: boolean) {

 const Content = styled.span`
  background: ${s("background")};
+  transition: ${s("backgroundTransition")};
  color: ${s("text")};
  -webkit-text-fill-color: ${s("text")};
  outline: none;
@@ -1,18 +1,15 @@
 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,7 +20,7 @@ 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;
 };
@@ -44,43 +41,43 @@ const MenuItem = (
 ) => {
  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) => {
-        ev.preventDefault();
-        ev.stopPropagation();
-      };
-
      const handleClick = async (ev: React.MouseEvent) => {
        hide?.();

        if (onClick) {
-          preventDefault(ev);
+          ev.preventDefault();
          await onClick(ev);
        }
      };

+      // Preventing default mousedown otherwise menu items do not work in Firefox,
+      // which triggers the hideOnClickOutside handler first via mousedown – hiding
+      // and un-rendering the menu contents.
+      const handleMouseDown = (ev: React.MouseEvent) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+      };
+
      return (
        <MenuAnchor
          {...props}
          $active={active}
          as={onClick ? "button" : as}
          onClick={handleClick}
-          onPointerDown={preventDefault}
-          onMouseDown={preventDefault}
+          onMouseDown={handleMouseDown}
          ref={mergeRefs([
            ref,
            props.ref as React.RefObject<HTMLAnchorElement>,
          ])}
        >
          {selected !== undefined && (
-            <SelectedWrapper aria-hidden>
+            <>
              {selected ? <CheckmarkIcon /> : <Spacer />}
-            </SelectedWrapper>
+              &nbsp;
+            </>
          )}
-          {icon && <MenuIconWrapper aria-hidden>{icon}</MenuIconWrapper>}
-          <Title>{children}</Title>
+          {icon && <MenuIconWrapper>{icon}</MenuIconWrapper>}
+          {children}
        </MenuAnchor>
      );
    },
@@ -105,14 +102,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 +130,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 +148,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 +187,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;
 };

@@ -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)`
@@ -99,7 +98,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,10 +124,9 @@ 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") {
@@ -140,7 +138,7 @@ function Template({ items, actions, context, showIcons, ...menu }: Props) {
              key={index}
              disabled={item.disabled}
              selected={item.selected}
-              icon={showIcons !== false ? item.icon : undefined}
+              icon={item.icon}
              {...menu}
            >
              {item.title}
@@ -158,7 +156,7 @@ function Template({ items, actions, context, showIcons, ...menu }: Props) {
              selected={item.selected}
              level={item.level}
              target={item.href.startsWith("#") ? undefined : "_blank"}
-              icon={showIcons !== false ? item.icon : undefined}
+              icon={item.icon}
              {...menu}
            >
              {item.title}
@@ -176,7 +174,7 @@ function Template({ items, actions, context, showIcons, ...menu }: Props) {
              selected={item.selected}
              dangerous={item.dangerous}
              key={index}
-              icon={showIcons !== false ? item.icon : undefined}
+              icon={item.icon}
              {...menu}
            >
              {item.title}
@@ -192,12 +190,7 @@ function Template({ items, actions, context, showIcons, ...menu }: Props) {
              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 +201,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 +220,7 @@ function Title({
 }) {
  return (
    <Flex align="center">
-      {icon && <MenuIconWrapper aria-hidden>{icon}</MenuIconWrapper>}
+      {icon && <MenuIconWrapper>{icon}</MenuIconWrapper>}
      {title}
    </Flex>
  );
@@ -6,7 +6,6 @@ import styled, { DefaultTheme } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import { depths, s } 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";
@@ -39,8 +38,6 @@ export type Placement =

 type Props = MenuStateReturn & {
  "aria-label"?: string;
-  /** Reference to the rendered menu div element */
-  menuRef?: React.RefObject<HTMLDivElement>;
  /** The parent menu state if this is a submenu. */
  parentMenuState?: Omit<MenuStateReturn, "items">;
  /** Called when the context menu is opened. */
@@ -49,15 +46,10 @@ type Props = MenuStateReturn & {
  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,
@@ -65,6 +57,11 @@ const ContextMenu: React.FC<Props> = ({
  ...rest
 }: Props) => {
  const previousVisible = usePrevious(rest.visible);
+  const maxHeight = useMenuHeight({
+    visible: rest.visible,
+    elementRef: rest.unstable_disclosureRef,
+  });
+  const backgroundRef = React.useRef<HTMLDivElement>(null);
  const { ui } = useStores();
  const { t } = useTranslation();
  const { setIsMenuOpen } = useMenuContext();
@@ -102,6 +99,21 @@ const ContextMenu: React.FC<Props> = ({
    t,
  ]);

+  // We must manually manage scroll lock for iOS support so that the scrollable
+  // element can be passed into body-scroll-lock. See:
+  // https://github.com/ariakit/ariakit/issues/469
+  React.useEffect(() => {
+    const scrollElement = backgroundRef.current;
+    if (rest.visible && scrollElement && !isSubMenu) {
+      disableBodyScroll(scrollElement, {
+        reserveScrollBarGap: true,
+      });
+    }
+    return () => {
+      scrollElement && !isSubMenu && enableBodyScroll(scrollElement);
+    };
+  }, [isSubMenu, rest.visible]);
+
  // Perf win – don't render anything until the menu has been opened
  if (!rest.visible && !previousVisible) {
    return null;
@@ -111,132 +123,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={
+                    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`
@@ -254,16 +186,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 +203,6 @@ export const Position = styled.div`
 type BackgroundProps = {
  topAnchor?: boolean;
  rightAnchor?: boolean;
-  maxWidth?: number;
-  minHeight?: number;
  theme: DefaultTheme;
 };

@@ -294,8 +214,9 @@ export const Background = styled(Scrollable)<BackgroundProps>`
  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 +228,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,6 +25,7 @@ const DefaultCollectionInputSelect = ({
  const { collections } = useStores();
  const [fetching, setFetching] = useState(false);
  const [fetchError, setFetchError] = useState();
+  const { showToast } = useToasts();

  React.useEffect(() => {
    async function fetchData() {
@@ -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 {
@@ -45,11 +49,11 @@ const DefaultCollectionInputSelect = ({
      }
    }
    void fetchData();
-  }, [fetchError, t, fetching, collections]);
+  }, [showToast, fetchError, t, fetching, collections]);

  const options = React.useMemo(
    () =>
-      collections.nonPrivate.reduce(
+      collections.publicCollections.reduce(
        (acc, collection) => [
          ...acc,
          {
@@ -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,16 +24,11 @@ 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();
          },
@@ -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>
@@ -3,16 +3,18 @@ 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 {
+  archivePath,
+  collectionPath,
+  templatesPath,
+  trashPath,
+} from "~/utils/routeHelpers";

 type Props = {
  children?: React.ReactNode;
@@ -41,57 +43,53 @@ function useCategory(document: Document): MenuInternalLink | null {
    };
  }

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

  return null;
 }

-function DocumentBreadcrumb(
-  { document, children, onlyText }: Props,
-  ref: React.RefObject<HTMLDivElement> | null
-) {
+const DocumentBreadcrumb: React.FC<Props> = ({
+  document,
+  children,
+  onlyText,
+}: Props) => {
  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]);

  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: collectionPath(collection.url),
    };
-  } else if (document.isCollectionDeleted) {
+  } else if (document.collectionId && !collection) {
    collectionNode = {
      type: "route",
      title: t("Deleted Collection"),
      icon: undefined,
-      to: "",
+      to: collectionPath("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 +102,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,10 +120,10 @@ 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>
        ))}
      </>
@@ -143,15 +131,11 @@ function DocumentBreadcrumb(
  }

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

 const SmallSlash = styled(GoToIcon)`
  width: 12px;
@@ -163,4 +147,4 @@ const SmallSlash = styled(GoToIcon)`
  opacity: 0.5;
 `;

-export default observer(React.forwardRef(DocumentBreadcrumb));
+export default observer(DocumentBreadcrumb);
@@ -1,26 +1,23 @@
 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 { s, ellipsis } from "@shared/styles";
 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 { hover } from "~/styles";
 import CollectionIcon from "./Icons/CollectionIcon";
+import EmojiIcon from "./Icons/EmojiIcon";
+import Squircle from "./Squircle";
 import Text from "./Text";
 import Tooltip from "./Tooltip";

@@ -40,7 +37,6 @@ 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;
@@ -56,8 +52,6 @@ function DocumentCard(props: Props) {
    disabled: !isDraggable || !canUpdatePin,
  });

-  const hasEmojiInTitle = determineIconType(document.icon) === IconType.Emoji;
-
  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
@@ -72,10 +66,6 @@ function DocumentCard(props: Props) {
    [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 +109,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,26 +126,25 @@ 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 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 />
                  </PinButton>
@@ -176,39 +158,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;
 `;
@@ -330,8 +279,8 @@ const Heading = styled.h3`
  overflow: hidden;

  color: ${s("text")};
-  font-family: ${s("fontFamily")};
-  font-weight: 500;
+  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,12 @@ 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 [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>[]
  >([]);
@@ -107,15 +90,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)
@@ -226,91 +200,84 @@ 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 color={theme.textSecondary} />;
      }

-      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();
@@ -416,9 +383,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>
@@ -120,7 +120,6 @@ export const Node = styled.span<{
      color: ${props.theme.white};

      svg {
-        color: ${props.theme.white};
        fill: ${props.theme.white};
      }
    `}
@@ -1,7 +1,7 @@
 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";
@@ -1,30 +1,29 @@
-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 { s } 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 +35,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 +51,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 +69,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 +135,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 +162,7 @@ function DocumentListItem(
          modal={false}
        />
      </Actions>
-    </DocumentLink>
+    </CompositeItem>
  );
 }

@@ -258,8 +262,8 @@ const Heading = styled.h3<{ rtl?: boolean }>`
  margin-bottom: 0.25em;
  white-space: nowrap;
  color: ${s("text")};
-  font-family: ${s("fontFamily")};
-  font-weight: 500;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 `;

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

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

 export default observer(React.forwardRef(DocumentListItem));
@@ -95,21 +95,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 +113,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 +134,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 +162,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 +173,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,10 +198,6 @@ 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")};
@@ -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 { documentPath } from "~/utils/routeHelpers";
+
+type Props = {
+  documentId: string;
+};
+
+function DocumentTemplatizeDialog({ documentId }: Props) {
+  const history = useHistory();
+  const { showToast } = useToasts();
+  const { t } = useTranslation();
+  const { documents } = useStores();
+  const document = documents.get(documentId);
+  invariant(document, "Document must exist");
+
+  const handleSubmit = React.useCallback(async () => {
+    const template = await document?.templatize();
+    if (template) {
+      history.push(documentPath(template));
+      showToast(t("Template created, go ahead and customize it"), {
+        type: "info",
+      });
+    }
+  }, [document, showToast, history, t]);
+
+  return (
+    <ConfirmationDialog
+      onSubmit={handleSubmit}
+      submitText={t("Create template")}
+      savingText={`${t("Creating")}…`}
+    >
+      <Trans
+        defaults="Creating a template from <em>{{titleWithDefault}}</em> is a non-destructive action – we'll make a copy of the document and turn it into a template that can be used as a starting point for new documents."
+        values={{
+          titleWithDefault: document.titleWithDefault,
+        }}
+        components={{
+          em: <strong />,
+        }}
+      />
+    </ConfirmationDialog>
+  );
+}
+
+export default observer(DocumentTemplatizeDialog);
@@ -1,15 +1,13 @@
-import compact from "lodash/compact";
-import sortBy from "lodash/sortBy";
+import { sortBy } from "lodash";
 import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
-import { dateLocale, dateToRelative } from "@shared/utils/date";
+import { dateToRelative } from "@shared/utils/date";
 import Document from "~/models/Document";
 import User from "~/models/User";
-import { Avatar, AvatarSize } from "~/components/Avatar";
+import Avatar from "~/components/Avatar";
 import ListItem from "~/components/List/Item";
 import PaginatedList from "~/components/PaginatedList";
-import useCurrentUser from "~/hooks/useCurrentUser";
 import useStores from "~/hooks/useStores";

 type Props = {
@@ -20,9 +18,6 @@ type Props = {
 function DocumentViews({ document, isOpen }: Props) {
  const { t } = useTranslation();
  const { views, presence } = useStores();
-  const user = useCurrentUser();
-  const locale = dateLocale(user.language);
-
  const documentPresence = presence.get(document.id);
  const documentPresenceArray = documentPresence
    ? Array.from(documentPresence.values())
@@ -36,10 +31,10 @@ function DocumentViews({ document, isOpen }: Props) {
  const documentViews = views.inDocument(document.id);
  const sortedViews = sortBy(
    documentViews,
-    (view) => !presentIds.includes(view.userId)
+    (view) => !presentIds.includes(view.user.id)
  );
  const users = React.useMemo(
-    () => compact(sortedViews.map((v) => v.user)),
+    () => sortedViews.map((v) => v.user),
    [sortedViews]
  );

@@ -50,20 +45,16 @@ function DocumentViews({ document, isOpen }: Props) {
          aria-label={t("Viewers")}
          items={users}
          renderItem={(model: User) => {
-            const view = documentViews.find((v) => v.userId === model.id);
+            const view = documentViews.find((v) => v.user.id === model.id);
            const isPresent = presentIds.includes(model.id);
            const isEditing = editingIds.includes(model.id);
            const subtitle = isPresent
              ? isEditing
                ? t("Currently editing")
                : t("Currently viewing")
-              : t("Viewed {{ timeAgo }}", {
+              : t("Viewed {{ timeAgo }} ago", {
                  timeAgo: dateToRelative(
-                    view ? Date.parse(view.lastViewedAt) : new Date(),
-                    {
-                      addSuffix: true,
-                      locale,
-                    }
+                    view ? Date.parse(view.lastViewedAt) : new Date()
                  ),
                });
            return (
@@ -71,13 +62,7 @@ function DocumentViews({ document, isOpen }: Props) {
                key={model.id}
                title={model.name}
                subtitle={subtitle}
-                image={
-                  <Avatar
-                    key={model.id}
-                    model={model}
-                    size={AvatarSize.Large}
-                  />
-                }
+                image={<Avatar key={model.id} model={model} size={32} />}
                border={false}
                small
              />
@@ -1,24 +1,36 @@
-import difference from "lodash/difference";
+import { deburr, difference, sortBy } from "lodash";
 import { observer } from "mobx-react";
 import { DOMParser as ProsemirrorDOMParser } from "prosemirror-model";
 import { TextSelection } from "prosemirror-state";
 import * as React from "react";
 import { mergeRefs } from "react-merge-refs";
+import { useHistory } from "react-router-dom";
 import { Optional } from "utility-types";
 import insertFiles from "@shared/editor/commands/insertFiles";
 import { AttachmentPreset } from "@shared/types";
+import { Heading } from "@shared/utils/ProsemirrorHelper";
+import { dateLocale, dateToRelative } from "@shared/utils/date";
 import { getDataTransferFiles } from "@shared/utils/files";
+import parseDocumentSlug from "@shared/utils/parseDocumentSlug";
+import { isInternalUrl } from "@shared/utils/urls";
 import { AttachmentValidation } from "@shared/validations";
+import Document from "~/models/Document";
 import ClickablePadding from "~/components/ClickablePadding";
 import ErrorBoundary from "~/components/ErrorBoundary";
+import HoverPreview from "~/components/HoverPreview";
 import type { Props as EditorProps, Editor as SharedEditor } from "~/editor";
-import useCurrentUser from "~/hooks/useCurrentUser";
 import useDictionary from "~/hooks/useDictionary";
-import useEditorClickHandlers from "~/hooks/useEditorClickHandlers";
 import useEmbeds from "~/hooks/useEmbeds";
 import useStores from "~/hooks/useStores";
-import { uploadFile, uploadFileFromUrl } from "~/utils/files";
+import useToasts from "~/hooks/useToasts";
+import useUserLocale from "~/hooks/useUserLocale";
+import { NotFoundError } from "~/utils/errors";
+import { uploadFile } from "~/utils/files";
+import { isModKey } from "~/utils/keyboard";
 import lazyWithRetry from "~/utils/lazyWithRetry";
+import { sharedDocumentPath } from "~/utils/routeHelpers";
+import { isHash } from "~/utils/urls";
+import DocumentBreadcrumb from "./DocumentBreadcrumb";

 const LazyLoadedEditor = lazyWithRetry(() => import("~/editor"));

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

 function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
-  const { id, shareId, onChange, onCreateCommentMark, onDeleteCommentMark } =
-    props;
-  const { comments } = useStores();
+  const {
+    id,
+    shareId,
+    onChange,
+    onHeadingsChange,
+    onCreateCommentMark,
+    onDeleteCommentMark,
+  } = props;
+  const userLocale = useUserLocale();
+  const locale = dateLocale(userLocale);
+  const { auth, comments, documents } = useStores();
+  const { showToast } = useToasts();
  const dictionary = useDictionary();
  const embeds = useEmbeds(!shareId);
+  const history = useHistory();
  const localRef = React.useRef<SharedEditor>();
-  const preferences = useCurrentUser({ rejectOnEmpty: false })?.preferences;
+  const preferences = auth.user?.preferences;
+  const previousHeadings = React.useRef<Heading[] | null>(null);
+  const [activeLinkElement, setActiveLink] =
+    React.useState<HTMLAnchorElement | null>(null);
  const previousCommentIds = React.useRef<string[]>();

+  const handleLinkActive = React.useCallback((element: HTMLAnchorElement) => {
+    setActiveLink(element);
+    return false;
+  }, []);
+
+  const handleLinkInactive = React.useCallback(() => {
+    setActiveLink(null);
+  }, []);
+
+  const handleSearchLink = React.useCallback(
+    async (term: string) => {
+      if (isInternalUrl(term)) {
+        // search for exact internal document
+        const slug = parseDocumentSlug(term);
+        if (!slug) {
+          return [];
+        }
+
+        try {
+          const document = await documents.fetch(slug);
+          const time = dateToRelative(Date.parse(document.updatedAt), {
+            addSuffix: true,
+            shorten: true,
+            locale,
+          });
+
+          return [
+            {
+              title: document.title,
+              subtitle: `Updated ${time}`,
+              url: document.url,
+            },
+          ];
+        } catch (error) {
+          // NotFoundError could not find document for slug
+          if (!(error instanceof NotFoundError)) {
+            throw error;
+          }
+        }
+      }
+
+      // default search for anything that doesn't look like a URL
+      const results = await documents.searchTitles(term);
+
+      return sortBy(
+        results.map((document: Document) => ({
+          title: document.title,
+          subtitle: <DocumentBreadcrumb document={document} onlyText />,
+          url: document.url,
+        })),
+        (document) =>
+          deburr(document.title)
+            .toLowerCase()
+            .startsWith(deburr(term).toLowerCase())
+            ? -1
+            : 1
+      );
+    },
+    [documents]
+  );
+
  const handleUploadFile = React.useCallback(
-    async (file: File | string) => {
-      const options = {
+    async (file: File) => {
+      const result = await uploadFile(file, {
        documentId: id,
        preset: AttachmentPreset.DocumentAttachment,
-      };
-      const result =
-        file instanceof File
-          ? await uploadFile(file, options)
-          : await uploadFileFromUrl(file, options);
+      });
      return result.url;
    },
    [id]
  );

-  const { handleClickLink } = useEditorClickHandlers({ shareId });
+  const handleClickLink = React.useCallback(
+    (href: string, event: MouseEvent) => {
+      // on page hash
+      if (isHash(href)) {
+        window.location.href = href;
+        return;
+      }
+
+      if (isInternalUrl(href) && !isModKey(event) && !event.shiftKey) {
+        // relative
+        let navigateTo = href;
+
+        // probably absolute
+        if (href[0] !== "/") {
+          try {
+            const url = new URL(href);
+            navigateTo = url.pathname + url.hash;
+          } catch (err) {
+            navigateTo = href;
+          }
+        }
+
+        // Link to our own API should be opened in a new tab, not in the app
+        if (navigateTo.startsWith("/api/")) {
+          window.open(href, "_blank");
+          return;
+        }
+
+        // If we're navigating to an internal document link then prepend the
+        // share route to the URL so that the document is loaded in context
+        if (shareId && navigateTo.includes("/doc/")) {
+          navigateTo = sharedDocumentPath(shareId, navigateTo);
+        }
+
+        history.push(navigateTo);
+      } else if (href) {
+        window.open(href, "_blank");
+      }
+    },
+    [history, shareId]
+  );

  const focusAtEnd = React.useCallback(() => {
    localRef?.current?.focusAtEnd();
@@ -109,10 +233,11 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
        (file) => !AttachmentValidation.imageContentTypes.includes(file.type)
      );

-      return insertFiles(view, event, pos, files, {
+      insertFiles(view, event, pos, files, {
        uploadFile: handleUploadFile,
        onFileUploadStart: props.onFileUploadStart,
        onFileUploadStop: props.onFileUploadStop,
+        onShowToast: showToast,
        dictionary,
        isAttachment,
      });
@@ -123,6 +248,7 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
      props.onFileUploadStop,
      dictionary,
      handleUploadFile,
+      showToast,
    ]
  );

@@ -135,9 +261,24 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
    []
  );

+  // Calculate if headings have changed and trigger callback if so
+  const updateHeadings = React.useCallback(() => {
+    if (onHeadingsChange) {
+      const headings = localRef?.current?.getHeadings();
+      if (
+        headings &&
+        headings.map((h) => h.level + h.title).join("") !==
+          previousHeadings.current?.map((h) => h.level + h.title).join("")
+      ) {
+        previousHeadings.current = headings;
+        onHeadingsChange(headings);
+      }
+    }
+  }, [localRef, onHeadingsChange]);
+
  const updateComments = React.useCallback(() => {
-    if (onCreateCommentMark && onDeleteCommentMark && localRef.current) {
-      const commentMarks = localRef.current.getComments();
+    if (onCreateCommentMark && onDeleteCommentMark) {
+      const commentMarks = localRef.current?.getComments();
      const commentIds = comments.orderedData.map((c) => c.id);
      const commentMarkIds = commentMarks?.map((c) => c.id);
      const newCommentIds = difference(
@@ -147,7 +288,7 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
      );

      newCommentIds.forEach((commentId) => {
-        const mark = commentMarks.find((c) => c.id === commentId);
+        const mark = commentMarks?.find((c) => c.id === commentId);
        if (mark) {
          onCreateCommentMark(mark.id, mark.userId);
        }
@@ -169,45 +310,54 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
  const handleChange = React.useCallback(
    (event) => {
      onChange?.(event);
+      updateHeadings();
      updateComments();
    },
-    [onChange, updateComments]
+    [onChange, updateComments, updateHeadings]
  );

  const handleRefChanged = React.useCallback(
    (node: SharedEditor | null) => {
      if (node) {
+        updateHeadings();
        updateComments();
      }
    },
-    [updateComments]
+    [updateComments, updateHeadings]
  );

  return (
    <ErrorBoundary component="div" reloadOnChunkMissing>
      <>
        <LazyLoadedEditor
-          key={props.extensions?.length || 0}
          ref={mergeRefs([ref, localRef, handleRefChanged])}
          uploadFile={handleUploadFile}
+          onShowToast={showToast}
          embeds={embeds}
          userPreferences={preferences}
          dictionary={dictionary}
          {...props}
+          onHoverLink={handleLinkActive}
          onClickLink={handleClickLink}
+          onSearchLink={handleSearchLink}
          onChange={handleChange}
          placeholder={props.placeholder || ""}
          defaultValue={props.defaultValue || ""}
        />
-        {props.editorStyle?.paddingBottom &&
-          (!props.readOnly || props.shareId) && (
-            <ClickablePadding
-              onClick={props.readOnly ? undefined : focusAtEnd}
-              onDrop={props.readOnly ? undefined : handleDrop}
-              onDragOver={props.readOnly ? undefined : handleDragOver}
-              minHeight={props.editorStyle.paddingBottom}
-            />
-          )}
+        {props.editorStyle?.paddingBottom && !props.readOnly && (
+          <ClickablePadding
+            onClick={focusAtEnd}
+            onDrop={handleDrop}
+            onDragOver={handleDragOver}
+            minHeight={props.editorStyle.paddingBottom}
+          />
+        )}
+        {activeLinkElement && !shareId && (
+          <HoverPreview
+            element={activeLinkElement}
+            onClose={handleLinkInactive}
+          />
+        )}
      </>
    </ErrorBoundary>
  );
@@ -1,20 +0,0 @@
-import styled from "styled-components";
-import { s } from "@shared/styles";
-
-type Props = {
-  /** Width of the containing element. */
-  width?: number | string;
-  /** Height of the containing element. */
-  height?: number | string;
-  /** Controls the rendered emoji size. */
-  size?: number;
-};
-
-export const Emoji = styled.span<Props>`
-  font-family: ${s("fontFamilyEmoji")};
-  width: ${({ width }) =>
-    typeof width === "string" ? width : width ? `${width}px` : "auto"};
-  height: ${({ height }) =>
-    typeof height === "string" ? height : height ? `${height}px` : "auto"};
-  font-size: ${({ size }) => size && `${size}px`};
-`;
@@ -4,7 +4,7 @@ import * as React from "react";
 import { withTranslation, Trans, WithTranslation } from "react-i18next";
 import styled from "styled-components";
 import { s } from "@shared/styles";
-import { UrlHelper } from "@shared/utils/UrlHelper";
+import { githubIssuesUrl, feedbackUrl } from "@shared/utils/urlHelpers";
 import Button from "~/components/Button";
 import CenteredContent from "~/components/CenteredContent";
 import PageTitle from "~/components/PageTitle";
@@ -57,7 +57,7 @@ class ErrorBoundary extends React.Component<Props> {
  };

  handleReportBug = () => {
-    window.open(isCloudHosted ? UrlHelper.contact : UrlHelper.github);
+    window.open(isCloudHosted ? feedbackUrl() : githubIssuesUrl());
  };

  render() {
@@ -82,7 +82,7 @@ class ErrorBoundary extends React.Component<Props> {
                </h1>
              </>
            )}
-            <Text as="p" type="secondary">
+            <Text type="secondary">
              <Trans>
                Sorry, part of the application failed to load. This may be
                because it was updated since you opened the tab or because of a
@@ -106,7 +106,7 @@ class ErrorBoundary extends React.Component<Props> {
              </h1>
            </>
          )}
-          <Text as="p" type="secondary">
+          <Text type="secondary">
            <Trans
              defaults="Sorry, an unrecoverable error occurred{{notified}}. Please try reloading the page, it may have been a temporary glitch."
              values={{
@@ -121,11 +121,11 @@ class ErrorBoundary extends React.Component<Props> {
            <Button onClick={this.handleReload}>{t("Reload")}</Button>{" "}
            {this.showDetails ? (
              <Button onClick={this.handleReportBug} neutral>
-                <Trans>Report a bug</Trans>…
+                <Trans>Report a Bug</Trans>…
              </Button>
            ) : (
              <Button onClick={this.handleShowDetails} neutral>
-                <Trans>Show detail</Trans>…
+                <Trans>Show Detail</Trans>…
              </Button>
            )}
          </p>
@@ -138,7 +138,7 @@ class ErrorBoundary extends React.Component<Props> {
 }

 const Pre = styled.pre`
-  background: ${s("backgroundSecondary")};
+  background: ${s("secondaryBackground")};
  padding: 16px;
  border-radius: 4px;
  font-size: 12px;
@@ -0,0 +1,21 @@
+import * as React from "react";
+
+type Props = {
+  children?: React.ReactNode;
+  className?: string;
+};
+
+const EventBoundary: React.FC<Props> = ({ children, className }: Props) => {
+  const handleClick = React.useCallback((event: React.SyntheticEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
+  }, []);
+
+  return (
+    <span onClick={handleClick} className={className}>
+      {children}
+    </span>
+  );
+};
+
+export default EventBoundary;
@@ -11,31 +11,33 @@ import {
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { useLocation } from "react-router-dom";
+import { CompositeStateReturn } from "reakit/Composite";
 import styled, { css } from "styled-components";
-import EventBoundary from "@shared/components/EventBoundary";
-import { s, hover } from "@shared/styles";
+import { s } from "@shared/styles";
 import Document from "~/models/Document";
 import Event from "~/models/Event";
-import { Avatar, AvatarSize } from "~/components/Avatar";
-import Item, { Actions, Props as ItemProps } from "~/components/List/Item";
+import Avatar from "~/components/Avatar";
+import CompositeItem, {
+  Props as ItemProps,
+} from "~/components/List/CompositeItem";
+import Item, { Actions } from "~/components/List/Item";
 import Time from "~/components/Time";
-import { useLocationSidebarContext } from "~/hooks/useLocationSidebarContext";
 import useStores from "~/hooks/useStores";
 import RevisionMenu from "~/menus/RevisionMenu";
+import { hover } from "~/styles";
 import Logger from "~/utils/Logger";
 import { documentHistoryPath } from "~/utils/routeHelpers";

 type Props = {
  document: Document;
-  event: Event<Document>;
+  event: Event;
  latest?: boolean;
-};
+} & CompositeStateReturn;

 const EventListItem = ({ event, latest, document, ...rest }: Props) => {
  const { t } = useTranslation();
  const { revisions } = useStores();
  const location = useLocation();
-  const sidebarContext = useLocationSidebarContext();
  const opts = {
    userName: event.actor.name,
  };
@@ -67,10 +69,7 @@ const EventListItem = ({ event, latest, document, ...rest }: Props) => {
      );
      to = {
        pathname: documentHistoryPath(document, event.modelId || "latest"),
-        state: {
-          sidebarContext,
-          retainScrollPosition: true,
-        },
+        state: { retainScrollPosition: true },
      };
      break;

@@ -87,18 +86,6 @@ const EventListItem = ({ event, latest, document, ...rest }: Props) => {
      icon = <TrashIcon size={16} />;
      meta = t("{{userName}} deleted", opts);
      break;
-    case "documents.add_user":
-      meta = t("{{userName}} added {{addedUserName}}", {
-        ...opts,
-        addedUserName: event.user?.name ?? t("a user"),
-      });
-      break;
-    case "documents.remove_user":
-      meta = t("{{userName}} removed {{removedUserName}}", {
-        ...opts,
-        removedUserName: event.user?.name ?? t("a user"),
-      });
-      break;

    case "documents.restore":
      meta = t("{{userName}} moved from trash", opts);
@@ -144,6 +131,7 @@ const EventListItem = ({ event, latest, document, ...rest }: Props) => {
      title={
        <Time
          dateTime={event.createdAt}
+          tooltipDelay={500}
          format={{
            en_US: "MMM do, h:mm a",
            fr_FR: "'Le 'd MMMM 'à' H:mm",
@@ -153,7 +141,7 @@ const EventListItem = ({ event, latest, document, ...rest }: Props) => {
          onClick={handleTimeClick}
        />
      }
-      image={<Avatar model={event.actor} size={AvatarSize.Large} />}
+      image={<Avatar model={event.actor} size={32} />}
      subtitle={
        <Subtitle>
          {icon}
@@ -162,9 +150,7 @@ const EventListItem = ({ event, latest, document, ...rest }: Props) => {
      }
      actions={
        isRevision && isActive && event.modelId && !latest ? (
-          <StyledEventBoundary>
-            <RevisionMenu document={document} revisionId={event.modelId} />
-          </StyledEventBoundary>
+          <RevisionMenu document={document} revisionId={event.modelId} />
        ) : undefined
      }
      onMouseEnter={prefetchRevision}
@@ -178,12 +164,12 @@ const BaseItem = React.forwardRef(function _BaseItem(
  { to, ...rest }: ItemProps,
  ref?: React.Ref<HTMLAnchorElement>
 ) {
-  return <ListItem to={to} ref={ref} {...rest} />;
-});
+  if (to) {
+    return <CompositeListItem to={to} ref={ref} {...rest} />;
+  }

-const StyledEventBoundary = styled(EventBoundary)`
-  height: 24px;
-`;
+  return <ListItem ref={ref} {...rest} />;
+});

 const Subtitle = styled.span`
  svg {
@@ -242,4 +228,8 @@ const ListItem = styled(Item)`
  ${ItemStyle}
 `;

+const CompositeListItem = styled(CompositeItem)`
+  ${ItemStyle}
+`;
+
 export default observer(EventListItem);
@@ -1,7 +1,6 @@
 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 { FileOperationFormat, NotificationEventType } from "@shared/types";
 import Collection from "~/models/Collection";
@@ -11,8 +10,7 @@ import Text from "~/components/Text";
 import env from "~/env";
 import useCurrentUser from "~/hooks/useCurrentUser";
 import useStores from "~/hooks/useStores";
-import history from "~/utils/history";
-import { settingsPath } from "~/utils/routeHelpers";
+import useToasts from "~/hooks/useToasts";

 type Props = {
  collection?: Collection;
@@ -26,6 +24,7 @@ function ExportDialog({ collection, onSubmit }: Props) {
  const [includeAttachments, setIncludeAttachments] =
    React.useState<boolean>(true);
  const user = useCurrentUser();
+  const { showToast } = useToasts();
  const { collections } = useStores();
  const { t } = useTranslation();
  const appName = env.APP_NAME;
@@ -47,22 +46,11 @@ function ExportDialog({ collection, onSubmit }: Props) {
  const handleSubmit = async () => {
    if (collection) {
      await collection.export(format, includeAttachments);
-      toast.success(t("Export started"), {
-        description: t(`Your file will be available in {{ location }} soon`, {
-          location: `"${t("Settings")} > ${t("Export")}"`,
-        }),
-        action: {
-          label: t("View"),
-          onClick: () => {
-            history.push(settingsPath("export"));
-          },
-        },
-      });
    } else {
      await collections.export(format, includeAttachments);
-      toast.success(t("Export started"));
    }
    onSubmit();
+    showToast(t("Export started"), { type: "success" });
  };

  const items = [
@@ -95,7 +83,7 @@ function ExportDialog({ collection, onSubmit }: Props) {
  return (
    <ConfirmationDialog onSubmit={handleSubmit} submitText={t("Export")}>
      {collection && (
-        <Text as="p">
+        <Text>
          <Trans
            defaults="Exporting the collection <em>{{collectionName}}</em> may take some time."
            values={{
@@ -120,7 +108,7 @@ function ExportDialog({ collection, onSubmit }: Props) {
              onChange={handleFormatChange}
            />
            <div>
-              <Text as="p" size="small" weight="bold">
+              <Text size="small" weight="bold">
                {item.title}
              </Text>
              <Text size="small">{item.description}</Text>
@@ -137,7 +125,7 @@ function ExportDialog({ collection, onSubmit }: Props) {
          onChange={handleIncludeAttachmentsChange}
        />
        <div>
-          <Text as="p" size="small" weight="bold">
+          <Text size="small" weight="bold">
            {t("Include attachments")}
          </Text>
          <Text size="small">
@@ -1,97 +1,70 @@
 import { observer } from "mobx-react";
 import * as React from "react";
 import styled from "styled-components";
+import { s } from "@shared/styles";
 import User from "~/models/User";
-import { Avatar, AvatarSize } from "~/components/Avatar";
+import Avatar from "~/components/Avatar";
 import Flex from "~/components/Flex";
-import Initials from "./Avatar/Initials";

 type Props = {
-  /** The users to display */
  users: User[];
-  /** The size of the avatars, defaults to AvatarSize.Large */
  size?: number;
-  /** A number to show as the number of additional users */
  overflow?: number;
-  /** The maximum number of users to display, defaults to 8 */
  limit?: number;
-  /** A component to render the avatar, defaults to Avatar. */
-  renderAvatar?: React.ComponentType<
-    React.ComponentProps<typeof Avatar> & {
-      model: User;
-    }
-  >;
+  renderAvatar?: (user: User) => React.ReactNode;
 };

 function Facepile({
  users,
  overflow = 0,
-  size = AvatarSize.Large,
+  size = 32,
  limit = 8,
-  renderAvatar = Avatar,
+  renderAvatar = DefaultAvatar,
  ...rest
 }: Props) {
-  const filtered = users.filter(Boolean).slice(-limit);
-  const Component = renderAvatar;
-
  return (
    <Avatars {...rest}>
      {overflow > 0 && (
-        <Initials size={size} content={String(overflow)}>
-          {users.length ? "+" : ""}
-          {overflow}
-        </Initials>
+        <More size={size}>
+          <span>
+            {users.length ? "+" : ""}
+            {overflow}
+          </span>
+        </More>
      )}
-      {filtered.map((model, index) => {
-        const lastChild = index === 0 && overflow <= 0;
-        return (
-          <Component
-            key={model.id}
-            {...{
-              model,
-              size,
-              style: {
-                marginRight: lastChild ? 0 : -4,
-                ...(lastChild || filtered.length === 1
-                  ? {}
-                  : { clipPath: `url(#${clipPathId(size)})` }),
-              },
-            }}
-          />
-        );
-      })}
-      <FacepileClip size={size} />
+      {users.slice(0, limit).map((user) => (
+        <AvatarWrapper key={user.id}>{renderAvatar(user)}</AvatarWrapper>
+      ))}
    </Avatars>
  );
 }

-function FacepileClip({ size }: { size: number }) {
-  return (
-    <SVG
-      width="25"
-      height="28"
-      viewBox="0 0 25 28"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <clipPath id={clipPathId(size)}>
-        <path
-          transform={size !== 28 ? `scale(${size / 28})` : ""}
-          d="M14.0633 0.5C18.1978 0.5 21.8994 2.34071 24.3876 5.24462C22.8709 7.81315 22.0012 10.8061 22.0012 14C22.0012 17.1939 22.8709 20.1868 24.3876 22.7554C21.8994 25.6593 18.1978 27.5 14.0633 27.5C6.57035 27.5 0.5 21.4537 0.5 14C0.5 6.54628 6.57035 0.5 14.0633 0.5Z"
-        />
-      </clipPath>
-    </SVG>
-  );
+function DefaultAvatar(user: User) {
+  return <Avatar model={user} size={32} />;
 }

-function clipPathId(size: number) {
-  return `facepile-${size}`;
-}
+const AvatarWrapper = styled.div`
+  margin-right: -8px;

-const SVG = styled.svg`
-  position: absolute;
-  top: 0;
-  left: 0;
+  &:first-child {
+    margin-right: 0;
+  }
+`;
+
+const More = styled.div<{ size: number }>`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-width: ${(props) => props.size}px;
+  height: ${(props) => props.size}px;
+  border-radius: 100%;
+  background: ${(props) => props.theme.slate};
+  color: ${s("text")};
+  border: 2px solid ${s("background")};
+  text-align: center;
+  font-size: 11px;
+  font-weight: 600;
 `;

 const Avatars = styled(Flex)`
@@ -1,249 +1,86 @@
-import deburr from "lodash/deburr";
 import * as React from "react";
-import { useTranslation } from "react-i18next";
 import { useMenuState, MenuButton } from "reakit/Menu";
 import styled from "styled-components";
 import { s } from "@shared/styles";
-import type { FetchPageParams } from "~/stores/base/Store";
 import Button, { Inner } from "~/components/Button";
 import ContextMenu from "~/components/ContextMenu";
 import MenuItem from "~/components/ContextMenu/MenuItem";
 import Text from "~/components/Text";
-import Input, { NativeInput, Outline } from "./Input";
-import PaginatedList, { PaginatedItem } from "./PaginatedList";

-interface TFilterOption extends PaginatedItem {
+type TFilterOption = {
  key: string;
  label: string;
  note?: string;
  icon?: React.ReactNode;
-}
+};

 type Props = {
  options: TFilterOption[];
-  selectedKeys: (string | null | undefined)[];
+  activeKey: string | null | undefined;
  defaultLabel?: string;
  selectedPrefix?: string;
  className?: string;
  onSelect: (key: string | null | undefined) => void;
-  showFilter?: boolean;
-  fetchQuery?: (options: FetchPageParams) => Promise<PaginatedItem[]>;
-  fetchQueryOptions?: Record<string, string>;
 };

 const FilterOptions = ({
  options,
-  selectedKeys = [],
+  activeKey = "",
  defaultLabel = "Filter options",
  selectedPrefix = "",
  className,
  onSelect,
-  showFilter,
-  fetchQuery,
-  fetchQueryOptions,
 }: Props) => {
-  const { t } = useTranslation();
-  const searchInputRef = React.useRef<HTMLInputElement>(null);
-  const listRef = React.useRef<HTMLDivElement | null>(null);
  const menu = useMenuState({
-    modal: false,
+    modal: true,
  });
-  const selectedItems = options.filter((option) =>
-    selectedKeys.includes(option.key)
-  );
-  const [query, setQuery] = React.useState("");
+  const selected =
+    options.find((option) => option.key === activeKey) || options[0];

-  const selectedLabel = selectedItems.length
-    ? selectedItems
-        .map((selected) => `${selectedPrefix} ${selected.label}`)
-        .join(", ")
-    : "";
-
-  const renderItem = React.useCallback(
-    (option: TFilterOption) => (
-      <MenuItem
-        key={option.key}
-        onClick={() => {
-          onSelect(option.key);
-          menu.hide();
-        }}
-        selected={selectedKeys.includes(option.key)}
-        {...menu}
-      >
-        {option.icon && <Icon>{option.icon}</Icon>}
-        {option.note ? (
-          <LabelWithNote>
-            {option.label}
-            <Note>{option.note}</Note>
-          </LabelWithNote>
-        ) : (
-          option.label
-        )}
-      </MenuItem>
-    ),
-    [menu, onSelect, selectedKeys]
-  );
-
-  const handleFilter = (ev: React.ChangeEvent<HTMLInputElement>) => {
-    setQuery(ev.target.value);
-  };
-
-  const filteredOptions = React.useMemo(() => {
-    const normalizedQuery = deburr(query.toLowerCase());
-
-    return query
-      ? options
-          .filter((option) =>
-            deburr(option.label).toLowerCase().includes(normalizedQuery)
-          )
-          // sort options starting with query first
-          .sort((a, b) => {
-            const aStartsWith = deburr(a.label)
-              .toLowerCase()
-              .startsWith(normalizedQuery);
-            const bStartsWith = deburr(b.label)
-              .toLowerCase()
-              .startsWith(normalizedQuery);
-
-            if (aStartsWith && !bStartsWith) {
-              return -1;
-            }
-            if (!aStartsWith && bStartsWith) {
-              return 1;
-            }
-            return 0;
-          })
-      : options;
-  }, [options, query]);
-
-  const handleKeyDown = React.useCallback(
-    (ev: React.KeyboardEvent) => {
-      if (ev.nativeEvent.isComposing || ev.shiftKey) {
-        return;
-      }
-
-      switch (ev.key) {
-        case "Escape":
-          menu.hide();
-          break;
-        case "Enter":
-          if (filteredOptions.length === 1) {
-            ev.preventDefault();
-            onSelect(filteredOptions[0].key);
-            menu.hide();
-          }
-          break;
-        case "ArrowDown":
-          ev.preventDefault();
-          (listRef.current?.firstElementChild as HTMLElement)?.focus();
-          break;
-        default:
-          break;
-      }
-    },
-    [filteredOptions, menu, onSelect]
-  );
-
-  const handleEscapeFromList = React.useCallback((ev: React.KeyboardEvent) => {
-    searchInputRef.current?.focus();
-
-    if (ev.key === "Backspace") {
-      setQuery((prev) => prev.slice(0, -1));
-    }
-  }, []);
-
-  React.useEffect(() => {
-    if (menu.visible) {
-      searchInputRef.current?.focus();
-    } else {
-      setQuery("");
-    }
-  }, [menu.visible]);
-
-  const showFilterInput = showFilter || options.length > 10;
+  const selectedLabel = selected ? `${selectedPrefix} ${selected.label}` : "";

  return (
-    <div>
+    <Wrapper>
      <MenuButton {...menu}>
        {(props) => (
          <StyledButton {...props} className={className} neutral disclosure>
-            {selectedItems.length ? selectedLabel : defaultLabel}
+            {activeKey ? selectedLabel : defaultLabel}
          </StyledButton>
        )}
      </MenuButton>
-      <ContextMenu aria-label={defaultLabel} minHeight={66} {...menu}>
-        <PaginatedList
-          listRef={listRef}
-          options={{ query, ...fetchQueryOptions }}
-          items={filteredOptions}
-          fetch={fetchQuery}
-          renderItem={renderItem}
-          onEscape={handleEscapeFromList}
-          heading={showFilterInput ? <Spacer /> : undefined}
-          empty={<Empty />}
-        />
-        {showFilterInput && (
-          <SearchInput
-            ref={searchInputRef}
-            value={query}
-            onChange={handleFilter}
-            onKeyDown={handleKeyDown}
-            placeholder={`${t("Filter")}…`}
-            autoFocus
-          />
-        )}
+      <ContextMenu aria-label={defaultLabel} {...menu}>
+        {options.map((option) => (
+          <MenuItem
+            key={option.key}
+            onClick={() => {
+              onSelect(option.key);
+              menu.hide();
+            }}
+            selected={option.key === activeKey}
+            {...menu}
+          >
+            {option.icon && <Icon>{option.icon}</Icon>}
+            {option.note ? (
+              <LabelWithNote>
+                {option.label}
+                <Note>{option.note}</Note>
+              </LabelWithNote>
+            ) : (
+              option.label
+            )}
+          </MenuItem>
+        ))}
      </ContextMenu>
-    </div>
+    </Wrapper>
  );
 };

-const Empty = () => {
-  const { t } = useTranslation();
-
-  return (
-    <>
-      <Spacer />
-      <Text size="small" type="tertiary" style={{ marginLeft: 6 }}>
-        {t("No results")}
-      </Text>
-    </>
-  );
-};
-
-const Spacer = styled.div`
-  height: 30px;
-`;
-
-const SearchInput = styled(Input)`
-  position: absolute;
-  width: 100%;
-  border: none;
-  border-top-left-radius: 6px;
-  border-top-right-radius: 6px;
-  overflow: hidden;
-  margin: 0;
-  top: 0;
-  left: 0;
-  right: 0;
-
-  ${Outline} {
-    border: none;
-    border-radius: 0;
-    border-bottom: 1px solid ${s("divider")};
-    background: ${s("menuBackground")};
-  }
-
-  ${NativeInput} {
-    font-size: 14px;
-  }
-`;
-
 const Note = styled(Text)`
-  display: block;
-  margin: 2px 0;
+  margin-top: 2px;
+  margin-bottom: 0;
  line-height: 1.2em;
  font-size: 14px;
-  font-weight: 500;
+  font-weight: 400;
  color: ${s("textTertiary")};
 `;

@@ -256,7 +93,7 @@ const LabelWithNote = styled.div`
  }
 `;

-export const StyledButton = styled(Button)`
+const StyledButton = styled(Button)`
  box-shadow: none;
  text-transform: none;
  border-color: transparent;
@@ -278,4 +115,8 @@ const Icon = styled.div`
  height: 18px;
 `;

+const Wrapper = styled.div`
+  margin-right: 8px;
+`;
+
 export default FilterOptions;
@@ -1,3 +1,38 @@
-import Flex from "@shared/components/Flex";
+import { CSSProperties } from "react";
+import styled from "styled-components";
+
+type JustifyValues = CSSProperties["justifyContent"];
+
+type AlignValues = CSSProperties["alignItems"];
+
+const Flex = styled.div<{
+  auto?: boolean;
+  column?: boolean;
+  align?: AlignValues;
+  justify?: JustifyValues;
+  wrap?: boolean;
+  shrink?: boolean;
+  reverse?: boolean;
+  gap?: number;
+}>`
+  display: flex;
+  flex: ${({ auto }) => (auto ? "1 1 auto" : "initial")};
+  flex-direction: ${({ column, reverse }) =>
+    reverse
+      ? column
+        ? "column-reverse"
+        : "row-reverse"
+      : column
+      ? "column"
+      : "row"};
+  align-items: ${({ align }) => align};
+  justify-content: ${({ justify }) => justify};
+  flex-wrap: ${({ wrap }) => (wrap ? "wrap" : "initial")};
+  flex-shrink: ${({ shrink }) =>
+    shrink === true ? 1 : shrink === false ? 0 : "initial"};
+  gap: ${({ gap }) => (gap ? `${gap}px` : "initial")};
+  min-height: 0;
+  min-width: 0;
+`;

 export default Flex;
@@ -0,0 +1,94 @@
+import { observer } from "mobx-react";
+import { GroupIcon } from "outline-icons";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import styled from "styled-components";
+import { MAX_AVATAR_DISPLAY } from "@shared/constants";
+import { s } from "@shared/styles";
+import CollectionGroupMembership from "~/models/CollectionGroupMembership";
+import Group from "~/models/Group";
+import GroupMembers from "~/scenes/GroupMembers";
+import Facepile from "~/components/Facepile";
+import Flex from "~/components/Flex";
+import ListItem from "~/components/List/Item";
+import Modal from "~/components/Modal";
+import useBoolean from "~/hooks/useBoolean";
+import useStores from "~/hooks/useStores";
+import { hover } from "~/styles";
+import NudeButton from "./NudeButton";
+
+type Props = {
+  group: Group;
+  membership?: CollectionGroupMembership;
+  showFacepile?: boolean;
+  showAvatar?: boolean;
+  renderActions: (params: { openMembersModal: () => void }) => React.ReactNode;
+};
+
+function GroupListItem({ group, showFacepile, renderActions }: Props) {
+  const { groupMemberships } = useStores();
+  const { t } = useTranslation();
+  const [membersModalOpen, setMembersModalOpen, setMembersModalClosed] =
+    useBoolean();
+  const memberCount = group.memberCount;
+  const membershipsInGroup = groupMemberships.inGroup(group.id);
+  const users = membershipsInGroup
+    .slice(0, MAX_AVATAR_DISPLAY)
+    .map((gm) => gm.user);
+  const overflow = memberCount - users.length;
+
+  return (
+    <>
+      <ListItem
+        image={
+          <Image>
+            <GroupIcon size={24} />
+          </Image>
+        }
+        title={<Title onClick={setMembersModalOpen}>{group.name}</Title>}
+        subtitle={t("{{ count }} member", { count: memberCount })}
+        actions={
+          <Flex align="center" gap={8}>
+            {showFacepile && (
+              <NudeButton
+                width="auto"
+                height="auto"
+                onClick={setMembersModalOpen}
+              >
+                <Facepile users={users} overflow={overflow} />
+              </NudeButton>
+            )}
+            {renderActions({
+              openMembersModal: setMembersModalOpen,
+            })}
+          </Flex>
+        }
+      />
+      <Modal
+        title={t("Group members")}
+        onRequestClose={setMembersModalClosed}
+        isOpen={membersModalOpen}
+      >
+        <GroupMembers group={group} />
+      </Modal>
+    </>
+  );
+}
+
+const Image = styled(Flex)`
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  background: ${s("secondaryBackground")};
+  border-radius: 32px;
+`;
+
+const Title = styled.span`
+  &: ${hover} {
+    text-decoration: underline;
+    cursor: var(--pointer);
+  }
+`;
+
+export default observer(GroupListItem);
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Tom Moor	8e9beac59f	test	2023-08-08 23:12:41 -04:00
Tom Moor	a0f7c76405	Add support for SSL in development	2023-08-08 22:46:31 -04:00