chore: Extend use of Event.createFromContext

2026-06-13 11:25:03 +03:00 · 2024-06-08 17:50:27 -04:00
1089 changed files with 27138 additions and 54086 deletions
@@ -12,7 +12,7 @@
        "legacy": true
      }
    ],
-    "@babel/plugin-transform-class-properties",
+    "@babel/plugin-proposal-class-properties",
    [
      "transform-inline-environment-variables",
      {
@@ -60,4 +60,4 @@
      ]
    }
  }
-}
+}
@@ -0,0 +1,182 @@
+version: 2.1
+
+defaults: &defaults
+  working_directory: ~/outline
+  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
+  resource_class: large
+  environment:
+    NODE_ENV: test
+    DATABASE_URL: postgres://postgres:password@localhost:5432/circle_test
+    URL: http://localhost:3000
+    NODE_OPTIONS: --max-old-space-size=8000
+
+executors:
+  docker-publisher:
+    environment:
+      IMAGE_NAME: outlinewiki/outline
+      BASE_IMAGE_NAME: outlinewiki/outline-base
+    docker:
+      - image: circleci/buildpack-deps:stretch
+
+jobs:
+  build:
+    <<: *defaults
+    steps:
+      - checkout
+      - restore_cache:
+          key: dependency-cache-v1-{{ checksum "package.json" }}
+      - run:
+          name: install-deps
+          command: yarn install --frozen-lockfile
+      - save_cache:
+          key: dependency-cache-v1-{{ checksum "package.json" }}
+          paths:
+            - ./node_modules
+  lint:
+    <<: *defaults
+    steps:
+      - checkout
+      - restore_cache:
+          key: dependency-cache-v1-{{ checksum "package.json" }}
+      - run:
+          name: lint
+          command: yarn lint
+  types:
+    <<: *defaults
+    steps:
+      - checkout
+      - restore_cache:
+          key: dependency-cache-v1-{{ checksum "package.json" }}
+      - run:
+          name: typescript
+          command: yarn tsc
+  test-app:
+    <<: *defaults
+    steps:
+      - checkout
+      - restore_cache:
+          key: dependency-cache-v1-{{ checksum "package.json" }}
+      - run:
+          name: test
+          command: yarn test:app
+  test-shared:
+    <<: *defaults
+    steps:
+      - checkout
+      - restore_cache:
+          key: dependency-cache-v1-{{ checksum "package.json" }}
+      - run:
+          name: test
+          command: yarn test:shared
+  test-server:
+    <<: *defaults
+    parallelism: 3
+    steps:
+      - checkout
+      - restore_cache:
+          key: dependency-cache-v1-{{ checksum "package.json" }}
+      - run:
+          name: migrate
+          command: ./node_modules/.bin/sequelize db:migrate
+      - run:
+          name: test
+          command: |
+            TESTFILES=$(circleci tests glob "server/**/*.test.ts" | circleci tests split)
+            yarn test --maxWorkers=2 $TESTFILES
+  bundle-size:
+    <<: *defaults
+    environment:
+      NODE_ENV: production
+    steps:
+      - checkout
+      - restore_cache:
+          key: dependency-cache-v1-{{ checksum "package.json" }}
+      - run:
+          name: build-vite
+          command: yarn vite:build
+      - run:
+          name: Send bundle stats to RelativeCI
+          command: npx relative-ci-agent
+  build-image:
+    executor: docker-publisher
+    steps:
+      - checkout
+      - setup_remote_docker:
+          version: 20.10.6
+      - run:
+          name: Install Docker buildx
+          command: |
+            mkdir -p ~/.docker/cli-plugins
+            url="https://github.com/docker/buildx/releases/download/v0.8.0/buildx-v0.8.0.linux-amd64"
+            curl -sSL -o ~/.docker/cli-plugins/docker-buildx $url
+            chmod a+x ~/.docker/cli-plugins/docker-buildx
+      - run:
+          name: Enable Docker buildx
+          command: export DOCKER_CLI_EXPERIMENTAL=enabled
+      - run:
+          name: Initialize Docker buildx
+          command: |
+            docker buildx install
+            docker context create docker-multiarch
+            docker run --rm --privileged multiarch/qemu-user-static --reset -p yes
+            docker buildx create --name docker-multiarch --platform linux/amd64,linux/arm/v6,linux/arm/v7,linux/arm64/v8,linux/ppc64le,linux/s390x docker-multiarch
+            docker buildx inspect --builder docker-multiarch --bootstrap
+            docker buildx use docker-multiarch
+      - run:
+          name: Build base image
+          command: docker build -f Dockerfile.base -t $BASE_IMAGE_NAME:latest --load .
+      - run:
+          name: Login to Docker Hub
+          command: echo "$DOCKERHUB_PASS" | docker login -u "$DOCKERHUB_USERNAME" --password-stdin
+      - run:
+          name: Publish base Docker Image to Docker Hub
+          command: docker push $BASE_IMAGE_NAME:latest
+      - run:
+          name: Build and push Docker image
+          command: |
+            if [[ "$CIRCLE_TAG" == *"-"* ]]; then
+              docker buildx build -t $IMAGE_NAME:${CIRCLE_TAG/v/''} --platform linux/amd64,linux/arm/v6,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/v6,linux/arm/v7,linux/arm64/v8,linux/ppc64le,linux/s390x --push .
+            fi
+
+workflows:
+  version: 2
+  all:
+    jobs:
+      - build
+      - lint:
+          requires:
+            - build
+      - test-server:
+          requires:
+            - build
+      - test-shared:
+          requires:
+            - build
+      - test-app:
+          requires:
+            - build
+      - types:
+          requires:
+            - build
+      - bundle-size:
+          requires:
+            - build
+            - types
+
+  build-docker:
+    jobs:
+      - build-image:
+          filters:
+            tags:
+              only: /^v.*/
+            branches:
+              ignore: /.*/
@@ -0,0 +1,7 @@
+#!/usr/bin/env bash
+curl --user ${CIRCLE_TOKEN}: \
+    --request POST \
+    --form revision=<ENTER COMMIT SHA HERE>\
+    --form config=@config.yml \
+    --form notify=false \
+        https://circleci.com/api/v1.1/project/github/outline/outline/tree/master
@@ -1,8 +1,5 @@
 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
@@ -12,14 +12,14 @@ 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_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.
@@ -127,26 +127,6 @@ 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 ––––––––––––––––

 # Base64 encoded private key and certificate for HTTPS termination. This is only
@@ -189,10 +169,6 @@ SLACK_VERIFICATION_TOKEN=your_token
 SLACK_APP_ID=A0XXXXXXX
 SLACK_MESSAGE_ACTIONS=true

-# For Dropbox integration, follow these instructions to get the key https://www.dropbox.com/developers/embedder#setup
-# and do not forget to whitelist your domain name in the app settings
-DROPBOX_APP_KEY=
-
 # Optionally enable Sentry (sentry.io) to track errors and performance,
 # and optionally add a Sentry proxy tunnel for bypassing ad blockers in the UI:
 # https://docs.sentry.io/platforms/javascript/troubleshooting/#using-the-tunnel-option)
@@ -41,7 +41,6 @@
    "@typescript-eslint/no-shadow": [
      "warn",
      {
-        "allow": ["transaction"],
        "hoist": "all",
        "ignoreTypeValueShadow": true
      }
@@ -140,4 +139,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
@@ -1,163 +0,0 @@
-name: CI
-
-on:
-  push:
-    branches: [ main ]
-  pull_request:
-    branches: [ main ]
-
-env:
-  NODE_ENV: test
-  DATABASE_URL: postgres://postgres:password@localhost:5432/outline_test
-  REDIS_URL: redis://127.0.0.1:6379
-  URL: http://localhost:3000
-  NODE_OPTIONS: --max-old-space-size=8000
-  SECRET_KEY: F0E5AD933D7F6FD8F4DBB3E038C501C052DC0593C686D21ACB30AE205D2F634B
-  UTILS_SECRET: 123456
-  SLACK_VERIFICATION_TOKEN: 123456
-  SMTP_USERNAME: localhost
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node-version: [20.x]
-
-    steps:
-    - uses: actions/checkout@v4
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v4
-      with:
-        node-version: ${{ matrix.node-version }}
-        cache: 'yarn'
-    
-    - name: Install dependencies
-      run: yarn install --frozen-lockfile
-
-  lint:
-    needs: build
-    runs-on: ubuntu-latest
-    steps:
-    - uses: actions/checkout@v4
-    - uses: actions/setup-node@v4
-      with:
-        node-version: 20.x
-        cache: 'yarn'
-    - run: yarn install --frozen-lockfile
-    - run: yarn lint
-
-  types:
-    needs: build
-    runs-on: ubuntu-latest
-    steps:
-    - uses: actions/checkout@v4
-    - uses: actions/setup-node@v4
-      with:
-        node-version: 20.x
-        cache: 'yarn'
-    - run: yarn install --frozen-lockfile
-    - run: yarn tsc
-
-  changes:
-    runs-on: ubuntu-latest
-    outputs:
-      server: ${{ steps.filter.outputs.server }}
-    steps:
-      - uses: actions/checkout@v4
-      - uses: dorny/paths-filter@v2
-        id: filter
-        with:
-          filters: |
-            server:
-              - 'server/**'
-              - 'shared/**'
-              - 'package.json'
-              - 'yarn.lock'
-            app:
-              - 'app/**'
-              - 'shared/**'
-              - 'package.json'
-              - 'yarn.lock'
-
-  test:
-    needs: build
-    if: ${{ needs.changes.outputs.app == 'true' }}
-    runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        test-group: [app, shared]
-    steps:
-    - uses: actions/checkout@v4
-    - uses: actions/setup-node@v4
-      with:
-        node-version: 20.x
-        cache: 'yarn'
-    - run: yarn install --frozen-lockfile
-    - run: yarn test:${{ matrix.test-group }}
-
-  test-server:
-    needs: [build, changes]
-    if: ${{ needs.changes.outputs.server == 'true' }}
-    runs-on: ubuntu-latest
-    services:
-      postgres:
-        image: postgres:14.2
-        env:
-          POSTGRES_USER: postgres
-          POSTGRES_PASSWORD: password
-          POSTGRES_DB: outline_test
-        ports:
-          - 5432:5432
-        options: >-
-          --health-cmd pg_isready
-          --health-interval 10s
-          --health-timeout 5s
-          --health-retries 5
-      
-      redis:
-        image: redis:5.0
-        ports:
-          - 6379:6379
-        options: >-
-          --health-cmd "redis-cli ping"
-          --health-interval 10s
-          --health-timeout 5s
-          --health-retries 5
-
-    strategy:
-      matrix:
-        shard: [1, 2, 3]
-    
-    steps:
-    - uses: actions/checkout@v4
-    - uses: actions/setup-node@v4
-      with:
-        node-version: 20.x
-        cache: 'yarn'
-    - run: yarn install --frozen-lockfile
-    - run: yarn sequelize db:migrate
-    - name: Run server tests
-      run: |
-        TESTFILES=$(find . -name "*.test.ts" -path "*/server/*" | sort | split -n -d -l $(($(find . -name "*.test.ts" -path "*/server/*" | wc -l)/${{ matrix.shard }})) - | sed -n "${{ matrix.shard }}p")
-        yarn test --maxWorkers=2 $TESTFILES
-
-  bundle-size:
-    needs: [build, types]
-    if: ${{ needs.changes.outputs.app == 'true' }}
-    runs-on: ubuntu-latest
-    steps:
-    - uses: actions/checkout@v4
-    - uses: actions/setup-node@v4
-      with:
-        node-version: 20.x
-        cache: 'yarn'
-    - run: yarn install --frozen-lockfile
-    - name: Set environment to production
-      run: echo "NODE_ENV=production" >> $GITHUB_ENV
-    - run: yarn vite:build
-    - name: Send bundle stats to RelativeCI
-      uses: relative-ci/agent-action@v2
-      with:
-        key: ${{ secrets.RELATIVE_CI_KEY }}
-        token: ${{ secrets.GITHUB_TOKEN }}
@@ -1,52 +0,0 @@
-name: Docker build
-
-on:
-  push:
-    tags:
-      - 'v*'
-
-env:
-  IMAGE_NAME: outlinewiki/outline
-  BASE_IMAGE_NAME: outlinewiki/outline-base
-
-jobs:
-  build-and-push:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v3
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-
-      - name: Login to Docker Hub
-        uses: docker/login-action@v3
-        with:
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_PASSWORD }}
-
-      - name: Build and push base image
-        uses: docker/build-push-action@v5
-        with:
-          context: .
-          file: Dockerfile.base
-          push: true
-          tags: ${{ env.BASE_IMAGE_NAME }}:latest
-          platforms: linux/amd64,linux/arm/v7,linux/arm64/v8,linux/ppc64le,linux/s390x
-
-      - name: Extract version
-        id: version
-        run: echo "VERSION=${GITHUB_REF#refs/tags/v}" >> $GITHUB_OUTPUT
-
-      - name: Build and push main image
-        uses: docker/build-push-action@v5
-        with:
-          context: .
-          push: true
-          platforms: linux/amd64,linux/arm/v7,linux/arm64/v8,linux/ppc64le,linux/s390x
-          tags: |
-            ${{ env.IMAGE_NAME }}:latest
-            ${{ env.IMAGE_NAME }}:${{ steps.version.outputs.VERSION }}
@@ -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.*, ',') }}
@@ -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:20-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,19 +22,13 @@ 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 && \
+RUN addgroup -g 1001 -S nodejs && \
+  adduser -S nodejs -u 1001 && \
  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
+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"
@@ -41,7 +37,5 @@ VOLUME /var/lib/outline/data

 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:20-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.1-3
-                      The Licensed Work is (c) 2025 General Outline, Inc.
+Licensed Work:        Outline 0.71.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-22
+Change Date:          2027-08-18

 Change License:       Apache License, Version 2.0

@@ -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": {
@@ -218,4 +212,4 @@
      "required": false
    }
  }
-}
+}
@@ -1,7 +1,7 @@
 import { PlusIcon } from "outline-icons";
 import * as React from "react";
 import stores from "~/stores";
-import ApiKeyNew from "~/scenes/ApiKeyNew";
+import APIKeyNew from "~/scenes/APIKeyNew";
 import { createAction } from "..";
 import { SettingsSection } from "../sections";

@@ -19,7 +19,7 @@ export const createApiKey = createAction({

    stores.dialogs.openModal({
      title: t("New API key"),
-      content: <ApiKeyNew onSubmit={stores.dialogs.closeAllModals} />,
+      content: <APIKeyNew onSubmit={stores.dialogs.closeAllModals} />,
    });
  },
 });
@@ -1,34 +1,27 @@
 import {
-  ArchiveIcon,
  CollectionIcon,
  EditIcon,
  PadlockIcon,
  PlusIcon,
-  RestoreIcon,
  SearchIcon,
-  ShapesIcon,
  StarredIcon,
-  SubscribeIcon,
  TrashIcon,
  UnstarredIcon,
-  UnsubscribeIcon,
 } from "outline-icons";
 import * as React from "react";
-import { toast } from "sonner";
 import stores from "~/stores";
 import Collection from "~/models/Collection";
 import { CollectionEdit } from "~/components/Collection/CollectionEdit";
 import { CollectionNew } from "~/components/Collection/CollectionNew";
 import CollectionDeleteDialog from "~/components/CollectionDeleteDialog";
-import ConfirmationDialog from "~/components/ConfirmationDialog";
 import 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 { CollectionSection } from "~/actions/sections";
 import { setPersistedState } from "~/hooks/usePersistedState";
 import history from "~/utils/history";
-import { newTemplatePath, searchPath } from "~/utils/routeHelpers";
+import { searchPath } from "~/utils/routeHelpers";

 const ColorCollectionIcon = ({ collection }: { collection: Collection }) => (
  <DynamicCollectionIcon collection={collection} />
@@ -76,9 +69,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 }) => {
@@ -102,12 +95,12 @@ 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 }) => {
+  perform: ({ t, stores, activeCollectionId }) => {
    if (!activeCollectionId) {
      return;
    }
@@ -118,7 +111,6 @@ export const editCollectionPermissions = createAction({

    stores.dialogs.openModal({
      title: t("Share this collection"),
-      style: { marginBottom: -12 },
      content: (
        <SharePopover
          collection={collection}
@@ -133,22 +125,9 @@ export const editCollectionPermissions = createAction({
 export const searchInCollection = createAction({
  name: ({ t }) => t("Search in collection"),
  analyticsName: "Search collection",
-  section: ActiveCollectionSection,
+  section: CollectionSection,
  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;
-  },
-
+  visible: ({ activeCollectionId }) => !!activeCollectionId,
  perform: ({ activeCollectionId }) => {
    history.push(searchPath(undefined, { collectionId: activeCollectionId }));
  },
@@ -157,10 +136,10 @@ export const searchInCollection = createAction({
 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;
    }
@@ -170,7 +149,7 @@ export const starCollection = createAction({
      stores.policies.abilities(activeCollectionId).star
    );
  },
-  perform: async ({ activeCollectionId }) => {
+  perform: async ({ activeCollectionId, stores }) => {
    if (!activeCollectionId) {
      return;
    }
@@ -184,10 +163,10 @@ export const starCollection = createAction({
 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;
    }
@@ -197,7 +176,7 @@ export const unstarCollection = createAction({
      stores.policies.abilities(activeCollectionId).unstar
    );
  },
-  perform: async ({ activeCollectionId }) => {
+  perform: async ({ activeCollectionId, stores }) => {
    if (!activeCollectionId) {
      return;
    }
@@ -207,145 +186,19 @@ export const unstarCollection = createAction({
  },
 });

-export const subscribeCollection = createAction({
-  name: ({ t }) => t("Subscribe"),
-  analyticsName: "Subscribe to collection",
-  section: ActiveCollectionSection,
-  icon: <SubscribeIcon />,
-  visible: ({ activeCollectionId, stores }) => {
-    if (!activeCollectionId) {
-      return false;
-    }
-
-    const collection = stores.collections.get(activeCollectionId);
-
-    return (
-      !collection?.isSubscribed &&
-      stores.policies.abilities(activeCollectionId).subscribe
-    );
-  },
-  perform: async ({ activeCollectionId, stores, t }) => {
-    if (!activeCollectionId) {
-      return;
-    }
-
-    const collection = stores.collections.get(activeCollectionId);
-
-    await collection?.subscribe();
-
-    toast.success(t("Subscribed to document notifications"));
-  },
-});
-
-export const unsubscribeCollection = createAction({
-  name: ({ t }) => t("Unsubscribe"),
-  analyticsName: "Unsubscribe from collection",
-  section: ActiveCollectionSection,
-  icon: <UnsubscribeIcon />,
-  visible: ({ activeCollectionId, stores }) => {
-    if (!activeCollectionId) {
-      return false;
-    }
-
-    const collection = stores.collections.get(activeCollectionId);
-
-    return (
-      !!collection?.isSubscribed &&
-      stores.policies.abilities(activeCollectionId).unsubscribe
-    );
-  },
-  perform: async ({ activeCollectionId, currentUserId, stores, t }) => {
-    if (!activeCollectionId || !currentUserId) {
-      return;
-    }
-
-    const collection = stores.collections.get(activeCollectionId);
-
-    await collection?.unsubscribe();
-
-    toast.success(t("Unsubscribed from document notifications"));
-  },
-});
-
-export const archiveCollection = createAction({
-  name: ({ t }) => `${t("Archive")}…`,
-  analyticsName: "Archive collection",
-  section: CollectionSection,
-  icon: <ArchiveIcon />,
-  visible: ({ activeCollectionId, stores }) => {
-    if (!activeCollectionId) {
-      return false;
-    }
-    return !!stores.policies.abilities(activeCollectionId).archive;
-  },
-  perform: async ({ activeCollectionId, stores, t }) => {
-    const { dialogs, collections } = stores;
-    if (!activeCollectionId) {
-      return;
-    }
-    const collection = collections.get(activeCollectionId);
-    if (!collection) {
-      return;
-    }
-
-    dialogs.openModal({
-      title: t("Archive collection"),
-      content: (
-        <ConfirmationDialog
-          onSubmit={async () => {
-            await collection.archive();
-            toast.success(t("Collection archived"));
-          }}
-          submitText={t("Archive")}
-          savingText={`${t("Archiving")}…`}
-        >
-          {t(
-            "Archiving this collection will also archive all documents within it. Documents from the collection will no longer be visible in search results."
-          )}
-        </ConfirmationDialog>
-      ),
-    });
-  },
-});
-
-export const restoreCollection = createAction({
-  name: ({ t }) => t("Restore"),
-  analyticsName: "Restore collection",
-  section: CollectionSection,
-  icon: <RestoreIcon />,
-  visible: ({ activeCollectionId, stores }) => {
-    if (!activeCollectionId) {
-      return false;
-    }
-    return !!stores.policies.abilities(activeCollectionId).restore;
-  },
-  perform: async ({ activeCollectionId, stores, t }) => {
-    if (!activeCollectionId) {
-      return;
-    }
-    const collection = stores.collections.get(activeCollectionId);
-    if (!collection) {
-      return;
-    }
-
-    await collection.restore();
-    toast.success(t("Collection restored"));
-  },
-});
-
 export const deleteCollection = createAction({
  name: ({ t }) => `${t("Delete")}…`,
  analyticsName: "Delete collection",
-  section: ActiveCollectionSection,
+  section: CollectionSection,
  dangerous: true,
  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;
    }
@@ -367,33 +220,10 @@ 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,
  starCollection,
  unstarCollection,
-  subscribeCollection,
-  unsubscribeCollection,
  deleteCollection,
 ];
@@ -1,123 +0,0 @@
-import { DoneIcon, SmileyIcon, TrashIcon } from "outline-icons";
-import * as React from "react";
-import { toast } from "sonner";
-import stores from "~/stores";
-import Comment from "~/models/Comment";
-import CommentDeleteDialog from "~/components/CommentDeleteDialog";
-import ViewReactionsDialog from "~/components/Reactions/ViewReactionsDialog";
-import history from "~/utils/history";
-import { createAction } from "..";
-import { DocumentSection } from "../sections";
-
-export const deleteCommentFactory = ({
-  comment,
-  onDelete,
-}: {
-  comment: Comment;
-  onDelete: () => void;
-}) =>
-  createAction({
-    name: ({ t }) => `${t("Delete")}…`,
-    analyticsName: "Delete comment",
-    section: DocumentSection,
-    icon: <TrashIcon />,
-    keywords: "trash",
-    dangerous: true,
-    visible: () => stores.policies.abilities(comment.id).delete,
-    perform: ({ t, event }) => {
-      event?.preventDefault();
-      event?.stopPropagation();
-
-      stores.dialogs.openModal({
-        title: t("Delete comment"),
-        content: <CommentDeleteDialog comment={comment} onSubmit={onDelete} />,
-      });
-    },
-  });
-
-export const resolveCommentFactory = ({
-  comment,
-  onResolve,
-}: {
-  comment: Comment;
-  onResolve: () => void;
-}) =>
-  createAction({
-    name: ({ t }) => t("Mark as resolved"),
-    analyticsName: "Resolve thread",
-    section: DocumentSection,
-    icon: <DoneIcon outline />,
-    visible: () =>
-      stores.policies.abilities(comment.id).resolve &&
-      stores.policies.abilities(comment.documentId).update,
-    perform: async ({ t }) => {
-      await comment.resolve();
-
-      const locationState = history.location.state as Record<string, unknown>;
-      history.replace({
-        ...history.location,
-        state: {
-          sidebarContext: locationState["sidebarContext"],
-          commentId: undefined,
-        },
-      });
-
-      onResolve();
-      toast.success(t("Thread resolved"));
-    },
-  });
-
-export const unresolveCommentFactory = ({
-  comment,
-  onUnresolve,
-}: {
-  comment: Comment;
-  onUnresolve: () => void;
-}) =>
-  createAction({
-    name: ({ t }) => t("Mark as unresolved"),
-    analyticsName: "Unresolve thread",
-    section: DocumentSection,
-    icon: <DoneIcon outline />,
-    visible: () =>
-      stores.policies.abilities(comment.id).unresolve &&
-      stores.policies.abilities(comment.documentId).update,
-    perform: async () => {
-      await comment.unresolve();
-
-      const locationState = history.location.state as Record<string, unknown>;
-      history.replace({
-        ...history.location,
-        state: {
-          sidebarContext: locationState["sidebarContext"],
-          commentId: undefined,
-        },
-      });
-
-      onUnresolve();
-    },
-  });
-
-export const viewCommentReactionsFactory = ({
-  comment,
-}: {
-  comment: Comment;
-}) =>
-  createAction({
-    name: ({ t }) => `${t("View reactions")}`,
-    analyticsName: "View comment reactions",
-    section: DocumentSection,
-    icon: <SmileyIcon />,
-    visible: () =>
-      stores.policies.abilities(comment.id).read &&
-      comment.reactions.length > 0,
-    perform: ({ t, event }) => {
-      event?.preventDefault();
-      event?.stopPropagation();
-
-      stores.dialogs.openModal({
-        title: t("Reactions"),
-        content: <ViewReactionsDialog model={comment} />,
-      });
-    },
-  });
@@ -2,7 +2,6 @@ import copy from "copy-to-clipboard";
 import {
  BeakerIcon,
  CopyIcon,
-  EditIcon,
  ToolsIcon,
  TrashIcon,
  UserIcon,
@@ -84,38 +83,6 @@ export const copyId = createAction({
  },
 });

-function generateRandomText() {
-  const characters =
-    "abcdefghijklmno pqrstuvwxyzABCDEFGHIJKL MNOPQRSTUVWXYZ 0123456789\n";
-  let text = "";
-  for (let i = 0; i < Math.floor(Math.random() * 10) + 1; i++) {
-    text += characters.charAt(Math.floor(Math.random() * characters.length));
-  }
-  return text;
-}
-
-export const startTyping = createAction({
-  name: "Start automatic typing",
-  icon: <EditIcon />,
-  section: DeveloperSection,
-  visible: ({ activeDocumentId }) =>
-    !!activeDocumentId && env.ENVIRONMENT === "development",
-  perform: () => {
-    const intervalId = setInterval(() => {
-      const text = generateRandomText();
-      document.execCommand("insertText", false, text);
-    }, 250);
-
-    window.addEventListener("keydown", (event) => {
-      if (event.key === "Escape") {
-        intervalId && clearInterval(intervalId);
-      }
-    });
-
-    toast.info("Automatic typing started, press Escape to stop");
-  },
-});
-
 export const clearIndexedDB = createAction({
  name: ({ t }) => t("Clear IndexedDB cache"),
  icon: <TrashIcon />,
@@ -202,7 +169,6 @@ export const developer = createAction({
    createToast,
    createTestUsers,
    clearIndexedDB,
-    startTyping,
  ],
 });

@@ -24,39 +24,25 @@ import {
  UnpublishIcon,
  PublishIcon,
  CommentIcon,
+  GlobeIcon,
  CopyIcon,
  EyeIcon,
-  PadlockIcon,
-  GlobeIcon,
-  LogoutIcon,
 } from "outline-icons";
 import * as React from "react";
 import { toast } from "sonner";
-import Icon from "@shared/components/Icon";
-import {
-  ExportContentType,
-  TeamPreference,
-  NavigationNode,
-} from "@shared/types";
+import { ExportContentType, TeamPreference } from "@shared/types";
 import { getEventFiles } from "@shared/utils/files";
-import UserMembership from "~/models/UserMembership";
 import DocumentDelete from "~/scenes/DocumentDelete";
 import DocumentMove from "~/scenes/DocumentMove";
 import DocumentPermanentDelete from "~/scenes/DocumentPermanentDelete";
 import DocumentPublish from "~/scenes/DocumentPublish";
 import DeleteDocumentsInTrash from "~/scenes/Trash/components/DeleteDocumentsInTrash";
-import ConfirmationDialog from "~/components/ConfirmationDialog";
-import DocumentCopy from "~/components/DocumentCopy";
-import MarkdownIcon from "~/components/Icons/MarkdownIcon";
+import DocumentTemplatizeDialog from "~/components/DocumentTemplatizeDialog";
+import DuplicateDialog from "~/components/DuplicateDialog";
 import SharePopover from "~/components/Sharing/Document";
 import { getHeaderExpandedKey } from "~/components/Sidebar/components/Header";
-import DocumentTemplatizeDialog from "~/components/TemplatizeDialog";
 import { createAction } from "~/actions";
-import {
-  ActiveDocumentSection,
-  DocumentSection,
-  TrashSection,
-} from "~/actions/sections";
+import { DocumentSection, TrashSection } from "~/actions/sections";
 import env from "~/env";
 import { setPersistedState } from "~/hooks/usePersistedState";
 import history from "~/utils/history";
@@ -65,11 +51,11 @@ import {
  documentHistoryPath,
  homePath,
  newDocumentPath,
-  newNestedDocumentPath,
  searchPath,
  documentPath,
  urlify,
  trashPath,
+  newTemplatePath,
 } from "~/utils/routeHelpers";

 export const openDocument = createAction({
@@ -80,24 +66,23 @@ export const openDocument = createAction({
  keywords: "go to",
  icon: <DocumentIcon />,
  children: ({ stores }) => {
-    const nodes = stores.collections.navigationNodes.reduce(
-      (acc, node) => [...acc, ...node.children],
-      [] as NavigationNode[]
-    );
+    const paths = stores.collections.pathsToDocuments;

-    return nodes.map((item) => ({
-      // Note: using url which includes the slug rather than id here to bust
-      // cache if the document is renamed
-      id: item.url,
-      name: item.title,
-      icon: item.icon ? (
-        <Icon value={item.icon} color={item.color ?? undefined} />
-      ) : (
-        <DocumentIcon />
-      ),
-      section: DocumentSection,
-      perform: () => history.push(item.url),
-    }));
+    return paths
+      .filter((path) => path.type === "document")
+      .map((path) => ({
+        // Note: using url which includes the slug rather than id here to bust
+        // cache if the document is renamed
+        id: path.url,
+        name: path.title,
+        icon: function _Icon() {
+          return stores.documents.get(path.id)?.isStarred ? (
+            <StarredIcon />
+          ) : null;
+        },
+        section: DocumentSection,
+        perform: () => history.push(path.url),
+      }));
  },
 });

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

@@ -145,35 +116,16 @@ export const createDocumentFromTemplate = createAction({
  section: DocumentSection,
  icon: <NewDocumentIcon />,
  keywords: "create",
-  visible: ({
-    currentTeamId,
-    activeCollectionId,
-    activeDocumentId,
-    stores,
-  }) => {
-    const document = activeDocumentId
-      ? stores.documents.get(activeDocumentId)
-      : undefined;
-
-    if (
-      !currentTeamId ||
-      !document?.isTemplate ||
-      !!document?.isDraft ||
-      !!document?.isDeleted
-    ) {
-      return false;
-    }
-
-    if (activeCollectionId) {
-      return stores.policies.abilities(activeCollectionId).createDocument;
-    }
-    return stores.policies.abilities(currentTeamId).createDocument;
-  },
-  perform: ({ activeCollectionId, activeDocumentId, sidebarContext }) =>
+  visible: ({ currentTeamId, activeDocumentId, stores }) =>
+    !!currentTeamId &&
+    !!activeDocumentId &&
+    !!stores.documents.get(activeDocumentId)?.template &&
+    stores.policies.abilities(currentTeamId).createDocument,
+  perform: ({ activeCollectionId, activeDocumentId, inStarredSection }) =>
    history.push(
      newDocumentPath(activeCollectionId, { templateId: activeDocumentId }),
      {
-        sidebarContext,
+        starred: inStarredSection,
      }
    ),
 });
@@ -181,7 +133,7 @@ export const createDocumentFromTemplate = createAction({
 export const createNestedDocument = createAction({
  name: ({ t }) => t("New nested document"),
  analyticsName: "New document",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  icon: <NewDocumentIcon />,
  keywords: "create",
  visible: ({ currentTeamId, activeDocumentId, stores }) =>
@@ -189,16 +141,21 @@ export const createNestedDocument = createAction({
    !!activeDocumentId &&
    stores.policies.abilities(currentTeamId).createDocument &&
    stores.policies.abilities(activeDocumentId).createChildDocument,
-  perform: ({ activeDocumentId, sidebarContext }) =>
-    history.push(newNestedDocumentPath(activeDocumentId), {
-      sidebarContext,
-    }),
+  perform: ({ activeCollectionId, activeDocumentId, inStarredSection }) =>
+    history.push(
+      newDocumentPath(activeCollectionId, {
+        parentDocumentId: activeDocumentId,
+      }),
+      {
+        starred: inStarredSection,
+      }
+    ),
 });

 export const starDocument = createAction({
  name: ({ t }) => t("Star"),
  analyticsName: "Star document",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  icon: <StarredIcon />,
  keywords: "favorite bookmark",
  visible: ({ activeDocumentId, stores }) => {
@@ -224,7 +181,7 @@ export const starDocument = createAction({
 export const unstarDocument = createAction({
  name: ({ t }) => t("Unstar"),
  analyticsName: "Unstar document",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  icon: <UnstarredIcon />,
  keywords: "unfavorite unbookmark",
  visible: ({ activeDocumentId, stores }) => {
@@ -250,7 +207,7 @@ export const unstarDocument = createAction({
 export const publishDocument = createAction({
  name: ({ t }) => t("Publish"),
  analyticsName: "Publish document",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  icon: <PublishIcon />,
  visible: ({ activeDocumentId, stores }) => {
    if (!activeDocumentId) {
@@ -271,7 +228,7 @@ export const publishDocument = createAction({
      return;
    }

-    if (document?.collectionId || document?.template) {
+    if (document?.collectionId) {
      await document.save(undefined, {
        publish: true,
      });
@@ -292,7 +249,7 @@ export const publishDocument = createAction({
 export const unpublishDocument = createAction({
  name: ({ t }) => t("Unpublish"),
  analyticsName: "Unpublish document",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  icon: <UnpublishIcon />,
  visible: ({ activeDocumentId, stores }) => {
    if (!activeDocumentId) {
@@ -323,7 +280,7 @@ export const unpublishDocument = createAction({
 export const subscribeDocument = createAction({
  name: ({ t }) => t("Subscribe"),
  analyticsName: "Subscribe to document",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  icon: <SubscribeIcon />,
  visible: ({ activeDocumentId, stores }) => {
    if (!activeDocumentId) {
@@ -333,7 +290,6 @@ export const subscribeDocument = createAction({
    const document = stores.documents.get(activeDocumentId);

    return (
-      !document?.collection?.isSubscribed &&
      !document?.isSubscribed &&
      stores.policies.abilities(activeDocumentId).subscribe
    );
@@ -352,7 +308,7 @@ export const subscribeDocument = createAction({
 export const unsubscribeDocument = createAction({
  name: ({ t }) => t("Unsubscribe"),
  analyticsName: "Unsubscribe from document",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  icon: <UnsubscribeIcon />,
  visible: ({ activeDocumentId, stores }) => {
    if (!activeDocumentId) {
@@ -362,9 +318,8 @@ export const unsubscribeDocument = createAction({
    const document = stores.documents.get(activeDocumentId);

    return (
-      !!document?.collection?.isSubscribed ||
-      (!!document?.isSubscribed &&
-        stores.policies.abilities(activeDocumentId).unsubscribe)
+      !!document?.isSubscribed &&
+      stores.policies.abilities(activeDocumentId).unsubscribe
    );
  },
  perform: async ({ activeDocumentId, stores, currentUserId, t }) => {
@@ -374,37 +329,36 @@ export const unsubscribeDocument = createAction({

    const document = stores.documents.get(activeDocumentId);

-    await document?.unsubscribe();
+    await document?.unsubscribe(currentUserId);

    toast.success(t("Unsubscribed from document notifications"));
  },
 });

 export const shareDocument = createAction({
-  name: ({ t }) => `${t("Permissions")}…`,
+  name: ({ t }) => t("Share"),
  analyticsName: "Share document",
-  section: ActiveDocumentSection,
-  icon: <PadlockIcon />,
-  visible: ({ stores, activeDocumentId }) => {
-    const can = stores.policies.abilities(activeDocumentId!);
-    return can.manageUsers || can.share;
-  },
+  section: DocumentSection,
+  icon: <GlobeIcon />,
  perform: async ({ activeDocumentId, stores, currentUserId, t }) => {
    if (!activeDocumentId || !currentUserId) {
      return;
    }

    const document = stores.documents.get(activeDocumentId);
+    const share = stores.shares.getByDocumentId(activeDocumentId);
+    const sharedParent = stores.shares.getByDocumentParents(activeDocumentId);
    if (!document) {
      return;
    }

    stores.dialogs.openModal({
-      style: { marginBottom: -12 },
      title: t("Share this document"),
      content: (
        <SharePopover
          document={document}
+          share={share}
+          sharedParent={sharedParent}
          onRequestClose={stores.dialogs.closeAllModals}
          visible
        />
@@ -416,7 +370,7 @@ export const shareDocument = createAction({
 export const downloadDocumentAsHTML = createAction({
  name: ({ t }) => t("HTML"),
  analyticsName: "Download document as HTML",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  keywords: "html export",
  icon: <DownloadIcon />,
  iconInContextMenu: false,
@@ -435,7 +389,7 @@ export const downloadDocumentAsHTML = createAction({
 export const downloadDocumentAsPDF = createAction({
  name: ({ t }) => t("PDF"),
  analyticsName: "Download document as PDF",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  keywords: "export",
  icon: <DownloadIcon />,
  iconInContextMenu: false,
@@ -459,7 +413,7 @@ export const downloadDocumentAsPDF = createAction({
 export const downloadDocumentAsMarkdown = createAction({
  name: ({ t }) => t("Markdown"),
  analyticsName: "Download document as Markdown",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  keywords: "md markdown export",
  icon: <DownloadIcon />,
  iconInContextMenu: false,
@@ -479,11 +433,9 @@ export const downloadDocument = createAction({
  name: ({ t, isContextMenu }) =>
    isContextMenu ? t("Download") : t("Download document"),
  analyticsName: "Download document",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  icon: <DownloadIcon />,
  keywords: "export",
-  visible: ({ activeDocumentId, stores }) =>
-    !!activeDocumentId && stores.policies.abilities(activeDocumentId).download,
  children: [
    downloadDocumentAsHTML,
    downloadDocumentAsPDF,
@@ -493,10 +445,8 @@ export const downloadDocument = createAction({

 export const copyDocumentAsMarkdown = createAction({
  name: ({ t }) => t("Copy as Markdown"),
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  keywords: "clipboard",
-  icon: <MarkdownIcon />,
-  iconInContextMenu: false,
  visible: ({ activeDocumentId, stores }) =>
    !!activeDocumentId && stores.policies.abilities(activeDocumentId).download,
  perform: ({ stores, activeDocumentId, t }) => {
@@ -510,33 +460,10 @@ export const copyDocumentAsMarkdown = createAction({
  },
 });

-export const copyDocumentShareLink = createAction({
-  name: ({ t }) => t("Copy public link"),
-  section: ActiveDocumentSection,
-  keywords: "clipboard share",
-  icon: <GlobeIcon />,
-  iconInContextMenu: false,
-  visible: ({ activeDocumentId, stores }) =>
-    !!activeDocumentId &&
-    !!stores.shares.getByDocumentId(activeDocumentId)?.published,
-  perform: ({ stores, activeDocumentId, t }) => {
-    if (!activeDocumentId) {
-      return;
-    }
-    const share = stores.shares.getByDocumentId(activeDocumentId);
-    if (share) {
-      copy(share.url);
-      toast.success(t("Link copied to clipboard"));
-    }
-  },
-});
-
 export const copyDocumentLink = createAction({
  name: ({ t }) => t("Copy link"),
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  keywords: "clipboard",
-  icon: <CopyIcon />,
-  iconInContextMenu: false,
  visible: ({ activeDocumentId }) => !!activeDocumentId,
  perform: ({ stores, activeDocumentId, t }) => {
    const document = activeDocumentId
@@ -552,17 +479,17 @@ export const copyDocumentLink = createAction({
 export const copyDocument = createAction({
  name: ({ t }) => t("Copy"),
  analyticsName: "Copy document",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  icon: <CopyIcon />,
  keywords: "clipboard",
-  children: [copyDocumentLink, copyDocumentShareLink, copyDocumentAsMarkdown],
+  children: [copyDocumentLink, copyDocumentAsMarkdown],
 });

 export const duplicateDocument = createAction({
  name: ({ t, isContextMenu }) =>
    isContextMenu ? t("Duplicate") : t("Duplicate document"),
  analyticsName: "Duplicate document",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  icon: <DuplicateIcon />,
  keywords: "copy",
  visible: ({ activeDocumentId, stores }) =>
@@ -578,7 +505,7 @@ export const duplicateDocument = createAction({
    stores.dialogs.openModal({
      title: t("Copy document"),
      content: (
-        <DocumentCopy
+        <DuplicateDialog
          document={document}
          onSubmit={(response) => {
            stores.dialogs.closeAllModals();
@@ -606,7 +533,7 @@ export const pinDocumentToCollection = createAction({
    });
  },
  analyticsName: "Pin document to collection",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  icon: <PinIcon />,
  iconInContextMenu: false,
  visible: ({ activeCollectionId, activeDocumentId, stores }) => {
@@ -642,7 +569,7 @@ export const pinDocumentToCollection = createAction({
 export const pinDocumentToHome = createAction({
  name: ({ t }) => t("Pin to home"),
  analyticsName: "Pin document to home",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  icon: <PinIcon />,
  iconInContextMenu: false,
  visible: ({ activeDocumentId, currentTeamId, stores }) => {
@@ -674,7 +601,7 @@ export const pinDocumentToHome = createAction({
 export const pinDocument = createAction({
  name: ({ t }) => t("Pin"),
  analyticsName: "Pin document",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  icon: <PinIcon />,
  children: [pinDocumentToCollection, pinDocumentToHome],
 });
@@ -682,7 +609,7 @@ export const pinDocument = createAction({
 export const searchInDocument = createAction({
  name: ({ t }) => t("Search in document"),
  analyticsName: "Search document",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  icon: <SearchIcon />,
  visible: ({ stores, activeDocumentId }) => {
    if (!activeDocumentId) {
@@ -700,7 +627,7 @@ export const printDocument = createAction({
  name: ({ t, isContextMenu }) =>
    isContextMenu ? t("Print") : t("Print document"),
  analyticsName: "Print document",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  icon: <PrintIcon />,
  visible: ({ activeDocumentId }) => !!(activeDocumentId && window.print),
  perform: () => {
@@ -735,54 +662,52 @@ export const importDocument = createAction({
      const files = getEventFiles(ev);

      const file = files[0];
-
-      try {
-        const document = await documents.import(
-          file,
-          activeDocumentId,
-          activeCollectionId,
-          {
-            publish: true,
-          }
-        );
-        history.push(document.url);
-      } catch (err) {
-        toast.error(err.message);
-      }
+      const document = await documents.import(
+        file,
+        activeDocumentId,
+        activeCollectionId,
+        {
+          publish: true,
+        }
+      );
+      history.push(document.url);
    };

    input.click();
  },
 });

-export const createTemplateFromDocument = createAction({
-  name: ({ t }) => t("Templatize"),
+export const createTemplate = createAction({
+  name: ({ t, activeDocumentId }) =>
+    activeDocumentId ? t("Templatize") : t("New template"),
  analyticsName: "Templatize document",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  icon: <ShapesIcon />,
  keywords: "new create template",
  visible: ({ activeCollectionId, activeDocumentId, stores }) => {
-    const document = activeDocumentId
-      ? stores.documents.get(activeDocumentId)
-      : undefined;
-    if (document?.isTemplate || !document?.isActive) {
-      return false;
+    if (activeDocumentId) {
+      const document = stores.documents.get(activeDocumentId);
+      if (document?.isTemplate || !document?.isActive) {
+        return false;
+      }
    }
    return !!(
      !!activeCollectionId &&
-      stores.policies.abilities(activeCollectionId).updateDocument
+      stores.policies.abilities(activeCollectionId).update
    );
  },
-  perform: ({ activeDocumentId, stores, t, event }) => {
-    if (!activeDocumentId) {
-      return;
-    }
+  perform: ({ activeCollectionId, activeDocumentId, stores, t, event }) => {
    event?.preventDefault();
    event?.stopPropagation();
-    stores.dialogs.openModal({
-      title: t("Create template"),
-      content: <DocumentTemplatizeDialog documentId={activeDocumentId} />,
-    });
+
+    if (activeDocumentId) {
+      stores.dialogs.openModal({
+        title: t("Create template"),
+        content: <DocumentTemplatizeDialog documentId={activeDocumentId} />,
+      });
+    } else if (activeCollectionId) {
+      history.push(newTemplatePath(activeCollectionId));
+    }
  },
 });

@@ -793,14 +718,14 @@ export const openRandomDocument = createAction({
  section: DocumentSection,
  icon: <ShuffleIcon />,
  perform: ({ stores, activeDocumentId }) => {
-    const nodes = stores.collections.navigationNodes
-      .reduce((acc, node) => [...acc, ...node.children], [] as NavigationNode[])
-      .filter((node) => node.id !== activeDocumentId);
+    const documentPaths = stores.collections.pathsToDocuments.filter(
+      (path) => path.type === "document" && path.id !== activeDocumentId
+    );
+    const documentPath =
+      documentPaths[Math.round(Math.random() * documentPaths.length)];

-    const random = nodes[Math.round(Math.random() * nodes.length)];
-
-    if (random) {
-      history.push(random.url);
+    if (documentPath) {
+      history.push(documentPath.url);
    }
  },
 });
@@ -817,50 +742,11 @@ export const searchDocumentsForQuery = (searchQuery: string) =>
    visible: ({ location }) => location.pathname !== searchPath(),
  });

-export const moveTemplateToWorkspace = createAction({
-  name: ({ t }) => t("Move to workspace"),
-  analyticsName: "Move template to workspace",
+export const moveDocument = createAction({
+  name: ({ t }) => t("Move"),
+  analyticsName: "Move document",
  section: DocumentSection,
  icon: <MoveIcon />,
-  iconInContextMenu: false,
-  visible: ({ activeDocumentId, stores }) => {
-    if (!activeDocumentId) {
-      return false;
-    }
-    const document = stores.documents.get(activeDocumentId);
-    if (!document || !document.template || document.isWorkspaceTemplate) {
-      return false;
-    }
-    return !!stores.policies.abilities(activeDocumentId).move;
-  },
-  perform: async ({ activeDocumentId, stores }) => {
-    if (activeDocumentId) {
-      const document = stores.documents.get(activeDocumentId);
-      if (!document) {
-        return;
-      }
-
-      await document.move({
-        collectionId: null,
-      });
-    }
-  },
-});
-
-export const moveDocumentToCollection = createAction({
-  name: ({ activeDocumentId, stores, t }) => {
-    if (!activeDocumentId) {
-      return t("Move");
-    }
-    const document = stores.documents.get(activeDocumentId);
-    return document?.template && document?.collectionId
-      ? t("Move to collection")
-      : t("Move");
-  },
-  analyticsName: "Move document",
-  section: ActiveDocumentSection,
-  icon: <MoveIcon />,
-  iconInContextMenu: false,
  visible: ({ activeDocumentId, stores }) => {
    if (!activeDocumentId) {
      return false;
@@ -884,48 +770,10 @@ export const moveDocumentToCollection = createAction({
  },
 });

-export const moveDocument = createAction({
-  name: ({ t }) => t("Move"),
-  analyticsName: "Move document",
-  section: ActiveDocumentSection,
-  icon: <MoveIcon />,
-  visible: ({ activeDocumentId, stores }) => {
-    if (!activeDocumentId) {
-      return false;
-    }
-    const document = stores.documents.get(activeDocumentId);
-    // Don't show the button if this is a non-workspace template.
-    if (!document || (document.template && !document.isWorkspaceTemplate)) {
-      return false;
-    }
-    return !!stores.policies.abilities(activeDocumentId).move;
-  },
-  perform: moveDocumentToCollection.perform,
-});
-
-export const moveTemplate = createAction({
-  name: ({ t }) => t("Move"),
-  analyticsName: "Move document",
-  section: ActiveDocumentSection,
-  icon: <MoveIcon />,
-  visible: ({ activeDocumentId, stores }) => {
-    if (!activeDocumentId) {
-      return false;
-    }
-    const document = stores.documents.get(activeDocumentId);
-    // Don't show the menu if this is not a template (or) a workspace template.
-    if (!document || !document.template || document.isWorkspaceTemplate) {
-      return false;
-    }
-    return !!stores.policies.abilities(activeDocumentId).move;
-  },
-  children: [moveTemplateToWorkspace, moveDocumentToCollection],
-});
-
 export const archiveDocument = createAction({
-  name: ({ t }) => `${t("Archive")}…`,
+  name: ({ t }) => t("Archive"),
  analyticsName: "Archive document",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  icon: <ArchiveIcon />,
  visible: ({ activeDocumentId, stores }) => {
    if (!activeDocumentId) {
@@ -934,30 +782,14 @@ export const archiveDocument = createAction({
    return !!stores.policies.abilities(activeDocumentId).archive;
  },
  perform: async ({ activeDocumentId, stores, t }) => {
-    const { dialogs, documents } = stores;
-
    if (activeDocumentId) {
-      const document = documents.get(activeDocumentId);
+      const document = stores.documents.get(activeDocumentId);
      if (!document) {
        return;
      }

-      dialogs.openModal({
-        title: t("Are you sure you want to archive this document?"),
-        content: (
-          <ConfirmationDialog
-            onSubmit={async () => {
-              await document.archive();
-              toast.success(t("Document archived"));
-            }}
-            savingText={`${t("Archiving")}…`}
-          >
-            {t(
-              "Archiving this document will remove it from the collection and search results."
-            )}
-          </ConfirmationDialog>
-        ),
-      });
+      await document.archive();
+      toast.success(t("Document archived"));
    }
  },
 });
@@ -965,7 +797,7 @@ export const archiveDocument = createAction({
 export const deleteDocument = createAction({
  name: ({ t }) => `${t("Delete")}…`,
  analyticsName: "Delete document",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  icon: <TrashIcon />,
  dangerous: true,
  visible: ({ activeDocumentId, stores }) => {
@@ -999,7 +831,7 @@ export const deleteDocument = createAction({
 export const permanentlyDeleteDocument = createAction({
  name: ({ t }) => t("Permanently delete"),
  analyticsName: "Permanently delete document",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  icon: <CrossIcon />,
  dangerous: true,
  visible: ({ activeDocumentId, stores }) => {
@@ -1054,7 +886,7 @@ export const permanentlyDeleteDocumentsInTrash = createAction({
 export const openDocumentComments = createAction({
  name: ({ t }) => t("Comments"),
  analyticsName: "Open comments",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  icon: <CommentIcon />,
  visible: ({ activeDocumentId, stores }) => {
    const can = stores.policies.abilities(activeDocumentId ?? "");
@@ -1069,14 +901,14 @@ export const openDocumentComments = createAction({
      return;
    }

-    stores.ui.toggleComments();
+    stores.ui.toggleComments(activeDocumentId);
  },
 });

 export const openDocumentHistory = createAction({
  name: ({ t }) => t("History"),
  analyticsName: "Open document history",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  icon: <HistoryIcon />,
  visible: ({ activeDocumentId, stores }) => {
    const can = stores.policies.abilities(activeDocumentId ?? "");
@@ -1097,7 +929,7 @@ export const openDocumentHistory = createAction({
 export const openDocumentInsights = createAction({
  name: ({ t }) => t("Insights"),
  analyticsName: "Open document insights",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  icon: <GraphIcon />,
  visible: ({ activeDocumentId, stores }) => {
    const can = stores.policies.abilities(activeDocumentId ?? "");
@@ -1134,7 +966,7 @@ export const toggleViewerInsights = createAction({
      : t("Enable viewer insights");
  },
  analyticsName: "Toggle viewer insights",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
  icon: <EyeIcon />,
  visible: ({ activeDocumentId, stores }) => {
    const can = stores.policies.abilities(activeDocumentId ?? "");
@@ -1155,54 +987,15 @@ export const toggleViewerInsights = createAction({
  },
 });

-export const leaveDocument = createAction({
-  name: ({ t }) => t("Leave document"),
-  analyticsName: "Leave document",
-  section: ActiveDocumentSection,
-  icon: <LogoutIcon />,
-  visible: ({ currentUserId, activeDocumentId, stores }) => {
-    const membership = stores.userMemberships.orderedData.find(
-      (m) => m.documentId === activeDocumentId && m.userId === currentUserId
-    );
-
-    return !!membership;
-  },
-  perform: async ({ t, location, currentUserId, activeDocumentId, stores }) => {
-    if (!activeDocumentId) {
-      return;
-    }
-
-    const document = stores.documents.get(activeDocumentId);
-
-    try {
-      if (document && location.pathname.startsWith(document.path)) {
-        history.push(homePath());
-      }
-
-      await stores.userMemberships.delete({
-        documentId: activeDocumentId,
-        userId: currentUserId,
-      } as UserMembership);
-
-      toast.success(t("You have left the shared document"));
-    } catch (err) {
-      toast.error(t("Could not leave document"));
-    }
-  },
-});
-
 export const rootDocumentActions = [
  openDocument,
  archiveDocument,
  createDocument,
-  createDraftDocument,
-  createNestedDocument,
-  createTemplateFromDocument,
+  createTemplate,
  deleteDocument,
  importDocument,
  downloadDocument,
  copyDocumentLink,
-  copyDocumentShareLink,
  copyDocumentAsMarkdown,
  starDocument,
  unstarDocument,
@@ -1211,9 +1004,7 @@ export const rootDocumentActions = [
  subscribeDocument,
  unsubscribeDocument,
  duplicateDocument,
-  leaveDocument,
-  moveTemplateToWorkspace,
-  moveDocumentToCollection,
+  moveDocument,
  openRandomDocument,
  permanentlyDeleteDocument,
  permanentlyDeleteDocumentsInTrash,
@@ -91,15 +91,6 @@ export const navigateToSettings = createAction({
  perform: () => history.push(settingsPath()),
 });

-export const navigateToWorkspaceSettings = createAction({
-  name: ({ t }) => t("Settings"),
-  analyticsName: "Navigate to workspace settings",
-  section: NavigationSection,
-  icon: <SettingsIcon />,
-  visible: () => stores.policies.abilities(stores.auth.team?.id || "").update,
-  perform: () => history.push(settingsPath("details")),
-});
-
 export const navigateToProfileSettings = createAction({
  name: ({ t }) => t("Profile"),
  analyticsName: "Navigate to profile settings",
@@ -225,9 +216,7 @@ export const logout = createAction({
  perform: async () => {
    await stores.auth.logout();
    if (env.OIDC_LOGOUT_URI) {
-      setTimeout(() => {
-        window.location.replace(env.OIDC_LOGOUT_URI);
-      }, 200);
+      window.location.replace(env.OIDC_LOGOUT_URI);
    }
  },
 });
@@ -17,7 +17,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 +47,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;
    }
@@ -18,7 +18,7 @@ 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({
@@ -40,7 +40,7 @@ export const updateUserRoleActionFactory = (user: User, role: UserRole) =>
          })}…`,
    analyticsName: "Update user role",
    section: UserSection,
-    visible: () => {
+    visible: ({ stores }) => {
      const can = stores.policies.abilities(user.id);

      return UserRoleHelper.isRoleHigher(role, user.role)
@@ -70,7 +70,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) {
@@ -98,11 +98,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,7 +108,6 @@ 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,
@@ -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,9 @@ 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");
@@ -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);

@@ -2,14 +2,13 @@
 /* global ga */
 import escape from "lodash/escape";
 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>
  );
 }

@@ -5,7 +5,6 @@ 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 = {
@@ -33,7 +32,7 @@ const Authenticated = ({ children }: Props) => {
  }

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

 export default observer(Authenticated);
@@ -1,14 +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 type { Editor as TEditor } from "~/editor";
 import useCurrentTeam from "~/hooks/useCurrentTeam";
 import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
@@ -22,7 +25,6 @@ import {
  matchDocumentSlug as slug,
  matchDocumentInsights,
 } from "~/utils/routeHelpers";
-import { DocumentContextProvider } from "./DocumentContext";
 import Fade from "./Fade";
 import { PortalContext } from "./Portal";

@@ -48,6 +50,12 @@ const AuthenticatedLayout: React.FC = ({ children }: Props) => {
  const can = usePolicy(ui.activeDocumentId);
  const canCollection = usePolicy(ui.activeCollectionId);
  const team = useCurrentTeam();
+  const documentContext = useLocalStore<DocumentContextValue>(() => ({
+    editor: null,
+    setEditor: (editor: TEditor) => {
+      documentContext.editor = editor;
+    },
+  }));

  const goToSearch = (ev: KeyboardEvent) => {
    if (!ev.metaKey && !ev.ctrlKey) {
@@ -94,7 +102,7 @@ const AuthenticatedLayout: React.FC = ({ children }: Props) => {
    !showHistory &&
    can.comment &&
    ui.activeDocumentId &&
-    ui.commentsExpanded &&
+    ui.commentsExpanded.includes(ui.activeDocumentId) &&
    team.getPreference(TeamPreference.Commenting);

  const sidebarRight = (
@@ -117,7 +125,7 @@ const AuthenticatedLayout: React.FC = ({ children }: Props) => {
  );

  return (
-    <DocumentContextProvider>
+    <DocumentContext.Provider value={documentContext}>
      <PortalContext.Provider value={layoutRef.current}>
        <Layout
          title={team.name}
@@ -134,7 +142,7 @@ const AuthenticatedLayout: React.FC = ({ children }: Props) => {
          </React.Suspense>
        </Layout>
      </PortalContext.Provider>
-    </DocumentContextProvider>
+    </DocumentContext.Provider>
  );
 };

@@ -7,10 +7,9 @@ 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 +20,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 +65,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
@@ -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,33 +1,26 @@
-import { getLuminance } from "polished";
 import styled from "styled-components";
-import { s } from "@shared/styles";
 import Flex from "~/components/Flex";

 const Initials = styled(Flex)<{
-  /** The color of the background, defaults to textTertiary. */
  color?: string;
-  /** Content is only used to calculate font size, use children to render. */
-  content?: string;
-  /** The size of the avatar */
  size: number;
+  $showBorder?: boolean;
 }>`
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  width: 100%;
  height: 100%;
-  color: ${(props) =>
-    getLuminance(props.color ?? props.theme.textTertiary) > 0.5
-      ? s("black50")
-      : s("white75")};
-  background-color: ${(props) => props.color ?? props.theme.textTertiary};
+  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;
@@ -8,16 +8,18 @@ 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 +37,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 +67,6 @@ const Slash = styled(GoToIcon)`

 const Item = styled(Link)<{ $highlight: boolean; $withIcon: boolean }>`
  ${ellipsis()}
-  ${undraggableOnDesktop()}
-
  display: flex;
  flex-shrink: 1;
  min-width: 0;
@@ -80,6 +76,7 @@ const Item = styled(Link)<{ $highlight: boolean; $withIcon: boolean }>`
  height: 24px;
  font-weight: ${(props) => (props.$highlight ? "500" : "inherit")};
  margin-left: ${(props) => (props.$withIcon ? "4px" : "0")};
+  ${undraggableOnDesktop()}

  svg {
    flex-shrink: 0;
@@ -90,4 +87,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;
      }
  `};
@@ -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);
@@ -1,13 +1,13 @@
 import filter from "lodash/filter";
 import isEqual from "lodash/isEqual";
-import orderBy from "lodash/orderBy";
+import sortBy from "lodash/sortBy";
 import uniq from "lodash/uniq";
 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 +16,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 +39,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 +69,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>
        )}
@@ -3,7 +3,6 @@ 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";
@@ -12,20 +11,19 @@ import { CollectionValidation } from "@shared/validations";
 import Collection from "~/models/Collection";
 import Button from "~/components/Button";
 import Flex from "~/components/Flex";
+import IconPicker from "~/components/IconPicker";
 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"));
+import { Feature, FeatureFlags } from "~/utils/FeatureFlags";

 export interface FormData {
  name: string;
  icon: string;
-  color: string | null;
+  color: string;
  sharing: boolean;
  permission: CollectionPermission | undefined;
 }
@@ -39,16 +37,7 @@ export const CollectionForm = observer(function CollectionForm_({
 }) {
  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,
@@ -64,7 +53,7 @@ export const CollectionForm = observer(function CollectionForm_({
      icon: collection?.icon,
      sharing: collection?.sharing ?? true,
      permission: collection?.permission,
-      color: iconColor,
+      color: collection?.color ?? randomElement(colorPalette),
    },
  });

@@ -81,20 +70,20 @@ export const CollectionForm = observer(function CollectionForm_({
          "collection"
      );
    }
-  }, [collection, hasOpenedIconPicker, setValue, values.name, values.icon]);
+  }, [values.name, collection]);

  React.useEffect(() => {
    setTimeout(() => setFocus("name", { shouldSelect: true }), 100);
  }, [setFocus]);

-  const handleIconChange = React.useCallback(
-    (icon: string, color: string | null) => {
+  const handleIconPickerChange = React.useCallback(
+    (color: string, icon: string) => {
      if (icon !== values.icon) {
        setFocus("name");
      }

-      setValue("icon", icon);
      setValue("color", color);
+      setValue("icon", icon);
    },
    [setFocus, setValue, values.icon]
  );
@@ -116,16 +105,13 @@ export const CollectionForm = observer(function CollectionForm_({
            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>
+            <StyledIconPicker
+              onOpen={setHasOpenedIconPicker}
+              onChange={handleIconPickerChange}
+              initial={values.name[0]}
+              color={values.color}
+              icon={values.icon}
+            />
          }
          autoComplete="off"
          autoFocus
@@ -142,10 +128,8 @@ export const CollectionForm = observer(function CollectionForm_({
            <InputSelectPermission
              ref={field.ref}
              value={field.value}
-              onChange={(
-                value: CollectionPermission | typeof EmptySelectValue
-              ) => {
-                field.onChange(value === EmptySelectValue ? null : value);
+              onChange={(value: CollectionPermission) => {
+                field.onChange(value);
              }}
              note={t(
                "The default access for workspace members, you can share with more users or groups later."
@@ -155,16 +139,18 @@ export const CollectionForm = observer(function CollectionForm_({
        />
      )}

-      {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")}
-        />
-      )}
+      {team.sharing &&
+        (!collection ||
+          FeatureFlags.isEnabled(Feature.newCollectionSharing)) && (
+          <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
@@ -1,7 +1,7 @@
-import { runInAction } from "mobx";
 import { observer } from "mobx-react";
 import * as React from "react";
 import { toast } from "sonner";
+import Collection from "~/models/Collection";
 import useStores from "~/hooks/useStores";
 import history from "~/utils/history";
 import { CollectionForm, FormData } from "./CollectionForm";
@@ -17,11 +17,8 @@ export const CollectionNew = observer(function CollectionNew_({
  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 = [];
-        });
+        const collection = new Collection(data, collections);
+        await collection.save();
        onSubmit?.();
        history.push(collection.path);
      } catch (error) {
@@ -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 />;
-};
@@ -1,21 +1,30 @@
 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 { CollectionValidation } from "@shared/validations";
 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 BlockMenuExtension from "~/editor/extensions/BlockMenu";
+import EmojiMenuExtension from "~/editor/extensions/EmojiMenu";
+import HoverPreviewsExtension from "~/editor/extensions/HoverPreviews";
 import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
-import Text from "./Text";

-const extensions = withUIExtensions(richExtensions);
+const extensions = [
+  ...richExtensions,
+  BlockMenuExtension,
+  EmojiMenuExtension,
+  HoverPreviewsExtension,
+];

 type Props = {
  collection: Collection;
@@ -24,8 +33,33 @@ type Props = {
 function CollectionDescription({ collection }: Props) {
  const { collections } = useStores();
  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) => {
@@ -33,6 +67,7 @@ function CollectionDescription({ collection }: Props) {
          await collection.save({
            data: getValue(false),
          });
+          setDirty(false);
        } catch (err) {
          toast.error(t("Sorry, an error occurred saving the collection"));
          throw err;
@@ -41,44 +76,163 @@ function CollectionDescription({ collection }: Props) {
    [collection, 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={CollectionValidation.maxDescriptionLength}
-            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.data}
+                onChange={handleChange}
+                placeholder={placeholder}
+                readOnly={!isEditing}
+                autoFocus={isEditing}
+                onBlur={handleStopEditing}
+                extensions={extensions}
+                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: 8px -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,27 +6,20 @@ 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 useTemplateActions from "~/hooks/useTemplateActions";

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

  useCommandBarActions(commandBarActions);
@@ -37,9 +30,7 @@ function CommandBar() {
        <Positioner>
          <Animator>
            <SearchActions />
-            <SearchInput
-              defaultPlaceholder={`${t("Type a command or search")}…`}
-            />
+            <SearchInput defaultPlaceholder={t("Type a command or search")} />
            <CommandBarResults />
          </Animator>
        </Positioner>
@@ -69,19 +60,13 @@ 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")};
@@ -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;
@@ -69,8 +69,8 @@ function CommandBarItem(
              ) : (
                ""
              )}
-              {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,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);
@@ -8,8 +8,8 @@ import Text from "~/components/Text";
 import useStores from "~/hooks/useStores";

 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 */
@@ -38,10 +38,7 @@ const ConfirmationDialog: React.FC<Props> = ({
      ev.preventDefault();
      setIsSaving(true);
      try {
-        const res = await onSubmit();
-        if (res === false) {
-          return;
-        }
+        await onSubmit();
        dialogs.closeAllModals();
      } catch (err) {
        toast.error(err.message);
@@ -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,6 +11,7 @@ import useStores from "~/hooks/useStores";

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

  const codeToMessage = {
@@ -35,7 +36,7 @@ function ConnectionStatus() {
  };

  const message = ui.multiplayerErrorCode
-    ? codeToMessage[ui.multiplayerErrorCode as keyof typeof codeToMessage]
+    ? codeToMessage[ui.multiplayerErrorCode]
    : undefined;

  return ui.multiplayerStatus === "connecting" ||
@@ -60,7 +61,7 @@ function ConnectionStatus() {
    >
      <Button>
        <Fade>
-          <DisconnectedIcon />
+          <DisconnectedIcon color={theme.sidebarText} />
        </Fade>
      </Button>
    </Tooltip>
@@ -71,7 +72,7 @@ const Button = styled(NudeButton)`
  display: none;
  position: fixed;
  bottom: 0;
-  margin: 20px;
+  margin: 24px;
  transform: translateX(-32px);

  ${breakpoint("tablet")`
@@ -182,6 +182,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,16 @@
 import { LocationDescriptor } from "history";
 import { CheckmarkIcon } from "outline-icons";
-import { ellipsis, transparentize } from "polished";
+import { ellipsis } 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";

 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 +21,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,40 +42,39 @@ 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>
+            <MenuIconWrapper aria-hidden>
              {selected ? <CheckmarkIcon /> : <Spacer />}
-            </SelectedWrapper>
+            </MenuIconWrapper>
          )}
          {icon && <MenuIconWrapper aria-hidden>{icon}</MenuIconWrapper>}
          <Title>{children}</Title>
@@ -109,8 +106,6 @@ const Title = styled.div`
  ${ellipsis()}
  flex-grow: 1;
  display: flex;
-  align-items: center;
-  gap: 8px;
 `;

 type MenuAnchorProps = {
@@ -155,7 +150,7 @@ 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;
@@ -165,10 +160,6 @@ export const MenuAnchorCSS = css<MenuAnchorProps>`
        color: ${props.theme.accentText};
        fill: ${props.theme.accentText};
      }
-
-      ${Text} {
-        color: ${transparentize(0.5, props.theme.accentText)};
-      }
    }
  }
  `}
@@ -199,13 +190,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);
@@ -20,7 +20,6 @@ import {
  MenuHeading,
  MenuItem as TMenuItem,
 } from "~/types";
-import Tooltip from "../Tooltip";
 import Header from "./Header";
 import MenuItem, { MenuAnchor } from "./MenuItem";
 import MouseSafeArea from "./MouseSafeArea";
@@ -31,7 +30,6 @@ type Props = Omit<MenuStateReturn, "items"> & {
  actions?: (Action | MenuSeparator | MenuHeading)[];
  context?: Partial<ActionContext>;
  items?: TMenuItem[];
-  showIcons?: boolean;
 };

 const Disclosure = styled(ExpandedIcon)`
@@ -100,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,
  });
@@ -126,8 +124,7 @@ 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 />;
        }
@@ -141,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}
@@ -159,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}
@@ -168,7 +165,7 @@ function Template({ items, actions, context, showIcons, ...menu }: Props) {
        }

        if (item.type === "button") {
-          const menuItem = (
+          return (
            <MenuItem
              as="button"
              id={`${item.title}-${index}`}
@@ -177,20 +174,12 @@ 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}
            </MenuItem>
          );
-
-          return item.tooltip ? (
-            <Tooltip content={item.tooltip} placement={"bottom"}>
-              <div>{menuItem}</div>
-            </Tooltip>
-          ) : (
-            <>{menuItem}</>
-          );
        }

        if (item.type === "submenu") {
@@ -201,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}
            />
          );
@@ -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";
@@ -51,8 +50,6 @@ type Props = MenuStateReturn & {
  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;
 };

@@ -137,7 +134,6 @@ type InnerContextMenuProps = MenuStateReturn & {
  menuProps: { style?: React.CSSProperties; placement: string };
  children: React.ReactNode;
  maxWidth?: number;
-  minHeight?: number;
 };

 /**
@@ -175,32 +171,6 @@ const InnerContextMenu = (props: InnerContextMenuProps) => {
    };
  }, [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
      ? {
@@ -223,7 +193,6 @@ const InnerContextMenu = (props: InnerContextMenuProps) => {
        <Background
          dir="auto"
          maxWidth={props.maxWidth}
-          minHeight={props.minHeight}
          topAnchor={topAnchor}
          rightAnchor={rightAnchor}
          ref={backgroundRef}
@@ -254,14 +223,10 @@ 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 {
+  &.focus-visible {
    transition-delay: 250ms;
    transition-property: outline-width;
    transition-duration: 0;
-    outline: none;
  }

  /*
@@ -282,7 +247,6 @@ type BackgroundProps = {
  topAnchor?: boolean;
  rightAnchor?: boolean;
  maxWidth?: number;
-  minHeight?: number;
  theme: DefaultTheme;
 };

@@ -294,8 +258,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 {
@@ -49,7 +49,7 @@ const DefaultCollectionInputSelect = ({

  const options = React.useMemo(
    () =>
-      collections.nonPrivate.reduce(
+      collections.publicCollections.reduce(
        (acc, collection) => [
          ...acc,
          {
@@ -78,7 +78,7 @@ const DefaultCollectionInputSelect = ({
          },
        ]
      ),
-    [collections.nonPrivate, t]
+    [collections.publicCollections, t]
  );

  if (fetching) {
@@ -25,7 +25,6 @@ function Dialogs() {
          fullscreen={modal.fullscreen ?? false}
          onRequestClose={() => dialogs.closeModal(id)}
          title={modal.title}
-          style={modal.style}
        >
          {modal.content}
        </Modal>
@@ -3,16 +3,19 @@ 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,
+  settingsPath,
+  trashPath,
+} from "~/utils/routeHelpers";
+import EmojiIcon from "./Icons/EmojiIcon";

 type Props = {
  children?: React.ReactNode;
@@ -53,34 +56,30 @@ function useCategory(document: Document): MenuInternalLink | null {
  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 });
+    void document.loadRelations();
  }, [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.path),
    };
  } else if (document.isCollectionDeleted) {
    collectionNode = {
@@ -105,24 +104,20 @@ function DocumentBreadcrumb(
    }

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

  if (!collections.isLoaded) {
    return null;
@@ -135,7 +130,7 @@ function DocumentBreadcrumb(
        {path.slice(0, -1).map((node: NavigationNode) => (
          <React.Fragment key={node.id}>
            <SmallSlash />
-            {node.title || t("Untitled")}
+            {node.title}
          </React.Fragment>
        ))}
      </>
@@ -143,15 +138,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 +154,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 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,16 @@ 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={24} />
+              </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,19 +127,18 @@ 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>
@@ -176,39 +159,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;
 `;
@@ -0,0 +1,37 @@
+import * as React from "react";
+import { Editor } from "~/editor";
+import useIdle from "~/hooks/useIdle";
+
+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);
+
+const activityEvents = [
+  "click",
+  "mousemove",
+  "DOMMouseScroll",
+  "mousewheel",
+  "mousedown",
+  "touchstart",
+  "touchmove",
+  "focus",
+];
+
+export const useEditingFocus = () => {
+  const { editor } = useDocumentContext();
+  const isIdle = useIdle(3000, activityEvents);
+  return isIdle && !!editor?.view.hasFocus();
+};
+
+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);
@@ -11,35 +11,35 @@ 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 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 +47,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 +94,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)
@@ -238,30 +216,25 @@ function DocumentExplorer({ onSubmit, onSelect, items, defaultValue }: Props) {
    }) => {
      const node = data[index];
      const isCollection = node.type === "collection";
-      let renderedIcon,
-        title: string,
-        icon: string | undefined,
-        color: string | undefined,
-        path;
+      let icon, title: string, emoji: string | undefined, path;

      if (isCollection) {
        const col = collections.get(node.collectionId as string);
-        renderedIcon = col && (
+        icon = col && (
          <CollectionIcon collection={col} expanded={isExpanded(index)} />
        );
        title = node.title;
      } else {
        const doc = documents.get(node.id);
-        icon = doc?.icon ?? node.icon ?? node.emoji;
-        color = doc?.color ?? node.color;
+        emoji = doc?.emoji ?? node.emoji;
        title = doc?.title ?? node.title;

-        if (icon) {
-          renderedIcon = <Icon value={icon} color={color} />;
+        if (emoji) {
+          icon = <EmojiIcon emoji={emoji} />;
        } else if (doc?.isStarred) {
-          renderedIcon = <StarredIcon color={theme.yellow} />;
+          icon = <StarredIcon color={theme.yellow} />;
        } else {
-          renderedIcon = <DocumentIcon color={theme.textSecondary} />;
+          icon = <DocumentIcon color={theme.textSecondary} />;
        }

        path = ancestors(node)
@@ -281,7 +254,7 @@ function DocumentExplorer({ onSubmit, onSelect, items, defaultValue }: Props) {
          }}
          onPointerMove={() => setActiveNode(index)}
          onClick={() => toggleSelect(index)}
-          icon={renderedIcon}
+          icon={icon}
          title={title}
          path={path}
        />
@@ -302,7 +275,7 @@ function DocumentExplorer({ onSubmit, onSelect, items, defaultValue }: Props) {
          selected={isSelected(index)}
          active={activeNode === index}
          expanded={isExpanded(index)}
-          icon={renderedIcon}
+          icon={icon}
          title={title}
          depth={node.depth as number}
          hasChildren={hasChildren(index)}
@@ -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,19 +1,15 @@
-import {
-  useFocusEffect,
-  useRovingTabIndex,
-} from "@getoutline/react-roving-tabindex";
 import { observer } from "mobx-react";
 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 DocumentMeta from "~/components/DocumentMeta";
+import EventBoundary from "~/components/EventBoundary";
 import Flex from "~/components/Flex";
 import Highlight from "~/components/Highlight";
 import NudeButton from "~/components/NudeButton";
@@ -21,10 +17,10 @@ import StarButton, { AnimatedStar } from "~/components/Star";
 import Tooltip from "~/components/Tooltip";
 import useBoolean from "~/hooks/useBoolean";
 import useCurrentUser from "~/hooks/useCurrentUser";
-import { useLocationSidebarContext } from "~/hooks/useLocationSidebarContext";
 import DocumentMenu from "~/menus/DocumentMenu";
+import { hover } from "~/styles";
 import { documentPath } from "~/utils/routeHelpers";
-import { determineSidebarContext } from "./Sidebar/components/SidebarContext";
+import EmojiIcon from "./Icons/EmojiIcon";

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

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

@@ -51,18 +47,8 @@ function DocumentListItem(
 ) {
  const { t } = useTranslation();
  const user = useCurrentUser();
-  const locationSidebarContext = useLocationSidebarContext();
  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,17 +64,13 @@ 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;

  return (
-    <DocumentLink
-      ref={itemRef}
+    <CompositeItem
+      as={DocumentLink}
+      ref={ref}
      dir={document.dir}
      role="menuitem"
      $isStarred={document.isStarred}
@@ -97,17 +79,15 @@ function DocumentListItem(
        pathname: documentPath(document),
        state: {
          title: document.titleWithDefault,
-          sidebarContext,
        },
      }}
      {...rest}
-      {...rovingTabIndex}
    >
      <Content>
        <Heading dir={document.dir}>
-          {document.icon && (
+          {document.emoji && (
            <>
-              <Icon value={document.icon} color={document.color ?? undefined} />
+              <EmojiIcon emoji={document.emoji} size={24} />
              &nbsp;
            </>
          )}
@@ -119,16 +99,20 @@ function DocumentListItem(
          {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
+              content={t("Only visible to you")}
+              delay={500}
+              placement="top"
+            >
+              <Badge>{t("Draft")}</Badge>
+            </Tooltip>
+          )}
          {document.isTemplate && showTemplate && (
            <Badge primary>{t("Template")}</Badge>
          )}
@@ -158,7 +142,7 @@ function DocumentListItem(
          modal={false}
        />
      </Actions>
-    </DocumentLink>
+    </CompositeItem>
  );
 }

@@ -279,8 +263,6 @@ const ResultContext = styled(Highlight)`
  font-size: 15px;
  margin-top: -0.25em;
  margin-bottom: 0.25em;
-  max-height: 90px;
-  overflow: hidden;
 `;

 export default observer(React.forwardRef(DocumentListItem));
@@ -128,6 +128,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 +149,7 @@ const DocumentMeta: React.FC<Props> = ({
  }

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

@@ -185,9 +194,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 +219,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,49 @@
+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 { toast } from "sonner";
+import ConfirmationDialog from "~/components/ConfirmationDialog";
+import useStores from "~/hooks/useStores";
+import { documentPath } from "~/utils/routeHelpers";
+
+type Props = {
+  documentId: string;
+};
+
+function DocumentTemplatizeDialog({ documentId }: Props) {
+  const history = useHistory();
+  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));
+      toast.success(t("Template created, go ahead and customize it"));
+    }
+  }, [document, 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);
@@ -6,7 +6,7 @@ import { useTranslation } from "react-i18next";
 import { dateLocale, 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";
@@ -71,13 +71,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
              />
@@ -0,0 +1,97 @@
+import { observer } from "mobx-react";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { DocumentValidation } from "@shared/validations";
+import Document from "~/models/Document";
+import ConfirmationDialog from "~/components/ConfirmationDialog";
+import Input from "./Input";
+import Switch from "./Switch";
+import Text from "./Text";
+
+type Props = {
+  /** The original document to duplicate */
+  document: Document;
+  onSubmit: (documents: Document[]) => void;
+};
+
+function DuplicateDialog({ document, onSubmit }: Props) {
+  const { t } = useTranslation();
+  const defaultTitle = t(`Copy of {{ documentName }}`, {
+    documentName: document.title,
+  });
+  const [publish, setPublish] = React.useState<boolean>(!!document.publishedAt);
+  const [recursive, setRecursive] = React.useState<boolean>(true);
+  const [title, setTitle] = React.useState<string>(defaultTitle);
+
+  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 handleTitleChange = React.useCallback(
+    (ev: React.ChangeEvent<HTMLInputElement>) => {
+      setTitle(ev.target.value);
+    },
+    []
+  );
+
+  const handleSubmit = async () => {
+    const result = await document.duplicate({
+      publish,
+      recursive,
+      title,
+    });
+    onSubmit(result);
+  };
+
+  return (
+    <ConfirmationDialog onSubmit={handleSubmit} submitText={t("Duplicate")}>
+      <Input
+        autoFocus
+        autoSelect
+        name="title"
+        label={t("Title")}
+        onChange={handleTitleChange}
+        maxLength={DocumentValidation.maxTitleLength}
+        defaultValue={defaultTitle}
+      />
+      {!document.isTemplate && (
+        <>
+          {document.collectionId && (
+            <Text size="small">
+              <Switch
+                name="publish"
+                label={t("Published")}
+                labelPosition="right"
+                checked={publish}
+                onChange={handlePublishChange}
+              />
+            </Text>
+          )}
+          {document.publishedAt && (
+            <Text size="small">
+              <Switch
+                name="recursive"
+                label={t("Include nested documents")}
+                labelPosition="right"
+                checked={recursive}
+                onChange={handleRecursiveChange}
+              />
+            </Text>
+          )}
+        </>
+      )}
+    </ConfirmationDialog>
+  );
+}
+
+export default observer(DuplicateDialog);
@@ -1,4 +1,6 @@
+import deburr from "lodash/deburr";
 import difference from "lodash/difference";
+import sortBy from "lodash/sortBy";
 import { observer } from "mobx-react";
 import { DOMParser as ProsemirrorDOMParser } from "prosemirror-model";
 import { TextSelection } from "prosemirror-state";
@@ -7,7 +9,11 @@ import { mergeRefs } from "react-merge-refs";
 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 ClickablePadding from "~/components/ClickablePadding";
 import ErrorBoundary from "~/components/ErrorBoundary";
@@ -17,8 +23,11 @@ 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 useUserLocale from "~/hooks/useUserLocale";
+import { NotFoundError } from "~/utils/errors";
+import { uploadFile } from "~/utils/files";
 import lazyWithRetry from "~/utils/lazyWithRetry";
+import DocumentBreadcrumb from "./DocumentBreadcrumb";

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

@@ -33,31 +42,89 @@ export type Props = Optional<
 > & {
  shareId?: string | undefined;
  embedsDisabled?: boolean;
+  onHeadingsChange?: (headings: Heading[]) => void;
  onSynced?: () => Promise<void>;
  onPublish?: (event: React.MouseEvent) => void;
  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 { comments, documents } = useStores();
  const dictionary = useDictionary();
  const embeds = useEmbeds(!shareId);
  const localRef = React.useRef<SharedEditor>();
  const preferences = useCurrentUser({ rejectOnEmpty: false })?.preferences;
+  const previousHeadings = React.useRef<Heading[] | null>(null);
  const previousCommentIds = React.useRef<string[]>();

+  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 }) => ({
+          title: document.title,
+          subtitle: <DocumentBreadcrumb document={document} onlyText />,
+          url: document.url,
+        })),
+        (document) =>
+          deburr(document.title)
+            .toLowerCase()
+            .startsWith(deburr(term).toLowerCase())
+            ? -1
+            : 1
+      );
+    },
+    [locale, 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]
@@ -135,6 +202,21 @@ 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();
@@ -169,25 +251,26 @@ 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}
          embeds={embeds}
@@ -195,15 +278,16 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
          dictionary={dictionary}
          {...props}
          onClickLink={handleClickLink}
+          onSearchLink={handleSearchLink}
          onChange={handleChange}
          placeholder={props.placeholder || ""}
          defaultValue={props.defaultValue || ""}
        />
        {props.editorStyle?.paddingBottom && !props.readOnly && (
          <ClickablePadding
-            onClick={props.readOnly ? undefined : focusAtEnd}
-            onDrop={props.readOnly ? undefined : handleDrop}
-            onDragOver={props.readOnly ? undefined : handleDragOver}
+            onClick={focusAtEnd}
+            onDrop={handleDrop}
+            onDragOver={handleDragOver}
            minHeight={props.editorStyle.paddingBottom}
          />
        )}
@@ -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`};
-`;
@@ -0,0 +1,23 @@
+import styled from "styled-components";
+import Button from "~/components/Button";
+import { hover } from "~/styles";
+import Flex from "../Flex";
+
+export const EmojiButton = styled(Button)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+
+  &: ${hover},
+  &:active,
+  &[aria-expanded= "true"] {
+    opacity: 1 !important;
+  }
+`;
+
+export const Emoji = styled(Flex)<{ size?: number }>`
+  line-height: 1.6;
+  ${(props) => (props.size ? `font-size: ${props.size}px` : "")}
+`;
@@ -0,0 +1,262 @@
+import data from "@emoji-mart/data";
+import Picker from "@emoji-mart/react";
+import { SmileyIcon } from "outline-icons";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { usePopoverState, PopoverDisclosure } from "reakit/Popover";
+import styled, { useTheme } from "styled-components";
+import { depths, s } from "@shared/styles";
+import { toRGB } from "@shared/utils/color";
+import Button from "~/components/Button";
+import Popover from "~/components/Popover";
+import useStores from "~/hooks/useStores";
+import useUserLocale from "~/hooks/useUserLocale";
+import { Emoji, EmojiButton } from "./components";
+
+/* Locales supported by emoji-mart */
+const supportedLocales = [
+  "en",
+  "ar",
+  "be",
+  "cs",
+  "de",
+  "es",
+  "fa",
+  "fi",
+  "fr",
+  "hi",
+  "it",
+  "ja",
+  "ko",
+  "nl",
+  "pl",
+  "pt",
+  "ru",
+  "sa",
+  "tr",
+  "uk",
+  "vi",
+  "zh",
+];
+
+/**
+ * React hook to derive emoji picker's theme from UI theme
+ *
+ * @returns {string} Theme to use for emoji picker
+ */
+function usePickerTheme(): string {
+  const { ui } = useStores();
+  const { theme } = ui;
+
+  if (theme === "system") {
+    return "auto";
+  }
+
+  return theme;
+}
+
+type Props = {
+  /** The selected emoji, if any */
+  value?: string | null;
+  /** Callback when an emoji is selected */
+  onChange: (emoji: string | null) => void | Promise<void>;
+  /** Callback when the picker is opened */
+  onOpen?: () => void;
+  /** Callback when the picker is closed */
+  onClose?: () => void;
+  /** Callback when the picker is clicked outside of */
+  onClickOutside: () => void;
+  /** Whether to auto focus the search input on open */
+  autoFocus?: boolean;
+  /** Class name to apply to the trigger button */
+  className?: string;
+};
+
+function EmojiPicker({
+  value,
+  onOpen,
+  onClose,
+  onChange,
+  onClickOutside,
+  autoFocus,
+  className,
+}: Props) {
+  const { t } = useTranslation();
+  const pickerTheme = usePickerTheme();
+  const theme = useTheme();
+  const locale = useUserLocale(true) ?? "en";
+
+  const popover = usePopoverState({
+    placement: "bottom-start",
+    modal: true,
+    unstable_offset: [0, 0],
+  });
+
+  const [emojisPerLine, setEmojisPerLine] = React.useState(9);
+
+  const pickerRef = React.useRef<HTMLDivElement>(null);
+
+  React.useEffect(() => {
+    if (popover.visible) {
+      onOpen?.();
+    } else {
+      onClose?.();
+    }
+  }, [popover.visible, onOpen, onClose]);
+
+  React.useEffect(() => {
+    if (popover.visible && pickerRef.current) {
+      // 28 is picker's observed width when perLine is set to 0
+      // and 36 is the default emojiButtonSize
+      // Ref: https://github.com/missive/emoji-mart#options--props
+      setEmojisPerLine(Math.floor((pickerRef.current.clientWidth - 28) / 36));
+    }
+  }, [popover.visible]);
+
+  const handleEmojiChange = React.useCallback(
+    async (emoji) => {
+      popover.hide();
+      await onChange(emoji ? emoji.native : null);
+    },
+    [popover, onChange]
+  );
+
+  const handleClick = React.useCallback(
+    (ev: React.MouseEvent) => {
+      ev.stopPropagation();
+      if (popover.visible) {
+        popover.hide();
+      } else {
+        popover.show();
+      }
+    },
+    [popover]
+  );
+
+  const handleClickOutside = React.useCallback(() => {
+    // It was observed that onClickOutside got triggered
+    // even when the picker wasn't open or opened at all.
+    // Hence, this guard here...
+    if (popover.visible) {
+      onClickOutside();
+    }
+  }, [popover.visible, onClickOutside]);
+
+  // Auto focus search input when picker is opened
+  React.useLayoutEffect(() => {
+    if (autoFocus && popover.visible) {
+      requestAnimationFrame(() => {
+        const searchInput = pickerRef.current
+          ?.querySelector("em-emoji-picker")
+          ?.shadowRoot?.querySelector(
+            "input[type=search]"
+          ) as HTMLInputElement | null;
+        searchInput?.focus();
+      });
+    }
+  }, [autoFocus, popover.visible]);
+
+  return (
+    <>
+      <PopoverDisclosure {...popover}>
+        {(props) => (
+          <EmojiButton
+            {...props}
+            className={className}
+            onClick={handleClick}
+            icon={
+              value ? (
+                <Emoji size={32} align="center" justify="center">
+                  {value}
+                </Emoji>
+              ) : (
+                <StyledSmileyIcon size={32} color={theme.textTertiary} />
+              )
+            }
+            neutral
+            borderOnHover
+          />
+        )}
+      </PopoverDisclosure>
+      <PickerPopover
+        {...popover}
+        tabIndex={0}
+        // This prevents picker from closing when any of its
+        // children are focused, e.g, clicking on search bar or
+        // a click on skin tone button
+        onClick={(e) => e.stopPropagation()}
+        width={352}
+        aria-label={t("Emoji Picker")}
+      >
+        {popover.visible && (
+          <>
+            {value && (
+              <RemoveButton neutral onClick={() => handleEmojiChange(null)}>
+                {t("Remove")}
+              </RemoveButton>
+            )}
+            <PickerStyles ref={pickerRef}>
+              <Picker
+                locale={supportedLocales.includes(locale) ? locale : "en"}
+                data={data}
+                onEmojiSelect={handleEmojiChange}
+                theme={pickerTheme}
+                previewPosition="none"
+                perLine={emojisPerLine}
+                onClickOutside={handleClickOutside}
+              />
+            </PickerStyles>
+          </>
+        )}
+      </PickerPopover>
+    </>
+  );
+}
+
+const StyledSmileyIcon = styled(SmileyIcon)`
+  flex-shrink: 0;
+
+  @media print {
+    display: none;
+  }
+`;
+
+const RemoveButton = styled(Button)`
+  margin-left: -12px;
+  margin-bottom: 8px;
+  border-radius: 6px;
+  height: 24px;
+  font-size: 13px;
+
+  > :first-child {
+    min-height: unset;
+    line-height: unset;
+  }
+`;
+
+const PickerPopover = styled(Popover)`
+  z-index: ${depths.popover};
+  > :first-child {
+    padding-top: 8px;
+    padding-bottom: 0;
+    max-height: 488px;
+    overflow: unset;
+  }
+`;
+
+const PickerStyles = styled.div`
+  margin-left: -24px;
+  margin-right: -24px;
+  em-emoji-picker {
+    --shadow: none;
+    --font-family: ${s("fontFamily")};
+    --rgb-background: ${(props) => toRGB(props.theme.menuBackground)};
+    --rgb-accent: ${(props) => toRGB(props.theme.accent)};
+    --border-radius: 6px;
+    margin-left: auto;
+    margin-right: auto;
+    min-height: 443px;
+  }
+`;
+
+export default EmojiPicker;
@@ -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;
@@ -7,71 +7,41 @@ import {
  PublishIcon,
  MoveIcon,
  UnpublishIcon,
-  RestoreIcon,
-  UserIcon,
-  CrossIcon,
 } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { useLocation } from "react-router-dom";
+import { CompositeStateReturn } from "reakit/Composite";
 import styled, { css } from "styled-components";
-import EventBoundary from "@shared/components/EventBoundary";
-import { s, hover } from "@shared/styles";
-import { RevisionHelper } from "@shared/utils/RevisionHelper";
+import { s } from "@shared/styles";
 import Document from "~/models/Document";
-import { Avatar, AvatarSize } from "~/components/Avatar";
+import Event from "~/models/Event";
+import Avatar from "~/components/Avatar";
+import CompositeItem, {
+  Props as ItemProps,
+} from "~/components/List/CompositeItem";
 import Item, { Actions } from "~/components/List/Item";
 import Time from "~/components/Time";
-import { 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";
-import Text from "./Text";
-
-export type RevisionEvent = {
-  name: "revisions.create";
-  latest: boolean;
-};
-
-export type DocumentEvent = {
-  name:
-    | "documents.publish"
-    | "documents.unpublish"
-    | "documents.archive"
-    | "documents.unarchive"
-    | "documents.delete"
-    | "documents.restore"
-    | "documents.add_user"
-    | "documents.remove_user"
-    | "documents.move";
-  userId: string;
-};
-
-export type Event = { id: string; actorId: string; createdAt: string } & (
-  | RevisionEvent
-  | DocumentEvent
-);

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

-const EventListItem = ({ event, document, ...rest }: Props) => {
+const EventListItem = ({ event, latest, document, ...rest }: Props) => {
  const { t } = useTranslation();
-  const { revisions, users } = useStores();
-  const actor = "actorId" in event ? users.get(event.actorId) : undefined;
-  const user = "userId" in event ? users.get(event.userId) : undefined;
+  const { revisions } = useStores();
  const location = useLocation();
-  const sidebarContext = useLocationSidebarContext();
-  const revisionLoadedRef = React.useRef(false);
  const opts = {
-    userName: actor?.name,
+    userName: event.actor.name,
  };
  const isRevision = event.name === "revisions.create";
-  const isDerivedFromDocument =
-    event.id === RevisionHelper.latestId(document.id);
  let meta, icon, to: LocationDescriptor | undefined;

  const ref = React.useRef<HTMLAnchorElement>(null);
@@ -82,85 +52,69 @@ const EventListItem = ({ event, document, ...rest }: Props) => {
  };

  const prefetchRevision = async () => {
-    if (
-      !document.isDeleted &&
-      event.name === "revisions.create" &&
-      !isDerivedFromDocument &&
-      !revisionLoadedRef.current
-    ) {
-      await revisions.fetch(event.id, { force: true });
-      revisionLoadedRef.current = true;
+    if (event.name === "revisions.create" && event.modelId) {
+      await revisions.fetch(event.modelId);
    }
  };

  switch (event.name) {
    case "revisions.create":
      icon = <EditIcon size={16} />;
-      meta = event.latest ? (
+      meta = latest ? (
        <>
-          {t("Current version")} &middot; {actor?.name}
+          {t("Current version")} &middot; {event.actor.name}
        </>
      ) : (
        t("{{userName}} edited", opts)
      );
      to = {
-        pathname: documentHistoryPath(
-          document,
-          isDerivedFromDocument ? "latest" : event.id
-        ),
-        state: {
-          sidebarContext,
-          retainScrollPosition: true,
-        },
+        pathname: documentHistoryPath(document, event.modelId || "latest"),
+        state: { retainScrollPosition: true },
      };
      break;

    case "documents.archive":
-      icon = <ArchiveIcon />;
+      icon = <ArchiveIcon size={16} />;
      meta = t("{{userName}} archived", opts);
      break;

    case "documents.unarchive":
-      icon = <RestoreIcon />;
      meta = t("{{userName}} restored", opts);
      break;

    case "documents.delete":
-      icon = <TrashIcon />;
+      icon = <TrashIcon size={16} />;
      meta = t("{{userName}} deleted", opts);
      break;
    case "documents.add_user":
-      icon = <UserIcon />;
      meta = t("{{userName}} added {{addedUserName}}", {
        ...opts,
-        addedUserName: user?.name ?? t("a user"),
+        addedUserName: event.user?.name ?? t("a user"),
      });
      break;
    case "documents.remove_user":
-      icon = <CrossIcon />;
      meta = t("{{userName}} removed {{removedUserName}}", {
        ...opts,
-        removedUserName: user?.name ?? t("a user"),
+        removedUserName: event.user?.name ?? t("a user"),
      });
      break;

    case "documents.restore":
-      icon = <RestoreIcon />;
      meta = t("{{userName}} moved from trash", opts);
      break;

    case "documents.publish":
-      icon = <PublishIcon />;
+      icon = <PublishIcon size={16} />;
      meta = t("{{userName}} published", opts);
      break;

    case "documents.unpublish":
-      icon = <UnpublishIcon />;
+      icon = <UnpublishIcon size={16} />;
      meta = t("{{userName}} unpublished", opts);
      break;

    case "documents.move":
-      icon = <MoveIcon />;
+      icon = <MoveIcon size={16} />;
      meta = t("{{userName}} moved", opts);
      break;

@@ -181,14 +135,15 @@ const EventListItem = ({ event, document, ...rest }: Props) => {
    to = undefined;
  }

-  return event.name === "revisions.create" ? (
-    <RevisionItem
+  return (
+    <BaseItem
      small
      exact
      to={to}
      title={
        <Time
          dateTime={event.createdAt}
+          tooltipDelay={500}
          format={{
            en_US: "MMM do, h:mm a",
            fr_FR: "'Le 'd MMMM 'à' H:mm",
@@ -198,113 +153,79 @@ const EventListItem = ({ event, document, ...rest }: Props) => {
          onClick={handleTimeClick}
        />
      }
-      image={<Avatar model={actor} size={AvatarSize.Large} />}
-      subtitle={meta}
+      image={<Avatar model={event.actor} size={32} />}
+      subtitle={
+        <Subtitle>
+          {icon}
+          {meta}
+        </Subtitle>
+      }
      actions={
-        isRevision && isActive && !event.latest ? (
-          <StyledEventBoundary>
-            <RevisionMenu document={document} revisionId={event.id} />
-          </StyledEventBoundary>
+        isRevision && isActive && event.modelId && !latest ? (
+          <RevisionMenu document={document} revisionId={event.modelId} />
        ) : undefined
      }
      onMouseEnter={prefetchRevision}
      ref={ref}
      {...rest}
    />
-  ) : (
-    <EventItem>
-      <IconWrapper size="xsmall" type="secondary">
-        {icon}
-      </IconWrapper>
-      <Text size="xsmall" type="secondary">
-        {meta} &middot;{" "}
-        <Time dateTime={event.createdAt} relative shorten addSuffix />
-      </Text>
-    </EventItem>
  );
 };

-const lineStyle = css`
-  &::before {
-    content: "";
-    display: block;
-    position: absolute;
-    top: -8px;
-    left: 22px;
-    width: 1px;
-    height: calc(50% - 14px + 8px);
-    background: ${s("divider")};
-    mix-blend-mode: multiply;
-    z-index: 1;
+const BaseItem = React.forwardRef(function _BaseItem(
+  { to, ...rest }: ItemProps,
+  ref?: React.Ref<HTMLAnchorElement>
+) {
+  if (to) {
+    return <CompositeListItem to={to} ref={ref} {...rest} />;
  }

-  &:first-child::before {
-    display: none;
-  }
-
-  &:nth-child(2)::before {
-    display: none;
-  }
-
-  &::after {
-    content: "";
-    display: block;
-    position: absolute;
-    top: calc(50% + 14px);
-    left: 22px;
-    width: 1px;
-    height: calc(50% - 14px);
-    background: ${s("divider")};
-    mix-blend-mode: multiply;
-    z-index: 1;
-  }
-
-  &:last-child::after {
-    display: none;
-  }
-
-  h3 + &::before {
-    display: none;
-  }
-`;
-
-const IconWrapper = styled(Text)`
-  height: 24px;
-`;
-
-const EventItem = styled.li`
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  list-style: none;
-  margin: 8px 0;
-  padding: 4px 10px;
-  white-space: nowrap;
-  position: relative;
-
-  time {
-    white-space: nowrap;
-  }
+  return <ListItem ref={ref} {...rest} />;
+});

+const Subtitle = styled.span`
  svg {
-    flex-shrink: 0;
+    margin: -3px;
+    margin-right: 2px;
  }
-
-  ${lineStyle}
 `;

-const StyledEventBoundary = styled(EventBoundary)`
-  height: 24px;
-`;
-
-const RevisionItem = styled(Item)`
+const ItemStyle = css`
  border: 0;
  position: relative;
  margin: 8px 0;
  padding: 8px;
  border-radius: 8px;

-  ${lineStyle}
+  img {
+    border-color: transparent;
+  }
+
+  &::before {
+    content: "";
+    display: block;
+    position: absolute;
+    top: -4px;
+    left: 23px;
+    width: 2px;
+    height: calc(100% + 8px);
+    background: ${s("textSecondary")};
+    opacity: 0.25;
+  }
+
+  &:nth-child(2)::before {
+    height: 50%;
+    top: auto;
+    bottom: -4px;
+  }
+
+  &:last-child::before {
+    height: 50%;
+  }
+
+  &:first-child:last-child::before {
+    display: none;
+  }

  ${Actions} {
    opacity: 0.5;
@@ -315,4 +236,12 @@ const RevisionItem = styled(Item)`
  }
 `;

+const ListItem = styled(Item)`
+  ${ItemStyle}
+`;
+
+const CompositeListItem = styled(CompositeItem)`
+  ${ItemStyle}
+`;
+
 export default observer(EventListItem);
@@ -1,26 +1,18 @@
 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";
+import { AvatarSize } from "./Avatar/Avatar";

 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({
@@ -28,70 +20,55 @@ function Facepile({
  overflow = 0,
  size = AvatarSize.Large,
  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
+        .filter(Boolean)
+        .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={AvatarSize.Large} />;
 }

-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.textTertiary};
+  color: ${s("white")};
+  border: 2px solid ${s("background")};
+  text-align: center;
+  font-size: 12px;
+  font-weight: 600;
 `;

 const Avatars = styled(Flex)`
@@ -1,23 +1,18 @@
-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[];
@@ -26,9 +21,6 @@ type Props = {
  selectedPrefix?: string;
  className?: string;
  onSelect: (key: string | null | undefined) => void;
-  showFilter?: boolean;
-  fetchQuery?: (options: FetchPageParams) => Promise<PaginatedItem[]>;
-  fetchQueryOptions?: Record<string, string>;
 };

 const FilterOptions = ({
@@ -38,20 +30,13 @@ const FilterOptions = ({
  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 selectedLabel = selectedItems.length
    ? selectedItems
@@ -59,109 +44,6 @@ const FilterOptions = ({
        .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;
-
  return (
    <div>
      <MenuButton {...menu}>
@@ -171,73 +53,33 @@ const FilterOptions = ({
          </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={selectedKeys.includes(option.key)}
+            {...menu}
+          >
+            {option.icon && <Icon>{option.icon}</Icon>}
+            {option.note ? (
+              <LabelWithNote>
+                {option.label}
+                <Note>{option.note}</Note>
+              </LabelWithNote>
+            ) : (
+              option.label
+            )}
+          </MenuItem>
+        ))}
      </ContextMenu>
    </div>
  );
 };

-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;
@@ -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);
@@ -94,6 +94,7 @@ const Scene = styled.div`
  align-items: flex-start;
  width: 350px;
  background: ${s("background")};
+  transition: ${s("backgroundTransition")};
  border-radius: 8px;
  outline: none;
  opacity: 0;
@@ -3,10 +3,8 @@ import { observer } from "mobx-react";
 import { MenuIcon } from "outline-icons";
 import { transparentize } from "polished";
 import * as React from "react";
-import { mergeRefs } from "react-merge-refs";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
-import { useComponentSize } from "@shared/hooks/useComponentSize";
 import { depths, s } from "@shared/styles";
 import { supportsPassiveListener } from "@shared/utils/browser";
 import Button from "~/components/Button";
@@ -17,29 +15,20 @@ import useMobile from "~/hooks/useMobile";
 import useStores from "~/hooks/useStores";
 import { draggableOnDesktop, fadeOnDesktopBackgrounded } from "~/styles";
 import Desktop from "~/utils/Desktop";
-import { TooltipProvider } from "./TooltipContext";
-
-export const HEADER_HEIGHT = 64;

 type Props = {
  left?: React.ReactNode;
  title: React.ReactNode;
-  actions?:
-    | ((props: { isCompact: boolean }) => React.ReactNode)
-    | React.ReactNode;
+  actions?: React.ReactNode;
  hasSidebar?: boolean;
  className?: string;
 };

-function Header(
-  { left, title, actions, hasSidebar, className }: Props,
-  ref: React.RefObject<HTMLDivElement> | null
-) {
+function Header({ left, title, actions, hasSidebar, className }: Props) {
  const { ui } = useStores();
  const isMobile = useMobile();
  const hasMobileSidebar = hasSidebar && isMobile;
-  const internalRef = React.useRef<HTMLDivElement | null>(null);
-  const breadcrumbsRef = React.useRef<HTMLDivElement | null>(null);
+
  const passThrough = !actions && !left && !title;

  const [isScrolled, setScrolled] = React.useState(false);
@@ -62,50 +51,38 @@ function Header(
    });
  }, []);

-  const setBreadcrumbRef = React.useCallback((node: HTMLDivElement | null) => {
-    breadcrumbsRef.current = node?.firstElementChild as HTMLDivElement;
-  }, []);
-
-  const size = useComponentSize(internalRef);
-  const breadcrumbsSize = useComponentSize(breadcrumbsRef);
-  const breadcrumbMakesCompact = breadcrumbsSize.width > size.width / 3;
-  const isCompact = size.width < 1000 || breadcrumbMakesCompact;
-
  return (
-    <TooltipProvider>
-      <Wrapper
-        ref={mergeRefs([ref, internalRef])}
-        align="center"
-        shrink={false}
-        className={className}
-        $passThrough={passThrough}
-        $insetTitleAdjust={ui.sidebarIsClosed && Desktop.hasInsetTitlebar()}
-      >
-        {left || hasMobileSidebar ? (
-          <Breadcrumbs ref={setBreadcrumbRef}>
-            {hasMobileSidebar && (
-              <MobileMenuButton
-                onClick={ui.toggleMobileSidebar}
-                icon={<MenuIcon />}
-                neutral
-              />
-            )}
-            {left}
-          </Breadcrumbs>
-        ) : null}
+    <Wrapper
+      align="center"
+      shrink={false}
+      className={className}
+      $passThrough={passThrough}
+      $insetTitleAdjust={ui.sidebarIsClosed && Desktop.hasInsetTitlebar()}
+    >
+      {left || hasMobileSidebar ? (
+        <Breadcrumbs>
+          {hasMobileSidebar && (
+            <MobileMenuButton
+              onClick={ui.toggleMobileSidebar}
+              icon={<MenuIcon />}
+              neutral
+            />
+          )}
+          {left}
+        </Breadcrumbs>
+      ) : null}

-        {isScrolled && !isCompact ? (
-          <Title onClick={handleClickTitle}>
-            <Fade>{title}</Fade>
-          </Title>
-        ) : (
-          <div />
-        )}
-        <Actions align="center" justify="flex-end">
-          {typeof actions === "function" ? actions({ isCompact }) : actions}
-        </Actions>
-      </Wrapper>
-    </TooltipProvider>
+      {isScrolled ? (
+        <Title onClick={handleClickTitle}>
+          <Fade>{title}</Fade>
+        </Title>
+      ) : (
+        <div />
+      )}
+      <Actions align="center" justify="flex-end">
+        {actions}
+      </Actions>
+    </Wrapper>
  );
 }

@@ -151,8 +128,9 @@ const Wrapper = styled(Flex)<WrapperProps>`
      `};

  padding: 12px;
+  transition: all 100ms ease-out;
  transform: translate3d(0, 0, 0);
-  min-height: ${HEADER_HEIGHT}px;
+  min-height: 64px;
  justify-content: flex-start;
  ${draggableOnDesktop()}

@@ -172,6 +150,7 @@ const Wrapper = styled(Flex)<WrapperProps>`

  ${breakpoint("tablet")`
    padding: 16px;
+    justify-content: center;
    ${(props: WrapperProps) => props.$insetTitleAdjust && `padding-left: 64px;`}
    `};
 `;
@@ -210,4 +189,4 @@ const MobileMenuButton = styled(Button)`
  }
 `;

-export default observer(React.forwardRef(Header));
+export default observer(Header);
@@ -2,7 +2,6 @@ import escapeRegExp from "lodash/escapeRegExp";
 import * as React from "react";
 import replace from "string-replace-to-array";
 import styled from "styled-components";
-import { s } from "@shared/styles";

 type Props = React.HTMLAttributes<HTMLSpanElement> & {
  highlight: (string | null | undefined) | RegExp;
@@ -44,7 +43,7 @@ function Highlight({
 }

 export const Mark = styled.mark`
-  color: ${s("text")};
+  color: inherit;
  background: transparent;
  font-weight: 600;
 `;
@@ -61,7 +61,7 @@ export const Label = styled(Text).attrs({ size: "xsmall", weight: "bold" })<{
  color?: string;
 }>`
  background-color: ${(props) =>
-    props.color ?? props.theme.backgroundSecondary};
+    props.color ?? props.theme.secondaryBackground};
  color: ${(props) =>
    props.color ? getTextColor(props.color) : props.theme.text};
  width: fit-content;
@@ -125,7 +125,6 @@ function HoverPreviewDesktop({ element, data, dataLoading, onClose }: Props) {
                avatarUrl={data.avatarUrl}
                color={data.color}
                lastActive={data.lastActive}
-                email={data.email}
              />
            ) : data.type === UnfurlResourceType.Document ? (
              <HoverPreviewDocument
@@ -1,9 +1,7 @@
 import * as React from "react";
-import { richExtensions } from "@shared/editor/nodes";
 import { UnfurlResourceType, UnfurlResponse } from "@shared/types";
 import Editor from "~/components/Editor";
 import Flex from "~/components/Flex";
-import ErrorBoundary from "../ErrorBoundary";
 import {
  Preview,
  Title,
@@ -23,23 +21,20 @@ const HoverPreviewDocument = React.forwardRef(function _HoverPreviewDocument(
    <Preview to={url}>
      <Card ref={ref}>
        <CardContent>
-          <ErrorBoundary showTitle={false} reloadOnChunkMissing={false}>
-            <Flex column gap={2}>
-              <Title>{title}</Title>
-              <Info>{lastActivityByViewer}</Info>
-              <Description as="div">
-                <React.Suspense fallback={<div />}>
-                  <Editor
-                    key={id}
-                    extensions={richExtensions}
-                    defaultValue={summary}
-                    embedsDisabled
-                    readOnly
-                  />
-                </React.Suspense>
-              </Description>
-            </Flex>
-          </ErrorBoundary>
+          <Flex column gap={2}>
+            <Title>{title}</Title>
+            <Info>{lastActivityByViewer}</Info>
+            <Description as="div">
+              <React.Suspense fallback={<div />}>
+                <Editor
+                  key={id}
+                  defaultValue={summary}
+                  embedsDisabled
+                  readOnly
+                />
+              </React.Suspense>
+            </Description>
+          </Flex>
        </CardContent>
      </Card>
    </Preview>
@@ -1,8 +1,8 @@
 import * as React from "react";
 import { Trans } from "react-i18next";
 import { UnfurlResourceType, UnfurlResponse } from "@shared/types";
-import { Avatar } from "~/components/Avatar";
 import Flex from "~/components/Flex";
+import Avatar from "../Avatar";
 import { IssueStatusIcon } from "../Icons/IssueStatusIcon";
 import Text from "../Text";
 import Time from "../Time";
@@ -27,7 +27,7 @@ const HoverPreviewLink = React.forwardRef(function _HoverPreviewLink(
  return (
    <Preview as="a" href={url} target="_blank" rel="noopener noreferrer">
      <Flex column ref={ref}>
-        {thumbnailUrl ? <Thumbnail src={thumbnailUrl} alt="" /> : null}
+        {thumbnailUrl ? <Thumbnail src={thumbnailUrl} alt={""} /> : null}
        <Card>
          <CardContent>
            <Flex column>
@@ -1,13 +1,14 @@
 import * as React from "react";
 import { UnfurlResourceType, UnfurlResponse } from "@shared/types";
-import { Avatar, AvatarSize } from "~/components/Avatar";
+import Avatar from "~/components/Avatar";
+import { AvatarSize } from "~/components/Avatar/Avatar";
 import Flex from "~/components/Flex";
 import { Preview, Title, Info, Card, CardContent } from "./Components";

 type Props = Omit<UnfurlResponse[UnfurlResourceType.Mention], "type">;

 const HoverPreviewMention = React.forwardRef(function _HoverPreviewMention(
-  { avatarUrl, name, lastActive, color, email }: Props,
+  { avatarUrl, name, lastActive, color }: Props,
  ref: React.Ref<HTMLDivElement>
 ) {
  return (
@@ -25,7 +26,6 @@ const HoverPreviewMention = React.forwardRef(function _HoverPreviewMention(
            />
            <Flex column gap={2} justify="center">
              <Title>{name}</Title>
-              {email && <Info>{email}</Info>}
              <Info>{lastActive}</Info>
            </Flex>
          </Flex>
@@ -1,8 +1,8 @@
 import * as React from "react";
 import { Trans } from "react-i18next";
 import { UnfurlResourceType, UnfurlResponse } from "@shared/types";
-import { Avatar } from "~/components/Avatar";
 import Flex from "~/components/Flex";
+import Avatar from "../Avatar";
 import { PullRequestIcon } from "../Icons/PullRequestIcon";
 import Text from "../Text";
 import Time from "../Time";
@@ -0,0 +1,211 @@
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { PopoverDisclosure, usePopoverState } from "reakit";
+import { MenuItem } from "reakit/Menu";
+import styled, { useTheme } from "styled-components";
+import { IconLibrary } from "@shared/utils/IconLibrary";
+import { colorPalette } from "@shared/utils/collections";
+import Flex from "~/components/Flex";
+import NudeButton from "~/components/NudeButton";
+import Text from "~/components/Text";
+import useOnClickOutside from "~/hooks/useOnClickOutside";
+import lazyWithRetry from "~/utils/lazyWithRetry";
+import DelayedMount from "./DelayedMount";
+import InputSearch from "./InputSearch";
+import Popover from "./Popover";
+
+const icons = IconLibrary.mapping;
+
+const TwitterPicker = lazyWithRetry(
+  () => import("react-color/lib/components/twitter/Twitter")
+);
+
+type Props = {
+  onOpen?: () => void;
+  onClose?: () => void;
+  onChange: (color: string, icon: string) => void;
+  initial: string;
+  icon: string;
+  color: string;
+  className?: string;
+};
+
+function IconPicker({
+  onOpen,
+  onClose,
+  icon,
+  initial,
+  color,
+  onChange,
+  className,
+}: Props) {
+  const [query, setQuery] = React.useState("");
+  const { t } = useTranslation();
+  const theme = useTheme();
+  const popover = usePopoverState({
+    gutter: 0,
+    placement: "right",
+    modal: true,
+  });
+
+  React.useEffect(() => {
+    if (popover.visible) {
+      onOpen?.();
+    } else {
+      onClose?.();
+      setQuery("");
+    }
+  }, [onOpen, onClose, popover.visible]);
+
+  const filteredIcons = IconLibrary.findIcons(query);
+  const handleFilter = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setQuery(event.target.value.toLowerCase());
+  };
+
+  const styles = React.useMemo(
+    () => ({
+      default: {
+        body: {
+          padding: 0,
+          marginRight: -8,
+        },
+        hash: {
+          color: theme.text,
+          background: theme.inputBorder,
+        },
+        swatch: {
+          cursor: "var(--cursor-pointer)",
+        },
+        input: {
+          color: theme.text,
+          boxShadow: `inset 0 0 0 1px ${theme.inputBorder}`,
+          background: "transparent",
+        },
+      },
+    }),
+    [theme]
+  );
+
+  // Custom click outside handling rather than using `hideOnClickOutside` from reakit so that we can
+  // prevent event bubbling.
+  useOnClickOutside(
+    popover.unstable_popoverRef,
+    (event) => {
+      if (popover.visible) {
+        event.stopPropagation();
+        event.preventDefault();
+        popover.hide();
+      }
+    },
+    { capture: true }
+  );
+
+  const iconNames = Object.keys(icons);
+  const delayPerIcon = 250 / iconNames.length;
+
+  return (
+    <>
+      <PopoverDisclosure {...popover}>
+        {(props) => (
+          <NudeButton
+            aria-label={t("Show menu")}
+            className={className}
+            {...props}
+          >
+            <Icon
+              as={IconLibrary.getComponent(icon || "collection")}
+              color={color}
+            >
+              {initial}
+            </Icon>
+          </NudeButton>
+        )}
+      </PopoverDisclosure>
+      <Popover
+        {...popover}
+        width={552}
+        aria-label={t("Choose an icon")}
+        hideOnClickOutside={false}
+      >
+        <Flex column gap={12}>
+          <Text size="large" weight="xbold">
+            {t("Choose an icon")}
+          </Text>
+          <InputSearch
+            value={query}
+            placeholder={`${t("Filter")}…`}
+            onChange={handleFilter}
+            autoFocus
+          />
+          <div>
+            {iconNames.map((name, index) => (
+              <MenuItem key={name} onClick={() => onChange(color, name)}>
+                {(props) => (
+                  <IconButton
+                    style={
+                      {
+                        opacity: query
+                          ? filteredIcons.includes(name)
+                            ? 1
+                            : 0.3
+                          : undefined,
+                        "--delay": `${Math.round(index * delayPerIcon)}ms`,
+                      } as React.CSSProperties
+                    }
+                    {...props}
+                  >
+                    <Icon
+                      as={IconLibrary.getComponent(name)}
+                      color={color}
+                      size={30}
+                    >
+                      {initial}
+                    </Icon>
+                  </IconButton>
+                )}
+              </MenuItem>
+            ))}
+          </div>
+          <Flex>
+            <React.Suspense
+              fallback={
+                <DelayedMount>
+                  <Text>{t("Loading")}…</Text>
+                </DelayedMount>
+              }
+            >
+              <ColorPicker
+                color={color}
+                onChange={(color) => onChange(color.hex, icon)}
+                colors={colorPalette}
+                triangle="hide"
+                styles={styles}
+              />
+            </React.Suspense>
+          </Flex>
+        </Flex>
+      </Popover>
+    </>
+  );
+}
+
+const Icon = styled.svg`
+  transition: color 150ms ease-in-out, fill 150ms ease-in-out;
+  transition-delay: var(--delay);
+`;
+
+const IconButton = styled(NudeButton)`
+  vertical-align: top;
+  border-radius: 4px;
+  margin: 0px 6px 6px 0px;
+  width: 30px;
+  height: 30px;
+`;
+
+const ColorPicker = styled(TwitterPicker)`
+  box-shadow: none !important;
+  background: transparent !important;
+  width: 100% !important;
+`;
+
+export default IconPicker;
@@ -1,217 +0,0 @@
-import { BackIcon } from "outline-icons";
-import React from "react";
-import styled from "styled-components";
-import { breakpoints, s, hover } from "@shared/styles";
-import { colorPalette } from "@shared/utils/collections";
-import { validateColorHex } from "@shared/utils/color";
-import Flex from "~/components/Flex";
-import NudeButton from "~/components/NudeButton";
-import Text from "~/components/Text";
-
-enum Panel {
-  Builtin,
-  Hex,
-}
-
-type Props = {
-  width: number;
-  activeColor: string;
-  onSelect: (color: string) => void;
-};
-
-const ColorPicker = ({ width, activeColor, onSelect }: Props) => {
-  const [localValue, setLocalValue] = React.useState(activeColor);
-
-  const [panel, setPanel] = React.useState(
-    colorPalette.includes(activeColor) ? Panel.Builtin : Panel.Hex
-  );
-
-  const handleSwitcherClick = React.useCallback(() => {
-    setPanel(panel === Panel.Builtin ? Panel.Hex : Panel.Builtin);
-  }, [panel, setPanel]);
-
-  const isLargeMobile = width > breakpoints.mobileLarge + 12; // 12px for the Container padding
-
-  React.useEffect(() => {
-    setLocalValue(activeColor);
-    setPanel(colorPalette.includes(activeColor) ? Panel.Builtin : Panel.Hex);
-  }, [activeColor]);
-
-  return isLargeMobile ? (
-    <Container justify="space-between">
-      <LargeMobileBuiltinColors activeColor={activeColor} onClick={onSelect} />
-      <LargeMobileCustomColor
-        value={localValue}
-        setLocalValue={setLocalValue}
-        onValidHex={onSelect}
-      />
-    </Container>
-  ) : (
-    <Container gap={12}>
-      <PanelSwitcher align="center">
-        <SwitcherButton panel={panel} onClick={handleSwitcherClick}>
-          {panel === Panel.Builtin ? "#" : <BackIcon />}
-        </SwitcherButton>
-      </PanelSwitcher>
-      {panel === Panel.Builtin ? (
-        <BuiltinColors activeColor={activeColor} onClick={onSelect} />
-      ) : (
-        <CustomColor
-          value={localValue}
-          setLocalValue={setLocalValue}
-          onValidHex={onSelect}
-        />
-      )}
-    </Container>
-  );
-};
-
-const BuiltinColors = ({
-  activeColor,
-  onClick,
-  className,
-}: {
-  activeColor: string;
-  onClick: (color: string) => void;
-  className?: string;
-}) => (
-  <Flex className={className} justify="space-between" align="center" auto>
-    {colorPalette.map((color) => (
-      <ColorButton
-        key={color}
-        $color={color}
-        $active={color === activeColor}
-        onClick={() => onClick(color)}
-      >
-        <Selected />
-      </ColorButton>
-    ))}
-  </Flex>
-);
-
-const CustomColor = ({
-  value,
-  setLocalValue,
-  onValidHex,
-  className,
-}: {
-  value: string;
-  setLocalValue: (value: string) => void;
-  onValidHex: (color: string) => void;
-  className?: string;
-}) => {
-  const hasHexChars = React.useCallback(
-    (color: string) => /(^#[0-9A-F]{1,6}$)/i.test(color),
-    []
-  );
-
-  const handleInputChange = React.useCallback(
-    (ev: React.ChangeEvent<HTMLInputElement>) => {
-      const val = ev.target.value;
-
-      if (val === "" || val === "#") {
-        setLocalValue("#");
-        return;
-      }
-
-      const uppercasedVal = val.toUpperCase();
-
-      if (hasHexChars(uppercasedVal)) {
-        setLocalValue(uppercasedVal);
-      }
-
-      if (validateColorHex(uppercasedVal)) {
-        onValidHex(uppercasedVal);
-      }
-    },
-    [setLocalValue, hasHexChars, onValidHex]
-  );
-
-  return (
-    <Flex className={className} align="center" gap={8}>
-      <Text type="tertiary" size="small">
-        HEX
-      </Text>
-      <CustomColorInput
-        maxLength={7}
-        value={value}
-        onChange={handleInputChange}
-      />
-    </Flex>
-  );
-};
-
-const Container = styled(Flex)`
-  height: 48px;
-  padding: 8px 12px;
-  border-bottom: 1px solid ${s("inputBorder")};
-`;
-
-const Selected = styled.span`
-  width: 10px;
-  height: 5px;
-  border-left: 2px solid white;
-  border-bottom: 2px solid white;
-  transform: translateY(-25%) rotate(-45deg);
-`;
-
-const ColorButton = styled(NudeButton)<{ $color: string; $active: boolean }>`
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  background-color: ${({ $color }) => $color};
-
-  &: ${hover} {
-    outline: 2px solid ${s("menuBackground")} !important;
-    box-shadow: ${({ $color }) => `0px 0px 3px 3px ${$color}`};
-  }
-
-  & ${Selected} {
-    display: ${({ $active }) => ($active ? "block" : "none")};
-  }
-`;
-
-const PanelSwitcher = styled(Flex)`
-  width: 40px;
-  border-right: 1px solid ${s("inputBorder")};
-`;
-
-const SwitcherButton = styled(NudeButton)<{ panel: Panel }>`
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 14px;
-  border: 1px solid ${s("inputBorder")};
-  transition: all 100ms ease-in-out;
-
-  &: ${hover} {
-    border-color: ${s("inputBorderFocused")};
-  }
-`;
-
-const LargeMobileBuiltinColors = styled(BuiltinColors)`
-  max-width: 380px;
-  padding-right: 8px;
-`;
-
-const LargeMobileCustomColor = styled(CustomColor)`
-  padding-left: 8px;
-  border-left: 1px solid ${s("inputBorder")};
-  width: 120px;
-`;
-
-const CustomColorInput = styled.input.attrs(() => ({
-  type: "text",
-  autocomplete: "off",
-}))`
-  font-size: 14px;
-  color: ${s("textSecondary")};
-  background: transparent;
-  border: 0;
-  outline: 0;
-`;
-
-export default ColorPicker;
@@ -1,243 +0,0 @@
-import concat from "lodash/concat";
-import React from "react";
-import { useTranslation } from "react-i18next";
-import styled from "styled-components";
-import { EmojiCategory, EmojiSkinTone, IconType } from "@shared/types";
-import { getEmojis, getEmojisWithCategory, search } from "@shared/utils/emoji";
-import Flex from "~/components/Flex";
-import InputSearch from "~/components/InputSearch";
-import usePersistedState from "~/hooks/usePersistedState";
-import {
-  FREQUENTLY_USED_COUNT,
-  DisplayCategory,
-  emojiSkinToneKey,
-  emojisFreqKey,
-  lastEmojiKey,
-  sortFrequencies,
-} from "../utils";
-import GridTemplate, { DataNode } from "./GridTemplate";
-import SkinTonePicker from "./SkinTonePicker";
-
-const GRID_HEIGHT = 410;
-
-const useEmojiState = () => {
-  const [emojiSkinTone, setEmojiSkinTone] = usePersistedState<EmojiSkinTone>(
-    emojiSkinToneKey,
-    EmojiSkinTone.Default
-  );
-  const [emojisFreq, setEmojisFreq] = usePersistedState<Record<string, number>>(
-    emojisFreqKey,
-    {}
-  );
-  const [lastEmoji, setLastEmoji] = usePersistedState<string | undefined>(
-    lastEmojiKey,
-    undefined
-  );
-
-  const incrementEmojiCount = React.useCallback(
-    (emoji: string) => {
-      emojisFreq[emoji] = (emojisFreq[emoji] ?? 0) + 1;
-      setEmojisFreq({ ...emojisFreq });
-      setLastEmoji(emoji);
-    },
-    [emojisFreq, setEmojisFreq, setLastEmoji]
-  );
-
-  const getFreqEmojis = React.useCallback(() => {
-    const freqs = Object.entries(emojisFreq);
-
-    if (freqs.length > FREQUENTLY_USED_COUNT.Track) {
-      sortFrequencies(freqs).splice(FREQUENTLY_USED_COUNT.Track);
-      setEmojisFreq(Object.fromEntries(freqs));
-    }
-
-    const emojis = sortFrequencies(freqs)
-      .slice(0, FREQUENTLY_USED_COUNT.Get)
-      .map(([emoji, _]) => emoji);
-
-    const isLastPresent = emojis.includes(lastEmoji ?? "");
-    if (lastEmoji && !isLastPresent) {
-      emojis.pop();
-      emojis.push(lastEmoji);
-    }
-
-    return emojis;
-  }, [emojisFreq, setEmojisFreq, lastEmoji]);
-
-  return {
-    emojiSkinTone,
-    setEmojiSkinTone,
-    incrementEmojiCount,
-    getFreqEmojis,
-  };
-};
-
-type Props = {
-  panelWidth: number;
-  query: string;
-  panelActive: boolean;
-  height?: number;
-  onEmojiChange: (emoji: string) => void;
-  onQueryChange: (query: string) => void;
-};
-
-const EmojiPanel = ({
-  panelWidth,
-  query,
-  panelActive,
-  onEmojiChange,
-  onQueryChange,
-  height = GRID_HEIGHT,
-}: Props) => {
-  const { t } = useTranslation();
-
-  const searchRef = React.useRef<HTMLInputElement | null>(null);
-  const scrollableRef = React.useRef<HTMLDivElement | null>(null);
-
-  const {
-    emojiSkinTone: skinTone,
-    setEmojiSkinTone,
-    incrementEmojiCount,
-    getFreqEmojis,
-  } = useEmojiState();
-
-  const freqEmojis = React.useMemo(() => getFreqEmojis(), [getFreqEmojis]);
-
-  const handleFilter = React.useCallback(
-    (event: React.ChangeEvent<HTMLInputElement>) => {
-      onQueryChange(event.target.value);
-    },
-    [onQueryChange]
-  );
-
-  const handleSkinChange = React.useCallback(
-    (emojiSkinTone: EmojiSkinTone) => {
-      setEmojiSkinTone(emojiSkinTone);
-    },
-    [setEmojiSkinTone]
-  );
-
-  const handleEmojiSelection = React.useCallback(
-    ({ id, value }: { id: string; value: string }) => {
-      onEmojiChange(value);
-      incrementEmojiCount(id);
-    },
-    [onEmojiChange, incrementEmojiCount]
-  );
-
-  const isSearch = query !== "";
-  const templateData: DataNode[] = isSearch
-    ? getSearchResults({
-        query,
-        skinTone,
-      })
-    : getAllEmojis({
-        skinTone,
-        freqEmojis,
-      });
-
-  React.useEffect(() => {
-    if (scrollableRef.current) {
-      scrollableRef.current.scrollTop = 0;
-    }
-    searchRef.current?.focus();
-  }, [panelActive]);
-
-  return (
-    <Flex column>
-      <UserInputContainer align="center" gap={12}>
-        <StyledInputSearch
-          ref={searchRef}
-          value={query}
-          placeholder={`${t("Search emoji")}…`}
-          onChange={handleFilter}
-        />
-        <SkinTonePicker skinTone={skinTone} onChange={handleSkinChange} />
-      </UserInputContainer>
-      <GridTemplate
-        ref={scrollableRef}
-        width={panelWidth}
-        height={height - 48}
-        data={templateData}
-        onIconSelect={handleEmojiSelection}
-      />
-    </Flex>
-  );
-};
-
-const getSearchResults = ({
-  query,
-  skinTone,
-}: {
-  query: string;
-  skinTone: EmojiSkinTone;
-}): DataNode[] => {
-  const emojis = search({ query, skinTone });
-  return [
-    {
-      category: DisplayCategory.Search,
-      icons: emojis.map((emoji) => ({
-        type: IconType.Emoji,
-        id: emoji.id,
-        value: emoji.value,
-      })),
-    },
-  ];
-};
-
-const getAllEmojis = ({
-  skinTone,
-  freqEmojis,
-}: {
-  skinTone: EmojiSkinTone;
-  freqEmojis: string[];
-}): DataNode[] => {
-  const emojisWithCategory = getEmojisWithCategory({ skinTone });
-
-  const getFrequentEmojis = (): DataNode => {
-    const emojis = getEmojis({ ids: freqEmojis, skinTone });
-    return {
-      category: DisplayCategory.Frequent,
-      icons: emojis.map((emoji) => ({
-        type: IconType.Emoji,
-        id: emoji.id,
-        value: emoji.value,
-      })),
-    };
-  };
-
-  const getCategoryData = (emojiCategory: EmojiCategory): DataNode => {
-    const emojis = emojisWithCategory[emojiCategory] ?? [];
-    return {
-      category: emojiCategory,
-      icons: emojis.map((emoji) => ({
-        type: IconType.Emoji,
-        id: emoji.id,
-        value: emoji.value,
-      })),
-    };
-  };
-
-  return concat(
-    getFrequentEmojis(),
-    getCategoryData(EmojiCategory.People),
-    getCategoryData(EmojiCategory.Nature),
-    getCategoryData(EmojiCategory.Foods),
-    getCategoryData(EmojiCategory.Activity),
-    getCategoryData(EmojiCategory.Places),
-    getCategoryData(EmojiCategory.Objects),
-    getCategoryData(EmojiCategory.Symbols),
-    getCategoryData(EmojiCategory.Flags)
-  );
-};
-
-const UserInputContainer = styled(Flex)`
-  height: 48px;
-  padding: 6px 12px 0px;
-`;
-
-const StyledInputSearch = styled(InputSearch)`
-  flex-grow: 1;
-`;
-
-export default EmojiPanel;
@@ -1,62 +0,0 @@
-import React from "react";
-import { FixedSizeList, ListChildComponentProps } from "react-window";
-import styled from "styled-components";
-
-type Props = {
-  width: number;
-  height: number;
-  data: React.ReactNode[][];
-  columns: number;
-  itemWidth: number;
-};
-
-const Grid = (
-  { width, height, data, columns, itemWidth }: Props,
-  ref: React.Ref<HTMLDivElement>
-) => (
-  <Container
-    outerRef={ref}
-    width={width}
-    height={height}
-    itemCount={data.length}
-    itemSize={itemWidth}
-    itemData={{ data, columns }}
-  >
-    {Row}
-  </Container>
-);
-
-type RowProps = {
-  data: React.ReactNode[][];
-  columns: number;
-};
-
-const Row = ({ index, style, data }: ListChildComponentProps<RowProps>) => {
-  const { data: rows, columns } = data;
-  const row = rows[index];
-
-  return (
-    <RowContainer style={style} columns={columns}>
-      {row}
-    </RowContainer>
-  );
-};
-
-const Container = styled(FixedSizeList<RowProps>)`
-  padding: 0px 12px;
-  overflow-x: hidden !important;
-
-  // Needed for the absolutely positioned children
-  // to respect the VirtualList's padding
-  & > div {
-    position: relative;
-  }
-`;
-
-const RowContainer = styled.div<{ columns: number }>`
-  display: grid;
-  grid-template-columns: ${({ columns }) => `repeat(${columns}, 1fr)`};
-  align-content: center;
-`;
-
-export default React.forwardRef(Grid);
@@ -1,122 +0,0 @@
-import chunk from "lodash/chunk";
-import compact from "lodash/compact";
-import React from "react";
-import styled from "styled-components";
-import { IconType } from "@shared/types";
-import { IconLibrary } from "@shared/utils/IconLibrary";
-import { Emoji } from "~/components/Emoji";
-import Text from "~/components/Text";
-import { TRANSLATED_CATEGORIES } from "../utils";
-import Grid from "./Grid";
-import { IconButton } from "./IconButton";
-
-/**
- * icon/emoji size is 24px; and we add 4px padding on all sides,
- */
-const BUTTON_SIZE = 32;
-
-type OutlineNode = {
-  type: IconType.SVG;
-  name: string;
-  color: string;
-  initial: string;
-  delay: number;
-};
-
-type EmojiNode = {
-  type: IconType.Emoji;
-  id: string;
-  value: string;
-};
-
-export type DataNode = {
-  category: keyof typeof TRANSLATED_CATEGORIES;
-  icons: (OutlineNode | EmojiNode)[];
-};
-
-type Props = {
-  width: number;
-  height: number;
-  data: DataNode[];
-  onIconSelect: ({ id, value }: { id: string; value: string }) => void;
-};
-
-const GridTemplate = (
-  { width, height, data, onIconSelect }: Props,
-  ref: React.Ref<HTMLDivElement>
-) => {
-  // 24px padding for the Grid Container
-  const itemsPerRow = Math.floor((width - 24) / BUTTON_SIZE);
-
-  const gridItems = compact(
-    data.flatMap((node) => {
-      if (node.icons.length === 0) {
-        return [];
-      }
-
-      const category = (
-        <CategoryName
-          key={node.category}
-          type="tertiary"
-          size="xsmall"
-          weight="bold"
-        >
-          {TRANSLATED_CATEGORIES[node.category]}
-        </CategoryName>
-      );
-
-      const items = node.icons.map((item) => {
-        if (item.type === IconType.SVG) {
-          return (
-            <IconButton
-              key={item.name}
-              onClick={() => onIconSelect({ id: item.name, value: item.name })}
-              style={{ "--delay": `${item.delay}ms` } as React.CSSProperties}
-            >
-              <Icon as={IconLibrary.getComponent(item.name)} color={item.color}>
-                {item.initial}
-              </Icon>
-            </IconButton>
-          );
-        }
-
-        return (
-          <IconButton
-            key={item.id}
-            onClick={() => onIconSelect({ id: item.id, value: item.value })}
-          >
-            <Emoji width={24} height={24}>
-              {item.value}
-            </Emoji>
-          </IconButton>
-        );
-      });
-
-      const chunks = chunk(items, itemsPerRow);
-      return [[category], ...chunks];
-    })
-  );
-
-  return (
-    <Grid
-      ref={ref}
-      width={width}
-      height={height}
-      data={gridItems}
-      columns={itemsPerRow}
-      itemWidth={BUTTON_SIZE}
-    />
-  );
-};
-
-const CategoryName = styled(Text)`
-  grid-column: 1 / -1;
-  padding-left: 6px;
-`;
-
-const Icon = styled.svg`
-  transition: color 150ms ease-in-out, fill 150ms ease-in-out;
-  transition-delay: var(--delay);
-`;
-
-export default React.forwardRef(GridTemplate);
@@ -1,13 +0,0 @@
-import styled from "styled-components";
-import { s, hover } from "@shared/styles";
-import NudeButton from "~/components/NudeButton";
-
-export const IconButton = styled(NudeButton)<{ delay?: number }>`
-  width: 32px;
-  height: 32px;
-  padding: 4px;
-
-  &: ${hover} {
-    background: ${s("listItemHoverBackground")};
-  }
-`;
@@ -1,200 +0,0 @@
-import React from "react";
-import { useTranslation } from "react-i18next";
-import styled from "styled-components";
-import { IconType } from "@shared/types";
-import { IconLibrary } from "@shared/utils/IconLibrary";
-import Flex from "~/components/Flex";
-import InputSearch from "~/components/InputSearch";
-import usePersistedState from "~/hooks/usePersistedState";
-import {
-  FREQUENTLY_USED_COUNT,
-  DisplayCategory,
-  iconsFreqKey,
-  lastIconKey,
-  sortFrequencies,
-} from "../utils";
-import ColorPicker from "./ColorPicker";
-import GridTemplate, { DataNode } from "./GridTemplate";
-
-const IconNames = Object.keys(IconLibrary.mapping);
-const TotalIcons = IconNames.length;
-
-/**
- * This is needed as a constant for react-window.
- * Calculated from the heights of TabPanel, ColorPicker and InputSearch.
- */
-const GRID_HEIGHT = 314;
-
-const useIconState = () => {
-  const [iconsFreq, setIconsFreq] = usePersistedState<Record<string, number>>(
-    iconsFreqKey,
-    {}
-  );
-  const [lastIcon, setLastIcon] = usePersistedState<string | undefined>(
-    lastIconKey,
-    undefined
-  );
-
-  const incrementIconCount = React.useCallback(
-    (icon: string) => {
-      iconsFreq[icon] = (iconsFreq[icon] ?? 0) + 1;
-      setIconsFreq({ ...iconsFreq });
-      setLastIcon(icon);
-    },
-    [iconsFreq, setIconsFreq, setLastIcon]
-  );
-
-  const getFreqIcons = React.useCallback(() => {
-    const freqs = Object.entries(iconsFreq);
-
-    if (freqs.length > FREQUENTLY_USED_COUNT.Track) {
-      sortFrequencies(freqs).splice(FREQUENTLY_USED_COUNT.Track);
-      setIconsFreq(Object.fromEntries(freqs));
-    }
-
-    const icons = sortFrequencies(freqs)
-      .slice(0, FREQUENTLY_USED_COUNT.Get)
-      .map(([icon, _]) => icon);
-
-    const isLastPresent = icons.includes(lastIcon ?? "");
-    if (lastIcon && !isLastPresent) {
-      icons.pop();
-      icons.push(lastIcon);
-    }
-
-    return icons;
-  }, [iconsFreq, setIconsFreq, lastIcon]);
-
-  return {
-    incrementIconCount,
-    getFreqIcons,
-  };
-};
-
-type Props = {
-  panelWidth: number;
-  initial: string;
-  color: string;
-  query: string;
-  panelActive: boolean;
-  onIconChange: (icon: string) => void;
-  onColorChange: (icon: string) => void;
-  onQueryChange: (query: string) => void;
-};
-
-const IconPanel = ({
-  panelWidth,
-  initial,
-  color,
-  query,
-  panelActive,
-  onIconChange,
-  onColorChange,
-  onQueryChange,
-}: Props) => {
-  const { t } = useTranslation();
-
-  const searchRef = React.useRef<HTMLInputElement | null>(null);
-  const scrollableRef = React.useRef<HTMLDivElement | null>(null);
-
-  const { incrementIconCount, getFreqIcons } = useIconState();
-
-  const freqIcons = React.useMemo(() => getFreqIcons(), [getFreqIcons]);
-  const totalFreqIcons = freqIcons.length;
-
-  const filteredIcons = React.useMemo(
-    () => IconLibrary.findIcons(query),
-    [query]
-  );
-
-  const isSearch = query !== "";
-  const category = isSearch ? DisplayCategory.Search : DisplayCategory.All;
-  const delayPerIcon = 250 / (TotalIcons + totalFreqIcons);
-
-  const handleFilter = React.useCallback(
-    (event: React.ChangeEvent<HTMLInputElement>) => {
-      onQueryChange(event.target.value);
-    },
-    [onQueryChange]
-  );
-
-  const handleIconSelection = React.useCallback(
-    ({ id, value }: { id: string; value: string }) => {
-      onIconChange(value);
-      incrementIconCount(id);
-    },
-    [onIconChange, incrementIconCount]
-  );
-
-  const baseIcons: DataNode = {
-    category,
-    icons: filteredIcons.map((name, index) => ({
-      type: IconType.SVG,
-      name,
-      color,
-      initial,
-      delay: Math.round((index + totalFreqIcons) * delayPerIcon),
-      onClick: handleIconSelection,
-    })),
-  };
-
-  const templateData: DataNode[] = isSearch
-    ? [baseIcons]
-    : [
-        {
-          category: DisplayCategory.Frequent,
-          icons: freqIcons.map((name, index) => ({
-            type: IconType.SVG,
-            name,
-            color,
-            initial,
-            delay: Math.round((index + totalFreqIcons) * delayPerIcon),
-            onClick: handleIconSelection,
-          })),
-        },
-        baseIcons,
-      ];
-
-  React.useEffect(() => {
-    if (scrollableRef.current) {
-      scrollableRef.current.scrollTop = 0;
-    }
-    searchRef.current?.focus();
-  }, [panelActive]);
-
-  return (
-    <Flex column>
-      <InputSearchContainer align="center">
-        <StyledInputSearch
-          ref={searchRef}
-          value={query}
-          placeholder={`${t("Search icons")}…`}
-          onChange={handleFilter}
-        />
-      </InputSearchContainer>
-      <ColorPicker
-        width={panelWidth}
-        activeColor={color}
-        onSelect={onColorChange}
-      />
-      <GridTemplate
-        ref={scrollableRef}
-        width={panelWidth}
-        height={GRID_HEIGHT}
-        data={templateData}
-        onIconSelect={handleIconSelection}
-      />
-    </Flex>
-  );
-};
-
-const InputSearchContainer = styled(Flex)`
-  height: 48px;
-  padding: 6px 12px 0px;
-`;
-
-const StyledInputSearch = styled(InputSearch)`
-  flex-grow: 1;
-`;
-
-export default IconPanel;
@@ -1,19 +0,0 @@
-import styled, { css } from "styled-components";
-import { s, hover } from "@shared/styles";
-import NudeButton from "~/components/NudeButton";
-
-export const PopoverButton = styled(NudeButton)<{ $borderOnHover?: boolean }>`
-  &: ${hover},
-  &:active,
-  &[aria-expanded= "true"] {
-    opacity: 1 !important;
-
-    ${({ $borderOnHover }) =>
-      $borderOnHover &&
-      css`
-        background: ${s("buttonNeutralBackground")};
-        box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px,
-          ${s("buttonNeutralBorder")} 0 0 0 1px inset;
-      `};
-  }
-`;
--- a/Show More
+++ b/Show More