clear secret

Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>

.circleci/config.yml

@@ -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/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/v7,linux/arm64/v8,linux/ppc64le,linux/s390x --push .
+            else
+              docker buildx build -t $IMAGE_NAME:latest -t $IMAGE_NAME:${CIRCLE_TAG/v/''} --platform linux/amd64,linux/arm/v7,linux/arm64/v8,linux/ppc64le,linux/s390x --push .
+            fi
+
+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: /.*/

.circleci/run-build-locally.sh

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

.env.development

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

.env.sample

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

.github/ISSUE_TEMPLATE/bug_report.md

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

.github/ISSUE_TEMPLATE/bug_report.yml

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

.github/dependabot.yml

@@ -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/*"

.github/workflows/ci.yml

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

.github/workflows/docker.yml

@@ -1,52 +0,0 @@
-name: Docker
-
-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_TOKEN }}
-
-      - 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 }}

.github/workflows/stale.yml

@@ -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.*, ',') }}

.jestconfig.json

@@ -14,8 +14,7 @@
       "setupFilesAfterEnv": ["<rootDir>/server/test/setup.ts"],
       "globalSetup": "<rootDir>/server/test/globalSetup.js",
       "globalTeardown": "<rootDir>/server/test/globalTeardown.js",
-      "testEnvironment": "node",
-      "testTimeout": 10000
+      "testEnvironment": "node"
     },
     {
       "displayName": "app",

LICENSE

@@ -3,8 +3,8 @@ Business Source License 1.1
 Parameters
 
 Licensor:             General Outline, Inc.
-Licensed Work:        Outline 0.82.0
-                      The Licensed Work is (c) 2025 General Outline, Inc.
+Licensed Work:        Outline 0.80.2
+                      The Licensed Work is (c) 2024 General Outline, Inc.
 Additional Use Grant: You may make use of the Licensed Work, provided that
                       you may not use the Licensed Work for a Document
                       Service.
@@ -15,7 +15,7 @@ Additional Use Grant: You may make use of the Licensed Work, provided that
                       Licensed Work by creating teams and documents
                       controlled by such third parties.
 
-Change Date:          2029-02-15
+Change Date:          2028-09-26
 
 Change License:       Apache License, Version 2.0
 

app/actions/definitions/collections.tsx

@@ -1,25 +1,20 @@
 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";
@@ -61,7 +56,7 @@ export const createCollection = createAction({
   keywords: "create",
   visible: ({ stores }) =>
     stores.policies.abilities(stores.auth.team?.id || "").createCollection,
-  perform: ({ t, event, stores }) => {
+  perform: ({ t, event }) => {
     event?.preventDefault();
     event?.stopPropagation();
     stores.dialogs.openModal({
@@ -77,10 +72,10 @@ export const editCollection = createAction({
   analyticsName: "Edit collection",
   section: ActiveCollectionSection,
   icon: <EditIcon />,
-  visible: ({ activeCollectionId, stores }) =>
+  visible: ({ activeCollectionId }) =>
     !!activeCollectionId &&
     stores.policies.abilities(activeCollectionId).update,
-  perform: ({ t, activeCollectionId, stores }) => {
+  perform: ({ t, activeCollectionId }) => {
     if (!activeCollectionId) {
       return;
     }
@@ -103,10 +98,10 @@ export const editCollectionPermissions = createAction({
   analyticsName: "Collection permissions",
   section: ActiveCollectionSection,
   icon: <PadlockIcon />,
-  visible: ({ activeCollectionId, stores }) =>
+  visible: ({ activeCollectionId }) =>
     !!activeCollectionId &&
     stores.policies.abilities(activeCollectionId).update,
-  perform: ({ t, activeCollectionId, stores }) => {
+  perform: ({ t, activeCollectionId }) => {
     if (!activeCollectionId) {
       return;
     }
@@ -134,20 +129,9 @@ export const searchInCollection = createAction({
   analyticsName: "Search collection",
   section: ActiveCollectionSection,
   icon: <SearchIcon />,
-  visible: ({ activeCollectionId, stores }) => {
-    if (!activeCollectionId) {
-      return false;
-    }
-
-    const collection = stores.collections.get(activeCollectionId);
-
-    if (!collection?.isActive) {
-      return false;
-    }
-
-    return stores.policies.abilities(activeCollectionId).readDocument;
-  },
-
+  visible: ({ activeCollectionId }) =>
+    !!activeCollectionId &&
+    stores.policies.abilities(activeCollectionId).readDocument,
   perform: ({ activeCollectionId }) => {
     history.push(searchPath(undefined, { collectionId: activeCollectionId }));
   },
@@ -159,7 +143,7 @@ export const starCollection = createAction({
   section: ActiveCollectionSection,
   icon: <StarredIcon />,
   keywords: "favorite bookmark",
-  visible: ({ activeCollectionId, stores }) => {
+  visible: ({ activeCollectionId }) => {
     if (!activeCollectionId) {
       return false;
     }
@@ -169,7 +153,7 @@ export const starCollection = createAction({
       stores.policies.abilities(activeCollectionId).star
     );
   },
-  perform: async ({ activeCollectionId, stores }) => {
+  perform: async ({ activeCollectionId }) => {
     if (!activeCollectionId) {
       return;
     }
@@ -186,7 +170,7 @@ export const unstarCollection = createAction({
   section: ActiveCollectionSection,
   icon: <UnstarredIcon />,
   keywords: "unfavorite unbookmark",
-  visible: ({ activeCollectionId, stores }) => {
+  visible: ({ activeCollectionId }) => {
     if (!activeCollectionId) {
       return false;
     }
@@ -196,7 +180,7 @@ export const unstarCollection = createAction({
       stores.policies.abilities(activeCollectionId).unstar
     );
   },
-  perform: async ({ activeCollectionId, stores }) => {
+  perform: async ({ activeCollectionId }) => {
     if (!activeCollectionId) {
       return;
     }
@@ -206,145 +190,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,
   dangerous: true,
   icon: <TrashIcon />,
-  visible: ({ activeCollectionId, stores }) => {
+  visible: ({ activeCollectionId }) => {
     if (!activeCollectionId) {
       return false;
     }
     return stores.policies.abilities(activeCollectionId).delete;
   },
-  perform: ({ activeCollectionId, t, stores }) => {
+  perform: ({ activeCollectionId, t }) => {
     if (!activeCollectionId) {
       return;
     }
@@ -372,7 +230,7 @@ export const createTemplate = createAction({
   section: ActiveCollectionSection,
   icon: <ShapesIcon />,
   keywords: "new create template",
-  visible: ({ activeCollectionId, stores }) =>
+  visible: ({ activeCollectionId }) =>
     !!(
       !!activeCollectionId &&
       stores.policies.abilities(activeCollectionId).createDocument
@@ -392,7 +250,5 @@ export const rootCollectionActions = [
   createCollection,
   starCollection,
   unstarCollection,
-  subscribeCollection,
-  unsubscribeCollection,
   deleteCollection,
 ];

app/actions/definitions/comments.tsx

@@ -1,10 +1,9 @@
-import { DoneIcon, SmileyIcon, TrashIcon } from "outline-icons";
+import { DoneIcon, 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";
@@ -53,13 +52,9 @@ export const resolveCommentFactory = ({
     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,
-        },
+        state: null,
       });
 
       onResolve();
@@ -85,39 +80,11 @@ export const unresolveCommentFactory = ({
     perform: async () => {
       await comment.unresolve();
 
-      const locationState = history.location.state as Record<string, unknown>;
       history.replace({
         ...history.location,
-        state: {
-          sidebarContext: locationState["sidebarContext"],
-          commentId: undefined,
-        },
+        state: null,
       });
 
       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} />,
-      });
-    },
-  });

app/actions/definitions/developer.tsx

@@ -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,
   ],
 });
 

app/actions/definitions/documents.tsx

@@ -28,25 +28,23 @@ import {
   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 { 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 DuplicateDialog from "~/components/DuplicateDialog";
+import Icon from "~/components/Icon";
 import MarkdownIcon from "~/components/Icons/MarkdownIcon";
 import SharePopover from "~/components/Sharing/Document";
 import { getHeaderExpandedKey } from "~/components/Sidebar/components/Header";
@@ -125,50 +123,17 @@ export const createDocument = createAction({
     }),
 });
 
-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,
-    }),
-});
-
 export const createDocumentFromTemplate = createAction({
   name: ({ t }) => t("New from template"),
   analyticsName: "New document",
   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;
-  },
+  visible: ({ currentTeamId, activeDocumentId, stores }) =>
+    !!currentTeamId &&
+    !!activeDocumentId &&
+    !!stores.documents.get(activeDocumentId)?.template &&
+    stores.policies.abilities(currentTeamId).createDocument,
   perform: ({ activeCollectionId, activeDocumentId, sidebarContext }) =>
     history.push(
       newDocumentPath(activeCollectionId, { templateId: activeDocumentId }),
@@ -333,7 +298,6 @@ export const subscribeDocument = createAction({
     const document = stores.documents.get(activeDocumentId);
 
     return (
-      !document?.collection?.isSubscribed &&
       !document?.isSubscribed &&
       stores.policies.abilities(activeDocumentId).subscribe
     );
@@ -362,9 +326,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,7 +337,7 @@ export const unsubscribeDocument = createAction({
 
     const document = stores.documents.get(activeDocumentId);
 
-    await document?.unsubscribe();
+    await document?.unsubscribe(currentUserId);
 
     toast.success(t("Unsubscribed from document notifications"));
   },
@@ -395,6 +358,8 @@ export const shareDocument = createAction({
     }
 
     const document = stores.documents.get(activeDocumentId);
+    const share = stores.shares.getByDocumentId(activeDocumentId);
+    const sharedParent = stores.shares.getByDocumentParents(activeDocumentId);
     if (!document) {
       return;
     }
@@ -405,6 +370,8 @@ export const shareDocument = createAction({
       content: (
         <SharePopover
           document={document}
+          share={share}
+          sharedParent={sharedParent}
           onRequestClose={stores.dialogs.closeAllModals}
           visible
         />
@@ -578,7 +545,7 @@ export const duplicateDocument = createAction({
     stores.dialogs.openModal({
       title: t("Copy document"),
       content: (
-        <DocumentCopy
+        <DuplicateDialog
           document={document}
           onSubmit={(response) => {
             stores.dialogs.closeAllModals();
@@ -683,7 +650,6 @@ export const searchInDocument = createAction({
   name: ({ t }) => t("Search in document"),
   analyticsName: "Search document",
   section: ActiveDocumentSection,
-  shortcut: [`Meta+/`],
   icon: <SearchIcon />,
   visible: ({ stores, activeDocumentId }) => {
     if (!activeDocumentId) {
@@ -749,6 +715,7 @@ export const importDocument = createAction({
         history.push(document.url);
       } catch (err) {
         toast.error(err.message);
+        throw err;
       }
     };
 
@@ -1070,7 +1037,7 @@ export const openDocumentComments = createAction({
       return;
     }
 
-    stores.ui.toggleComments();
+    stores.ui.toggleComments(activeDocumentId);
   },
 });
 
@@ -1156,48 +1123,10 @@ 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,
   deleteDocument,
   importDocument,
@@ -1211,9 +1140,7 @@ export const rootDocumentActions = [
   unpublishDocument,
   subscribeDocument,
   unsubscribeDocument,
-  searchInDocument,
   duplicateDocument,
-  leaveDocument,
   moveTemplateToWorkspace,
   moveDocumentToCollection,
   openRandomDocument,

app/actions/definitions/navigation.tsx

@@ -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",

app/actions/sections.ts

@@ -2,8 +2,6 @@ import { ActionContext } from "~/types";
 
 export const CollectionSection = ({ t }: ActionContext) => t("Collection");
 
-export const CollectionsSection = ({ t }: ActionContext) => t("Collections");
-
 export const ActiveCollectionSection = ({ t, stores }: ActionContext) => {
   const activeCollection = stores.collections.active;
   return `${t("Collection")} · ${activeCollection?.name}`;
@@ -15,8 +13,6 @@ 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}`;
@@ -38,8 +34,6 @@ 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) =>

app/components/Actions.ts

@@ -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);
 

app/components/Authenticated.tsx

@@ -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);

app/components/AuthenticatedLayout.tsx

@@ -94,7 +94,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 = (

app/components/Avatar/Avatar.tsx

@@ -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;
 `;

app/components/Avatar/AvatarWithPresence.tsx

@@ -5,7 +5,7 @@ import styled, { css } from "styled-components";
 import { s } from "@shared/styles";
 import User from "~/models/User";
 import Tooltip from "~/components/Tooltip";
-import Avatar, { AvatarSize } from "./Avatar";
+import Avatar 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%;

app/components/Avatar/Initials.tsx

@@ -1,33 +1,27 @@
-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: ${s("white75")};
+  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;
 `;
 

app/components/Breadcrumb.tsx

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

app/components/Button.tsx

@@ -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";
@@ -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);

app/components/Collaborators.tsx

@@ -7,7 +7,7 @@ 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";
 import DocumentViews from "~/components/DocumentViews";
 import Facepile from "~/components/Facepile";
 import NudeButton from "~/components/NudeButton";
@@ -18,8 +18,6 @@ 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;
 };
 
 /**
@@ -27,7 +25,6 @@ type Props = {
  * and presence status.
  */
 function Collaborators(props: Props) {
-  const { limit = 6 } = props;
   const { t } = useTranslation();
   const user = useCurrentUser();
   const currentUserId = user?.id;
@@ -78,56 +75,50 @@ 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]
-  );
+  const limit = 8;
 
   return (
     <>
       <PopoverDisclosure {...popover}>
         {(popoverProps) => (
           <NudeButton
-            width={Math.min(collaborators.length, limit) * AvatarSize.Large}
-            height={AvatarSize.Large}
+            width={Math.min(collaborators.length, limit) * 32}
+            height={32}
             {...popoverProps}
           >
             <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>
         )}

app/components/Collection/CollectionForm.tsx

@@ -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,6 +11,7 @@ import { CollectionValidation } from "@shared/validations";
 import Collection from "~/models/Collection";
 import Button from "~/components/Button";
 import Flex from "~/components/Flex";
+import Icon from "~/components/Icon";
 import Input from "~/components/Input";
 import InputSelectPermission from "~/components/InputSelectPermission";
 import Switch from "~/components/Switch";

app/components/CollectionBreadcrumb.tsx

@@ -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 />;
-};

app/components/CollectionDescription.tsx

@@ -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);

app/components/CommandBar/CommandBar.tsx

@@ -77,10 +77,7 @@ const SearchInput = styled(KBarSearch)`
   border: none;
   background: ${s("menuBackground")};
   color: ${s("text")};
-
-  &:not(:last-child) {
-    border-bottom: 1px solid ${s("inputBorder")};
-  }
+  border-bottom: 1px solid ${s("inputBorder")};
 
   &:disabled,
   &::placeholder {

app/components/CommandBar/CommandBarItem.tsx

@@ -3,7 +3,6 @@ import { ArrowIcon, BackIcon } from "outline-icons";
 import * as React from "react";
 import styled, { css, useTheme } from "styled-components";
 import { s, ellipsis } from "@shared/styles";
-import { normalizeKeyDisplay } from "@shared/utils/keyboard";
 import Flex from "~/components/Flex";
 import Key from "~/components/Key";
 import Text from "~/components/Text";
@@ -71,7 +70,7 @@ function CommandBarItem(
                 ""
               )}
               {sc.split("+").map((key) => (
-                <Key key={key}>{normalizeKeyDisplay(key)}</Key>
+                <Key key={key}>{key}</Key>
               ))}
             </React.Fragment>
           ))}

app/components/CommandBar/CommandBarResults.tsx

@@ -7,10 +7,6 @@ import CommandBarItem from "./CommandBarItem";
 export default function CommandBarResults() {
   const { results, rootActionId } = useMatches();
 
-  if (results.length === 0) {
-    return null;
-  }
-
   return (
     <Container>
       <KBarResults

app/components/CommandBar/useRecentDocumentActions.tsx

@@ -1,6 +1,6 @@
 import { DocumentIcon } from "outline-icons";
 import * as React from "react";
-import Icon from "@shared/components/Icon";
+import Icon from "~/components/Icon";
 import { createAction } from "~/actions";
 import { RecentSection } from "~/actions/sections";
 import useStores from "~/hooks/useStores";

app/components/CommandBar/useTemplatesAction.tsx

@@ -1,12 +1,8 @@
 import { NewDocumentIcon, ShapesIcon } from "outline-icons";
 import * as React from "react";
-import Icon from "@shared/components/Icon";
+import Icon from "~/components/Icon";
 import { createAction } from "~/actions";
-import {
-  ActiveCollectionSection,
-  DocumentSection,
-  TeamSection,
-} from "~/actions/sections";
+import { DocumentSection } from "~/actions/sections";
 import useStores from "~/hooks/useStores";
 import history from "~/utils/history";
 import { newDocumentPath } from "~/utils/routeHelpers";
@@ -15,42 +11,26 @@ const useTemplatesAction = () => {
   const { documents } = useStores();
 
   React.useEffect(() => {
-    void documents.fetchAllTemplates();
+    void documents.fetchTemplates();
   }, [documents]);
 
   const actions = React.useMemo(
     () =>
-      documents.templatesAlphabetical.map((template) =>
+      documents.templatesAlphabetical.map((item) =>
         createAction({
-          name: template.titleWithDefault,
+          name: item.titleWithDefault,
           analyticsName: "New document",
-          section: template.isWorkspaceTemplate
-            ? TeamSection
-            : ActiveCollectionSection,
-          icon: template.icon ? (
-            <Icon value={template.icon} color={template.color ?? undefined} />
+          section: DocumentSection,
+          icon: item.icon ? (
+            <Icon value={item.icon} color={item.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,
+              newDocumentPath(item.collectionId ?? activeCollectionId, {
+                templateId: item.id,
               }),
               {
                 sidebarContext,
@@ -69,15 +49,9 @@ const useTemplatesAction = () => {
         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
-          );
-        },
+        visible: ({ currentTeamId, stores }) =>
+          !!currentTeamId &&
+          stores.policies.abilities(currentTeamId).createDocument,
         children: () => actions,
       }),
     [actions]

app/components/ConfirmMoveDialog.tsx

@@ -1,12 +1,10 @@
 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. */
@@ -23,38 +21,19 @@ 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 accessMapping = {
+    [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();
-    }
+    await documents.move({
+      documentId: item.id,
+      collectionId: collection.id,
+      ...rest,
+    });
+    dialogs.closeAllModals();
   };
 
   return (

app/components/ConfirmationDialog.tsx

@@ -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);

app/components/ConnectionStatus.tsx

@@ -35,7 +35,7 @@ function ConnectionStatus() {
   };
 
   const message = ui.multiplayerErrorCode
-    ? codeToMessage[ui.multiplayerErrorCode as keyof typeof codeToMessage]
+    ? codeToMessage[ui.multiplayerErrorCode]
     : undefined;
 
   return ui.multiplayerStatus === "connecting" ||

app/components/ContentEditable.tsx

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

app/components/ContextMenu/MenuItem.tsx

@@ -13,7 +13,6 @@ import MenuIconWrapper from "./MenuIconWrapper";
 type Props = {
   id?: string;
   onClick?: (event: React.MouseEvent) => void | Promise<void>;
-  onPointerMove?: (event: React.MouseEvent) => void | Promise<void>;
   active?: boolean;
   selected?: boolean;
   disabled?: boolean;
@@ -24,7 +23,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;
 };
@@ -32,7 +31,6 @@ type Props = {
 const MenuItem = (
   {
     onClick,
-    onPointerMove,
     children,
     active,
     selected,
@@ -92,7 +90,6 @@ const MenuItem = (
   return (
     <BaseMenuItem
       onClick={disabled ? undefined : onClick}
-      onPointerMove={disabled ? undefined : onPointerMove}
       disabled={disabled}
       hide={hide}
       {...rest}
@@ -112,8 +109,6 @@ const Title = styled.div`
   ${ellipsis()}
   flex-grow: 1;
   display: flex;
-  align-items: center;
-  gap: 8px;
 `;
 
 type MenuAnchorProps = {
@@ -161,9 +156,6 @@ export const MenuAnchorCSS = css<MenuAnchorProps>`
     &:focus-visible {
       color: ${props.theme.accentText};
       background: ${props.dangerous ? props.theme.danger : props.theme.accent};
-      outline-color: ${
-        props.dangerous ? props.theme.danger : props.theme.accent
-      };
       box-shadow: none;
       cursor: var(--pointer);
 

app/components/ContextMenu/Template.tsx

@@ -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";
@@ -168,7 +167,7 @@ function Template({ items, actions, context, showIcons, ...menu }: Props) {
         }
 
         if (item.type === "button") {
-          const menuItem = (
+          return (
             <MenuItem
               as="button"
               id={`${item.title}-${index}`}
@@ -183,14 +182,6 @@ function Template({ items, actions, context, showIcons, ...menu }: Props) {
               {item.title}
             </MenuItem>
           );
-
-          return item.tooltip ? (
-            <Tooltip content={item.tooltip} placement={"bottom"}>
-              <div>{menuItem}</div>
-            </Tooltip>
-          ) : (
-            <>{menuItem}</>
-          );
         }
 
         if (item.type === "submenu") {

app/components/ContextMenu/index.tsx

@@ -262,6 +262,22 @@ export const Position = styled.div`
     transition-property: outline-width;
     transition-duration: 0;
     outline: none;
+
+    &:after {
+      content: "";
+      position: absolute;
+      top: 1px;
+      left: 1px;
+      right: 1px;
+      bottom: 1px;
+      pointer-events: none;
+      border-radius: 4px;
+
+      outline-color: ${s("accent")};
+      outline-width: initial;
+      outline-offset: -1px;
+      outline-style: solid;
+    }
   }
 
   /*

app/components/DocumentBreadcrumb.tsx

@@ -3,16 +3,20 @@ 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 Icon from "~/components/Icon";
 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";
 
 type Props = {
   children?: React.ReactNode;
@@ -53,14 +57,14 @@ 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;
@@ -77,10 +81,7 @@ function DocumentBreadcrumb(
       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 +106,20 @@ function DocumentBreadcrumb(
     }
 
     path.slice(0, -1).forEach((node: NavigationNode) => {
-      const title = node.title || t("Untitled");
       output.push({
         type: "route",
         title: node.icon ? (
           <>
-            <StyledIcon value={node.icon} color={node.color} /> {title}
+            <StyledIcon value={node.icon} color={node.color} /> {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 +132,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,11 +140,11 @@ function DocumentBreadcrumb(
   }
 
   return (
-    <Breadcrumb items={items} ref={ref} highlightFirstItem>
+    <Breadcrumb items={items} highlightFirstItem>
       {children}
     </Breadcrumb>
   );
-}
+};
 
 const StyledIcon = styled(Icon)`
   margin-right: 2px;
@@ -163,4 +160,4 @@ const SmallSlash = styled(GoToIcon)`
   opacity: 0.5;
 `;
 
-export default observer(React.forwardRef(DocumentBreadcrumb));
+export default observer(DocumentBreadcrumb);

app/components/DocumentCard.tsx

@@ -1,25 +1,24 @@
 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 { s, ellipsis } from "@shared/styles";
 import { IconType } from "@shared/types";
 import { determineIconType } from "@shared/utils/icon";
 import Document from "~/models/Document";
 import Pin from "~/models/Pin";
 import Flex from "~/components/Flex";
+import Icon from "~/components/Icon";
 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 Text from "./Text";
 import Tooltip from "./Tooltip";
@@ -40,7 +39,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;
@@ -72,10 +70,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}
@@ -128,13 +122,13 @@ function DocumentCard(props: Props) {
               <Squircle
                 color={
                   collection?.color ??
-                  (pinnedToHome ? theme.slateLight : theme.slateDark)
+                  (!pin?.collectionId ? theme.slateLight : theme.slateDark)
                 }
               >
                 {collection?.icon &&
                 collection?.icon !== "letter" &&
                 collection?.icon !== "collection" &&
-                pinnedToHome ? (
+                !pin?.collectionId ? (
                   <CollectionIcon collection={collection} color="white" />
                 ) : (
                   <DocumentIcon color="white" />
@@ -148,14 +142,13 @@ function DocumentCard(props: Props) {
                   : 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,21 +169,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,

app/components/DocumentContext.tsx

@@ -11,9 +11,6 @@ class DocumentContext {
   /** The editor instance for this document */
   editor?: Editor;
 
-  @observable
-  isEditorInitialized: boolean = false;
-
   @observable
   headings: Heading[] = [];
 
@@ -34,11 +31,6 @@ class DocumentContext {
     this.updateState();
   };
 
-  @action
-  setEditorInitialized = (initialized: boolean) => {
-    this.isEditorInitialized = initialized;
-  };
-
   @action
   updateState = () => {
     this.updateHeadings();

app/components/DocumentCopy.tsx

@@ -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);

app/components/DocumentExplorer.tsx

@@ -14,32 +14,32 @@ import { FixedSizeList as List } from "react-window";
 import scrollIntoView from "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, NavigationNodeType } from "@shared/types";
-import { isModKey } from "@shared/utils/keyboard";
+import { NavigationNode } from "@shared/types";
 import DocumentExplorerNode from "~/components/DocumentExplorerNode";
 import DocumentExplorerSearchResult from "~/components/DocumentExplorerSearchResult";
 import Flex from "~/components/Flex";
+import Icon from "~/components/Icon";
 import CollectionIcon from "~/components/Icons/CollectionIcon";
 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>[]
   >([]);
@@ -78,10 +65,6 @@ function DocumentExplorer({ onSubmit, onSelect, items, defaultValue }: Props) {
   const VERTICAL_PADDING = 6;
   const HORIZONTAL_PADDING = 24;
 
-  const recentlyViewedItemIds = documents.recentlyViewed
-    .slice(0, 5)
-    .map((item) => item.id);
-
   const searchIndex = React.useMemo(
     () =>
       new FuzzySearch(items, ["title"], {
@@ -111,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)
@@ -130,18 +104,11 @@ function DocumentExplorer({ onSubmit, onSelect, items, defaultValue }: Props) {
     return searchTerm
       ? searchIndex.search(searchTerm)
       : items
-          .filter((item) => recentlyViewedItemIds.includes(item.id))
-          .concat(
-            items.filter((item) => item.type === NavigationNodeType.Collection)
-          )
+          .filter((item) => item.type === "collection")
           .flatMap(includeDescendants);
   }
 
   const nodes = getNodes();
-  const baseDepth = nodes.reduce(
-    (min, node) => (node.depth ? Math.min(min, node.depth) : min),
-    Infinity
-  );
 
   const scrollNodeIntoView = React.useCallback(
     (node: number) => {
@@ -315,7 +282,7 @@ function DocumentExplorer({ onSubmit, onSelect, items, defaultValue }: Props) {
           expanded={isExpanded(index)}
           icon={renderedIcon}
           title={title}
-          depth={(node.depth ?? 0) - baseDepth}
+          depth={node.depth as number}
           hasChildren={hasChildren(index)}
           ref={itemRefs[index]}
         />

app/components/DocumentExplorerNode.tsx

@@ -41,9 +41,9 @@ function DocumentExplorerNode(
 ) {
   const { t } = useTranslation();
   const OFFSET = 12;
-  const DISCLOSURE = 20;
+  const ICON_SIZE = 24;
 
-  const width = depth ? depth * DISCLOSURE + OFFSET : DISCLOSURE;
+  const width = depth ? depth * ICON_SIZE + OFFSET : ICON_SIZE;
 
   return (
     <Node

app/components/DocumentListItem.tsx

@@ -9,22 +9,21 @@ import { Link } from "react-router-dom";
 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 Flex from "~/components/Flex";
 import Highlight from "~/components/Highlight";
+import Icon from "~/components/Icon";
 import NudeButton from "~/components/NudeButton";
 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";
 
 type Props = {
   document: Document;
@@ -51,7 +50,6 @@ function DocumentListItem(
 ) {
   const { t } = useTranslation();
   const user = useCurrentUser();
-  const locationSidebarContext = useLocationSidebarContext();
   const [menuOpen, handleMenuOpen, handleMenuClose] = useBoolean();
 
   let itemRef: React.Ref<HTMLAnchorElement> =
@@ -80,12 +78,6 @@ function DocumentListItem(
     !!document.title.toLowerCase().includes(highlight.toLowerCase());
   const canStar = !document.isArchived && !document.isTemplate;
 
-  const sidebarContext = determineSidebarContext({
-    document,
-    user,
-    currentContext: locationSidebarContext,
-  });
-
   return (
     <DocumentLink
       ref={itemRef}
@@ -97,7 +89,6 @@ function DocumentListItem(
         pathname: documentPath(document),
         state: {
           title: document.titleWithDefault,
-          sidebarContext,
         },
       }}
       {...rest}
@@ -120,7 +111,11 @@ function DocumentListItem(
             <Badge yellow>{t("New")}</Badge>
           )}
           {document.isDraft && showDraft && (
-            <Tooltip content={t("Only visible to you")} placement="top">
+            <Tooltip
+              content={t("Only visible to you")}
+              delay={500}
+              placement="top"
+            >
               <Badge>{t("Draft")}</Badge>
             </Tooltip>
           )}

app/components/DocumentMeta.tsx

@@ -185,9 +185,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 +210,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")};

app/components/DocumentViews.tsx

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

app/components/DuplicateDialog.tsx

@@ -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("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>
+          )}
+        </>
+      )}
+    </ConfirmationDialog>
+  );
+}
+
+export default observer(DuplicateDialog);

app/components/Editor.tsx

@@ -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,10 @@ import { mergeRefs } from "react-merge-refs";
 import { Optional } from "utility-types";
 import insertFiles from "@shared/editor/commands/insertFiles";
 import { AttachmentPreset } from "@shared/types";
+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 +22,12 @@ 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";
+import Icon from "./Icon";
 
 const LazyLoadedEditor = lazyWithRetry(() => import("~/editor"));
 
@@ -41,23 +50,82 @@ export type Props = Optional<
 function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
   const { id, shareId, onChange, onCreateCommentMark, onDeleteCommentMark } =
     props;
-  const { comments } = useStores();
+  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 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,
+              icon: document.icon ? (
+                <Icon
+                  value={document.icon}
+                  color={document.color ?? undefined}
+                />
+              ) : undefined,
+            },
+          ];
+        } 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,
+          icon: document.icon ? (
+            <Icon value={document.icon} color={document.color ?? undefined} />
+          ) : undefined,
+        })),
+        (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]
@@ -187,7 +255,6 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
     <ErrorBoundary component="div" reloadOnChunkMissing>
       <>
         <LazyLoadedEditor
-          key={props.extensions?.length || 0}
           ref={mergeRefs([ref, localRef, handleRefChanged])}
           uploadFile={handleUploadFile}
           embeds={embeds}
@@ -195,15 +262,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}
           />
         )}

app/components/Emoji.tsx

@@ -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`};
-`;

app/components/ErrorBoundary.tsx

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

app/components/EventListItem.tsx

@@ -7,71 +7,38 @@ 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 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 Item, { Actions } from "~/components/List/Item";
+import Event from "~/models/Event";
+import { Avatar } from "~/components/Avatar";
+import Item, { Actions, Props as ItemProps } 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;
 };
 
-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 +49,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 +132,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,12 +150,17 @@ 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 ? (
+        isRevision && isActive && event.modelId && !latest ? (
           <StyledEventBoundary>
-            <RevisionMenu document={document} revisionId={event.id} />
+            <RevisionMenu document={document} revisionId={event.modelId} />
           </StyledEventBoundary>
         ) : undefined
       }
@@ -211,100 +168,63 @@ const EventListItem = ({ event, document, ...rest }: Props) => {
       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: ${(props) => (props.theme.isDark ? "lighten" : "multiply")};
-    z-index: 1;
-  }
-
-  &: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: ${(props) => (props.theme.isDark ? "lighten" : "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;
-  }
-
-  svg {
-    flex-shrink: 0;
-  }
-
-  ${lineStyle}
-`;
+const BaseItem = React.forwardRef(function _BaseItem(
+  { to, ...rest }: ItemProps,
+  ref?: React.Ref<HTMLAnchorElement>
+) {
+  return <ListItem to={to} ref={ref} {...rest} />;
+});
 
 const StyledEventBoundary = styled(EventBoundary)`
   height: 24px;
 `;
 
-const RevisionItem = styled(Item)`
+const Subtitle = styled.span`
+  svg {
+    margin: -3px;
+    margin-right: 2px;
+  }
+`;
+
+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 +235,8 @@ const RevisionItem = styled(Item)`
   }
 `;
 
+const ListItem = styled(Item)`
+  ${ItemStyle}
+`;
+
 export default observer(EventListItem);

app/components/Facepile.tsx

@@ -1,26 +1,17 @@
 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 Flex from "~/components/Flex";
-import Initials from "./Avatar/Initials";
 
 type Props = {
-  /** The users to display */
   users: User[];
-  /** The size of the avatars, defaults to AvatarSize.Large */
   size?: number;
-  /** A number to show as the number of additional users */
   overflow?: number;
-  /** The maximum number of users to display, defaults to 8 */
   limit?: number;
-  /** A component to render the avatar, defaults to Avatar. */
-  renderAvatar?: React.ComponentType<
-    React.ComponentProps<typeof Avatar> & {
-      model: User;
-    }
-  >;
+  renderAvatar?: (user: User) => React.ReactNode;
 };
 
 function Facepile({
@@ -28,70 +19,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)`

app/components/Fade.ts

@@ -0,0 +1,8 @@
+import styled from "styled-components";
+import { fadeIn } from "~/styles/animations";
+
+const Fade = styled.span<{ timing?: number | string }>`
+  animation: ${fadeIn} ${(props) => props.timing || "250ms"} ease-in-out;
+`;
+
+export default Fade;

app/components/Fade.tsx

@@ -1,24 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-import { fadeIn } from "~/styles/animations";
-
-const Fade = styled.span<{ timing?: number | string }>`
-  animation: ${fadeIn} ${(props) => props.timing || "250ms"} ease-in-out;
-`;
-
-type Props = {
-  children?: JSX.Element | null;
-  /** If true, children will be animated. */
-  animate: boolean;
-};
-
-/**
- * Wraps children in a <Fade> if loading is true on mount.
- */
-export const ConditionalFade = ({ animate, children }: Props) => {
-  const [isAnimated] = React.useState(animate);
-
-  return isAnimated ? <Fade>{children}</Fade> : <>{children}</>;
-};
-
-export default Fade;

app/components/FilterOptions.tsx

@@ -23,6 +23,7 @@ type Props = {
   options: TFilterOption[];
   selectedKeys: (string | null | undefined)[];
   defaultLabel?: string;
+  selectedPrefix?: string;
   className?: string;
   onSelect: (key: string | null | undefined) => void;
   showFilter?: boolean;
@@ -34,6 +35,7 @@ const FilterOptions = ({
   options,
   selectedKeys = [],
   defaultLabel = "Filter options",
+  selectedPrefix = "",
   className,
   onSelect,
   showFilter,
@@ -44,7 +46,7 @@ const FilterOptions = ({
   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)
@@ -52,7 +54,9 @@ const FilterOptions = ({
   const [query, setQuery] = React.useState("");
 
   const selectedLabel = selectedItems.length
-    ? selectedItems.map((selected) => selected.label).join(", ")
+    ? selectedItems
+        .map((selected) => `${selectedPrefix} ${selected.label}`)
+        .join(", ")
     : "";
 
   const renderItem = React.useCallback(
@@ -66,7 +70,7 @@ const FilterOptions = ({
         selected={selectedKeys.includes(option.key)}
         {...menu}
       >
-        {option.icon}
+        {option.icon && <Icon>{option.icon}</Icon>}
         {option.note ? (
           <LabelWithNote>
             {option.label}
@@ -159,16 +163,10 @@ const FilterOptions = ({
   const showFilterInput = showFilter || options.length > 10;
 
   return (
-    <>
+    <div>
       <MenuButton {...menu}>
         {(props) => (
-          <StyledButton
-            {...props}
-            className={className}
-            icon={selectedItems[0]?.key && selectedItems[0]?.icon}
-            neutral
-            disclosure
-          >
+          <StyledButton {...props} className={className} neutral disclosure>
             {selectedItems.length ? selectedLabel : defaultLabel}
           </StyledButton>
         )}
@@ -195,7 +193,7 @@ const FilterOptions = ({
           />
         )}
       </ContextMenu>
-    </>
+    </div>
   );
 };
 
@@ -231,9 +229,8 @@ const SearchInput = styled(Input)`
   ${Outline} {
     border: none;
     border-radius: 0;
-    border-bottom: 1px solid ${s("divider")};
+    border-bottom: 1px solid ${s("inputBorder")};
     background: ${s("menuBackground")};
-    margin: 0;
   }
 
   ${NativeInput} {
@@ -270,9 +267,15 @@ export const StyledButton = styled(Button)`
   }
 
   ${Inner} {
-    line-height: 28px;
+    line-height: 24px;
     min-height: auto;
   }
 `;
 
+const Icon = styled.div`
+  margin-right: 8px;
+  width: 18px;
+  height: 18px;
+`;
+
 export default FilterOptions;

app/components/GroupListItem.tsx

@@ -0,0 +1,89 @@
+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 Group from "~/models/Group";
+import GroupMembership from "~/models/GroupMembership";
+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 { hover } from "~/styles";
+import NudeButton from "./NudeButton";
+
+type Props = {
+  group: Group;
+  membership?: GroupMembership;
+  showFacepile?: boolean;
+  showAvatar?: boolean;
+  renderActions: (params: { openMembersModal: () => void }) => React.ReactNode;
+};
+
+function GroupListItem({ group, showFacepile, renderActions }: Props) {
+  const { t } = useTranslation();
+  const [membersModalOpen, setMembersModalOpen, setMembersModalClosed] =
+    useBoolean();
+  const memberCount = group.memberCount;
+  const users = group.users.slice(0, MAX_AVATAR_DISPLAY);
+  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);

app/components/Guide.tsx

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

app/components/Header.tsx

@@ -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);

app/components/HoverPreview/Components.tsx

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

app/components/HoverPreview/HoverPreview.tsx

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

app/components/HoverPreview/HoverPreviewLink.tsx

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

app/components/HoverPreview/HoverPreviewMention.tsx

@@ -7,7 +7,7 @@ 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 +25,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>

app/components/Icon.tsx

@@ -2,13 +2,13 @@ import { observer } from "mobx-react";
 import { getLuminance } from "polished";
 import * as React from "react";
 import styled from "styled-components";
-import useStores from "../hooks/useStores";
-import { IconType } from "../types";
-import { IconLibrary } from "../utils/IconLibrary";
-import { colorPalette } from "../utils/collections";
-import { determineIconType } from "../utils/icon";
-import EmojiIcon from "./EmojiIcon";
-// import Logger from "~/utils/Logger";
+import { IconType } from "@shared/types";
+import { IconLibrary } from "@shared/utils/IconLibrary";
+import { colorPalette } from "@shared/utils/collections";
+import { determineIconType } from "@shared/utils/icon";
+import EmojiIcon from "~/components/Icons/EmojiIcon";
+import useStores from "~/hooks/useStores";
+import Logger from "~/utils/Logger";
 import Flex from "./Flex";
 
 export type Props = {
@@ -40,9 +40,9 @@ const Icon = ({
   const iconType = determineIconType(icon);
 
   if (!iconType) {
-    // Logger.warn("Failed to determine icon type", {
-    //   icon,
-    // });
+    Logger.warn("Failed to determine icon type", {
+      icon,
+    });
     return null;
   }
 
@@ -62,9 +62,9 @@ const Icon = ({
 
     return <EmojiIcon emoji={icon} size={size} className={className} />;
   } catch (err) {
-    // Logger.warn("Failed to render icon", {
-    //   icon,
-    // });
+    Logger.warn("Failed to render icon", {
+      icon,
+    });
   }
 
   return null;
@@ -80,6 +80,7 @@ const SVGIcon = observer(
     forceColor,
   }: Props) => {
     const { ui } = useStores();
+
     let color = inputColor ?? colorPalette[0];
 
     // If the chosen icon color is very dark then we invert it in dark mode

app/components/IconPicker/components/ColorPicker.tsx

@@ -1,12 +1,13 @@
 import { BackIcon } from "outline-icons";
 import React from "react";
 import styled from "styled-components";
-import { breakpoints, s, hover } from "@shared/styles";
+import { breakpoints, s } 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";
+import { hover } from "~/styles";
 
 enum Panel {
   Builtin,

app/components/IconPicker/components/Emoji.tsx

@@ -0,0 +1,8 @@
+import styled from "styled-components";
+import { s } from "@shared/styles";
+
+export const Emoji = styled.span`
+  font-family: ${s("fontFamilyEmoji")};
+  width: 24px;
+  height: 24px;
+`;

app/components/IconPicker/components/EmojiPanel.tsx

@@ -18,7 +18,11 @@ import {
 import GridTemplate, { DataNode } from "./GridTemplate";
 import SkinTonePicker from "./SkinTonePicker";
 
-const GRID_HEIGHT = 410;
+/**
+ * This is needed as a constant for react-window.
+ * Calculated from the heights of TabPanel and InputSearch.
+ */
+const GRID_HEIGHT = 362;
 
 const useEmojiState = () => {
   const [emojiSkinTone, setEmojiSkinTone] = usePersistedState<EmojiSkinTone>(
@@ -76,7 +80,6 @@ type Props = {
   panelWidth: number;
   query: string;
   panelActive: boolean;
-  height?: number;
   onEmojiChange: (emoji: string) => void;
   onQueryChange: (query: string) => void;
 };
@@ -87,7 +90,6 @@ const EmojiPanel = ({
   panelActive,
   onEmojiChange,
   onQueryChange,
-  height = GRID_HEIGHT,
 }: Props) => {
   const { t } = useTranslation();
 
@@ -157,7 +159,7 @@ const EmojiPanel = ({
       <GridTemplate
         ref={scrollableRef}
         width={panelWidth}
-        height={height - 48}
+        height={GRID_HEIGHT}
         data={templateData}
         onIconSelect={handleEmojiSelection}
       />

app/components/IconPicker/components/GridTemplate.tsx

@@ -4,9 +4,9 @@ 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 { Emoji } from "./Emoji";
 import Grid from "./Grid";
 import { IconButton } from "./IconButton";
 
@@ -71,7 +71,7 @@ const GridTemplate = (
             <IconButton
               key={item.name}
               onClick={() => onIconSelect({ id: item.name, value: item.name })}
-              style={{ "--delay": `${item.delay}ms` } as React.CSSProperties}
+              delay={item.delay}
             >
               <Icon as={IconLibrary.getComponent(item.name)} color={item.color}>
                 {item.initial}
@@ -85,9 +85,7 @@ const GridTemplate = (
             key={item.id}
             onClick={() => onIconSelect({ id: item.id, value: item.value })}
           >
-            <Emoji width={24} height={24}>
-              {item.value}
-            </Emoji>
+            <Emoji>{item.value}</Emoji>
           </IconButton>
         );
       });

app/components/IconPicker/components/IconButton.tsx

@@ -1,11 +1,13 @@
 import styled from "styled-components";
-import { s, hover } from "@shared/styles";
+import { s } from "@shared/styles";
 import NudeButton from "~/components/NudeButton";
+import { hover } from "~/styles";
 
 export const IconButton = styled(NudeButton)<{ delay?: number }>`
   width: 32px;
   height: 32px;
   padding: 4px;
+  --delay: ${({ delay }) => delay && `${delay}ms`};
 
   &: ${hover} {
     background: ${s("listItemHoverBackground")};

app/components/IconPicker/components/PopoverButton.tsx

@@ -1,6 +1,7 @@
 import styled, { css } from "styled-components";
-import { s, hover } from "@shared/styles";
+import { s } from "@shared/styles";
 import NudeButton from "~/components/NudeButton";
+import { hover } from "~/styles";
 
 export const PopoverButton = styled(NudeButton)<{ $borderOnHover?: boolean }>`
   &: ${hover},

app/components/IconPicker/components/SkinTonePicker.tsx

@@ -2,12 +2,13 @@ import React from "react";
 import { useTranslation } from "react-i18next";
 import { Menu, MenuButton, MenuItem, useMenuState } from "reakit";
 import styled from "styled-components";
-import { depths, s, hover } from "@shared/styles";
+import { depths, s } from "@shared/styles";
 import { EmojiSkinTone } from "@shared/types";
 import { getEmojiVariants } from "@shared/utils/emoji";
-import { Emoji } from "~/components/Emoji";
 import Flex from "~/components/Flex";
 import NudeButton from "~/components/NudeButton";
+import { hover } from "~/styles";
+import { Emoji } from "./Emoji";
 import { IconButton } from "./IconButton";
 
 const SkinTonePicker = ({
@@ -25,7 +26,7 @@ const SkinTonePicker = ({
   );
 
   const menu = useMenuState({
-    placement: "bottom-end",
+    placement: "bottom",
   });
 
   const handleSkinClick = React.useCallback(
@@ -42,9 +43,7 @@ const SkinTonePicker = ({
         <MenuItem {...menu} key={emoji.value}>
           {(menuprops) => (
             <IconButton {...menuprops} onClick={() => handleSkinClick(eskin)}>
-              <Emoji width={24} height={24}>
-                {emoji.value}
-              </Emoji>
+              <Emoji>{emoji.value}</Emoji>
             </IconButton>
           )}
         </MenuItem>

app/components/IconPicker/index.tsx

@@ -10,18 +10,19 @@ import {
   useTabState,
 } from "reakit";
 import styled, { css } from "styled-components";
-import Icon from "@shared/components/Icon";
-import { s, hover } from "@shared/styles";
+import { s } from "@shared/styles";
 import theme from "@shared/styles/theme";
 import { IconType } from "@shared/types";
 import { determineIconType } from "@shared/utils/icon";
 import Flex from "~/components/Flex";
+import Icon from "~/components/Icon";
 import NudeButton from "~/components/NudeButton";
 import Popover from "~/components/Popover";
 import useMobile from "~/hooks/useMobile";
 import useOnClickOutside from "~/hooks/useOnClickOutside";
 import usePrevious from "~/hooks/usePrevious";
 import useWindowSize from "~/hooks/useWindowSize";
+import { hover } from "~/styles";
 import EmojiPanel from "./components/EmojiPanel";
 import IconPanel from "./components/IconPanel";
 import { PopoverButton } from "./components/PopoverButton";
@@ -81,7 +82,6 @@ const IconPicker = ({
     modal: true,
     unstable_offset: [0, 0],
   });
-  const { hide, show, visible } = popover;
   const tab = useTabState({ selectedId: defaultTab });
   const previouslyVisible = usePrevious(popover.visible);
 
@@ -96,12 +96,12 @@ const IconPicker = ({
 
   const handleIconChange = React.useCallback(
     (ic: string) => {
-      hide();
+      popover.hide();
       const icType = determineIconType(ic);
       const finalColor = icType === IconType.SVG ? chosenColor : null;
       onChange(ic, finalColor);
     },
-    [hide, onChange, chosenColor]
+    [popover, onChange, chosenColor]
   );
 
   const handleIconColorChange = React.useCallback(
@@ -118,32 +118,32 @@ const IconPicker = ({
   );
 
   const handleIconRemove = React.useCallback(() => {
-    hide();
+    popover.hide();
     onChange(null, null);
-  }, [hide, onChange]);
+  }, [popover, onChange]);
 
   const handlePopoverButtonClick = React.useCallback(
     (ev: React.MouseEvent) => {
       ev.stopPropagation();
-      if (visible) {
-        hide();
+      if (popover.visible) {
+        popover.hide();
       } else {
-        show();
+        popover.show();
       }
     },
-    [hide, show, visible]
+    [popover]
   );
 
   // Popover open effect
   React.useEffect(() => {
-    if (visible && !previouslyVisible) {
+    if (popover.visible && !previouslyVisible) {
       onOpen?.();
-    } else if (!visible && previouslyVisible) {
+    } else if (!popover.visible && previouslyVisible) {
       onClose?.();
       setQuery("");
       resetDefaultTab();
     }
-  }, [visible, previouslyVisible, onOpen, onClose, resetDefaultTab]);
+  }, [popover.visible, previouslyVisible, onOpen, onClose, resetDefaultTab]);
 
   // Custom click outside handling rather than using `hideOnClickOutside` from reakit so that we can
   // prevent event bubbling.
@@ -198,7 +198,7 @@ const IconPicker = ({
                 {...tab}
                 id={TAB_NAMES["Icon"]}
                 aria-label={t("Icons")}
-                $active={tab.selectedId === TAB_NAMES["Icon"]}
+                active={tab.selectedId === TAB_NAMES["Icon"]}
               >
                 {t("Icons")}
               </StyledTab>
@@ -206,7 +206,7 @@ const IconPicker = ({
                 {...tab}
                 id={TAB_NAMES["Emoji"]}
                 aria-label={t("Emojis")}
-                $active={tab.selectedId === TAB_NAMES["Emoji"]}
+                active={tab.selectedId === TAB_NAMES["Emoji"]}
               >
                 {t("Emojis")}
               </StyledTab>
@@ -273,7 +273,7 @@ const TabActionsWrapper = styled(Flex)`
   border-bottom: 1px solid ${s("inputBorder")};
 `;
 
-const StyledTab = styled(Tab)<{ $active: boolean }>`
+const StyledTab = styled(Tab)<{ active: boolean }>`
   position: relative;
   font-weight: 500;
   font-size: 14px;
@@ -282,15 +282,15 @@ const StyledTab = styled(Tab)<{ $active: boolean }>`
   border: 0;
   padding: 8px 12px;
   user-select: none;
-  color: ${({ $active }) => ($active ? s("textSecondary") : s("textTertiary"))};
+  color: ${({ active }) => (active ? s("textSecondary") : s("textTertiary"))};
   transition: color 100ms ease-in-out;
 
   &: ${hover} {
     color: ${s("textSecondary")};
   }
 
-  ${({ $active }) =>
-    $active &&
+  ${({ active }) =>
+    active &&
     css`
       &:after {
         content: "";

app/components/Icons/CollectionIcon.tsx

@@ -2,9 +2,9 @@ import { observer } from "mobx-react";
 import { CollectionIcon, PrivateCollectionIcon } from "outline-icons";
 import { getLuminance } from "polished";
 import * as React from "react";
-import Icon from "@shared/components/Icon";
 import { colorPalette } from "@shared/utils/collections";
 import Collection from "~/models/Collection";
+import Icon from "~/components/Icon";
 import useStores from "~/hooks/useStores";
 
 type Props = {

app/components/Icons/EmojiIcon.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import styled from "styled-components";
-import { s } from "../styles";
+import { s } from "@shared/styles";
 
 type Props = {
   /** The emoji to render */
@@ -33,7 +33,7 @@ const SVG = ({ size, emoji }: { size: number; emoji: string }) => (
   <svg width={size} height={size} xmlns="http://www.w3.org/2000/svg">
     <text
       x="50%"
-      y="55%"
+      y={"55%"}
       dominantBaseline="middle"
       textAnchor="middle"
       fontSize={size * 0.7}

app/components/Input.tsx

@@ -176,7 +176,6 @@ function Input(
     if (ev.key === "Enter" && ev.metaKey) {
       if (props.onRequestSubmit) {
         props.onRequestSubmit(ev);
-        return;
       }
     }
 
@@ -231,11 +230,10 @@ function Input(
               ])}
               onBlur={handleBlur}
               onFocus={handleFocus}
+              onKeyDown={handleKeyDown}
               hasIcon={!!icon}
               hasPrefix={!!prefix}
               {...rest}
-              // set it after "rest" to override "onKeyDown" from prop.
-              onKeyDown={handleKeyDown}
             />
           ) : (
             <NativeInput
@@ -245,12 +243,11 @@ function Input(
               ])}
               onBlur={handleBlur}
               onFocus={handleFocus}
+              onKeyDown={handleKeyDown}
               hasIcon={!!icon}
               hasPrefix={!!prefix}
               type={type}
               {...rest}
-              // set it after "rest" to override "onKeyDown" from prop.
-              onKeyDown={handleKeyDown}
             />
           )}
           {children}

app/components/InputSearchPage.tsx

@@ -4,9 +4,9 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { useHistory } from "react-router-dom";
 import styled, { useTheme } from "styled-components";
-import { isModKey } from "@shared/utils/keyboard";
 import useBoolean from "~/hooks/useBoolean";
 import useKeyDown from "~/hooks/useKeyDown";
+import { isModKey } from "~/utils/keyboard";
 import { searchPath } from "~/utils/routeHelpers";
 import Input, { Outline } from "./Input";
 

app/components/InputSelect.tsx

@@ -10,7 +10,7 @@ import * as React from "react";
 import { VisuallyHidden } from "reakit/VisuallyHidden";
 import styled, { css } from "styled-components";
 import { s } from "@shared/styles";
-import Button, { Props as ButtonProps, Inner } from "~/components/Button";
+import Button, { Inner } from "~/components/Button";
 import Text from "~/components/Text";
 import useMenuHeight from "~/hooks/useMenuHeight";
 import useMobile from "~/hooks/useMobile";
@@ -33,7 +33,7 @@ export type Option = {
   divider?: boolean;
 };
 
-export type Props = Omit<ButtonProps<any>, "onChange"> & {
+export type Props = {
   id?: string;
   name?: string;
   value?: string | null;
@@ -48,8 +48,7 @@ export type Props = Omit<ButtonProps<any>, "onChange"> & {
   options: Option[];
   /** @deprecated Removing soon, do not use. */
   note?: React.ReactNode;
-  /** Callback function that is called when the value changes. Return false to cancel the change. */
-  onChange?: (value: string | null) => void | Promise<boolean | void>;
+  onChange?: (value: string | null) => void;
   style?: React.CSSProperties;
   /**
    * Set to true if this component is rendered inside a Modal.
@@ -166,18 +165,9 @@ const InputSelect = (props: Props, ref: React.RefObject<InputSelectRef>) => {
     if (previousValue.current === select.selectedValue) {
       return;
     }
-    const previous = previousValue.current;
     previousValue.current = select.selectedValue;
 
-    const response = onChange?.(select.selectedValue);
-    if (response && response instanceof Promise) {
-      void response.then((success) => {
-        if (success === false) {
-          select.selectedValue = previous;
-          select.setSelectedValue(previous);
-        }
-      });
-    }
+    onChange?.(select.selectedValue);
   }, [onChange, select.selectedValue]);
 
   React.useLayoutEffect(() => {
@@ -323,7 +313,7 @@ const StyledButton = styled(Button)<{ $nude?: boolean }>`
   margin-bottom: 16px;
   display: block;
   width: 100%;
-  cursor: var(--pointer);
+  cursor: default;
 
   &:hover:not(:disabled) {
     background: ${s("buttonNeutralBackground")};

app/components/InputSelectPermission.tsx

@@ -1,8 +1,6 @@
 import * as React from "react";
 import { useTranslation } from "react-i18next";
-import styled from "styled-components";
 import { $Diff } from "utility-types";
-import { s } from "@shared/styles";
 import { CollectionPermission } from "@shared/types";
 import { EmptySelectValue } from "~/types";
 import InputSelect, { Props, Option, InputSelectRef } from "./InputSelect";
@@ -21,7 +19,7 @@ function InputSelectPermission(
   const { t } = useTranslation();
 
   return (
-    <Select
+    <InputSelect
       ref={ref}
       label={t("Permission")}
       options={[
@@ -47,8 +45,4 @@ function InputSelectPermission(
   );
 }
 
-const Select = styled(InputSelect)`
-  color: ${s("textSecondary")};
-`;
-
 export default React.forwardRef(InputSelectPermission);

app/components/LanguagePrompt.tsx

@@ -47,16 +47,14 @@ export default function LanguagePrompt() {
           <br />
           <Link
             onClick={async () => {
-              ui.set({ languagePromptDismissed: true });
+              ui.setLanguagePromptDismissed();
               await user.save({ language });
             }}
           >
             {t("Change Language")}
           </Link>{" "}
           &middot;{" "}
-          <Link onClick={() => ui.set({ languagePromptDismissed: true })}>
-            {t("Dismiss")}
-          </Link>
+          <Link onClick={ui.setLanguagePromptDismissed}>{t("Dismiss")}</Link>
         </span>
       </Flex>
     </Wrapper>

app/components/Layout.tsx

@@ -4,7 +4,6 @@ import { Helmet } from "react-helmet-async";
 import styled, { DefaultTheme } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import { s } from "@shared/styles";
-import { isModKey } from "@shared/utils/keyboard";
 import Flex from "~/components/Flex";
 import { LoadingIndicatorBar } from "~/components/LoadingIndicator";
 import SkipNavContent from "~/components/SkipNavContent";
@@ -14,6 +13,7 @@ import useAutoRefresh from "~/hooks/useAutoRefresh";
 import useKeyDown from "~/hooks/useKeyDown";
 import { MenuProvider } from "~/hooks/useMenuContext";
 import useStores from "~/hooks/useStores";
+import { isModKey } from "~/utils/keyboard";
 
 type Props = {
   children?: React.ReactNode;
@@ -76,6 +76,7 @@ const Layout = React.forwardRef(function Layout_(
 
 const Container = styled(Flex)`
   background: ${s("background")};
+  transition: ${s("backgroundTransition")};
   position: relative;
   width: 100%;
   min-height: 100%;

app/components/List/Item.tsx

@@ -6,9 +6,10 @@ import { LocationDescriptor } from "history";
 import * as React from "react";
 import scrollIntoView from "scroll-into-view-if-needed";
 import styled, { useTheme } from "styled-components";
-import { s, hover, ellipsis } from "@shared/styles";
+import { s, ellipsis } from "@shared/styles";
 import Flex from "~/components/Flex";
 import NavLink from "~/components/NavLink";
+import { hover } from "~/styles";
 
 export type Props = Omit<React.HTMLAttributes<HTMLAnchorElement>, "title"> & {
   /** An icon or image to display to the left of the list item */
@@ -33,7 +34,6 @@ export type Props = Omit<React.HTMLAttributes<HTMLAnchorElement>, "title"> & {
   small?: boolean;
   /** Whether to enable keyboard navigation */
   keyboardNavigation?: boolean;
-  ellipsis?: boolean;
 };
 
 const ListItem = (
@@ -46,7 +46,6 @@ const ListItem = (
     border,
     to,
     keyboardNavigation,
-    ellipsis,
     ...rest
   }: Props,
   ref: React.RefObject<HTMLAnchorElement>
@@ -85,9 +84,7 @@ const ListItem = (
         column={!compact}
         $selected={selected}
       >
-        <Heading $small={small} $ellipsis={ellipsis}>
-          {title}
-        </Heading>
+        <Heading $small={small}>{title}</Heading>
         {subtitle && (
           <Subtitle $small={small} $selected={selected}>
             {subtitle}
@@ -109,7 +106,7 @@ const ListItem = (
         $border={border}
         $small={small}
         activeStyle={{
-          background: theme.sidebarActiveBackground,
+          background: theme.accent,
         }}
         {...rest}
         {...rovingTabIndex}
@@ -195,7 +192,7 @@ const Wrapper = styled.a<{
   &:focus,
   &:focus-within {
     background: ${(props) =>
-      props.$hover ? props.theme.backgroundSecondary : "inherit"};
+      props.$hover ? props.theme.secondaryBackground : "inherit"};
   }
 
   cursor: ${(props) =>
@@ -212,10 +209,10 @@ const Image = styled(Flex)`
   color: ${s("text")};
 `;
 
-const Heading = styled.p<{ $small?: boolean; $ellipsis?: boolean }>`
+const Heading = styled.p<{ $small?: boolean }>`
   font-size: ${(props) => (props.$small ? 14 : 16)}px;
   font-weight: 500;
-  ${(props) => (props.$ellipsis !== false ? ellipsis() : "")}
+  ${ellipsis()}
   line-height: ${(props) => (props.$small ? 1.3 : 1.2)};
   margin: 0;
 `;
@@ -223,13 +220,14 @@ const Heading = styled.p<{ $small?: boolean; $ellipsis?: boolean }>`
 const Content = styled(Flex)<{ $selected: boolean }>`
   flex-direction: column;
   flex-grow: 1;
-  color: ${s("text")};
+  color: ${(props) => (props.$selected ? props.theme.white : props.theme.text)};
 `;
 
 const Subtitle = styled.p<{ $small?: boolean; $selected?: boolean }>`
   margin: 0;
   font-size: ${(props) => (props.$small ? 13 : 14)}px;
-  color: ${s("textTertiary")};
+  color: ${(props) =>
+    props.$selected ? props.theme.white50 : props.theme.textTertiary};
   margin-top: -2px;
 `;
 
@@ -237,7 +235,8 @@ export const Actions = styled(Flex)<{ $selected?: boolean }>`
   align-self: center;
   justify-content: center;
   flex-shrink: 0;
-  color: ${s("textSecondary")};
+  color: ${(props) =>
+    props.$selected ? props.theme.white : props.theme.textSecondary};
 `;
 
 export default React.forwardRef(ListItem);

app/components/LocaleTime.tsx

@@ -1,23 +1,86 @@
+import { format as formatDate } from "date-fns";
 import * as React from "react";
-import { locales } from "@shared/utils/date";
+import { dateLocale, dateToRelative, locales } from "@shared/utils/date";
 import Tooltip from "~/components/Tooltip";
-import { useLocaleTime } from "~/hooks/useLocaleTime";
+import useUserLocale from "~/hooks/useUserLocale";
+
+let callbacks: (() => void)[] = [];
+
+// This is a shared timer that fires every minute, used for
+// updating all Time components across the page all at once.
+setInterval(() => {
+  callbacks.forEach((cb) => cb());
+}, 1000 * 60);
+
+function eachMinute(fn: () => void) {
+  callbacks.push(fn);
+
+  return () => {
+    callbacks = callbacks.filter((cb) => cb !== fn);
+  };
+}
 
 export type Props = {
   children?: React.ReactNode;
   dateTime: string;
+  tooltipDelay?: number;
   addSuffix?: boolean;
   shorten?: boolean;
   relative?: boolean;
   format?: Partial<Record<keyof typeof locales, string>>;
 };
 
-const LocaleTime: React.FC<Props> = ({ children, ...rest }: Props) => {
-  const { tooltipContent, content } = useLocaleTime(rest);
+const LocaleTime: React.FC<Props> = ({
+  addSuffix,
+  children,
+  dateTime,
+  shorten,
+  format,
+  relative,
+  tooltipDelay,
+}: Props) => {
+  const userLocale: string = useUserLocale() || "";
+  const dateFormatLong = {
+    en_US: "MMMM do, yyyy h:mm a",
+    fr_FR: "'Le 'd MMMM yyyy 'à' H:mm",
+  };
+  const formatLocaleLong = dateFormatLong[userLocale] ?? "MMMM do, yyyy h:mm a";
+  const formatLocale = format?.[userLocale] ?? formatLocaleLong;
+  const [_, setMinutesMounted] = React.useState(0); // eslint-disable-line @typescript-eslint/no-unused-vars
+  const callback = React.useRef<() => void>();
+
+  React.useEffect(() => {
+    callback.current = eachMinute(() => {
+      setMinutesMounted((state) => ++state);
+    });
+    return () => {
+      if (callback.current) {
+        callback.current?.();
+      }
+    };
+  }, []);
+
+  const date = new Date(Date.parse(dateTime));
+  const locale = dateLocale(userLocale);
+  const relativeContent = dateToRelative(date, {
+    addSuffix,
+    locale,
+    shorten,
+  });
+
+  const tooltipContent = formatDate(date, formatLocaleLong, {
+    locale,
+  });
+  const content =
+    relative !== false
+      ? relativeContent
+      : formatDate(date, formatLocale, {
+          locale,
+        });
 
   return (
-    <Tooltip content={tooltipContent} placement="bottom">
-      <time dateTime={rest.dateTime}>{children || content}</time>
+    <Tooltip content={tooltipContent} delay={tooltipDelay} placement="bottom">
+      <time dateTime={dateTime}>{children || content}</time>
     </Tooltip>
   );
 };

app/components/Modal.tsx

@@ -174,6 +174,7 @@ const Fullscreen = styled.div<FullscreenProps>`
   justify-content: center;
   align-items: flex-start;
   background: ${s("background")};
+  transition: ${s("backgroundTransition")};
   outline: none;
 
   ${breakpoint("tablet")`
@@ -264,6 +265,7 @@ const Small = styled.div`
   justify-content: center;
   align-items: flex-start;
   background: ${s("modalBackground")};
+  transition: ${s("backgroundTransition")};
   box-shadow: ${s("modalShadow")};
   border-radius: 8px;
   outline: none;

app/components/Notifications/NotificationListItem.tsx

@@ -4,10 +4,11 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import styled from "styled-components";
-import { s, hover, truncateMultiline } from "@shared/styles";
+import { s } from "@shared/styles";
 import Notification from "~/models/Notification";
 import CommentEditor from "~/scenes/Document/components/CommentEditor";
 import useStores from "~/hooks/useStores";
+import { hover, truncateMultiline } from "~/styles";
 import { Avatar, AvatarSize } from "../Avatar";
 import Flex from "../Flex";
 import Text from "../Text";
@@ -51,7 +52,11 @@ function NotificationListItem({ notification, onNavigate }: Props) {
             <Text weight="bold">{notification.subject}</Text>
           </Text>
           <Text type="tertiary" size="xsmall">
-            <Time dateTime={notification.createdAt} addSuffix />{" "}
+            <Time
+              dateTime={notification.createdAt}
+              tooltipDelay={1000}
+              addSuffix
+            />{" "}
             {collection && <>&middot; {collection.name}</>}
           </Text>
           {notification.comment && (

app/components/Notifications/Notifications.tsx

@@ -3,12 +3,13 @@ import { MarkAsReadIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
-import { s, hover } from "@shared/styles";
+import { s } from "@shared/styles";
 import Notification from "~/models/Notification";
 import { markNotificationsAsRead } from "~/actions/definitions/notifications";
 import useActionContext from "~/hooks/useActionContext";
 import useStores from "~/hooks/useStores";
 import NotificationMenu from "~/menus/NotificationMenu";
+import { hover } from "~/styles";
 import Desktop from "~/utils/Desktop";
 import Empty from "../Empty";
 import ErrorBoundary from "../ErrorBoundary";
@@ -23,15 +24,13 @@ import NotificationListItem from "./NotificationListItem";
 type Props = {
   /** Callback when the notification panel wants to close. */
   onRequestClose: () => void;
-  /** Whether the panel is open or not. */
-  isOpen: boolean;
 };
 
 /**
  * A panel containing a list of notifications and controls to manage them.
  */
 function Notifications(
-  { onRequestClose, isOpen }: Props,
+  { onRequestClose }: Props,
   ref: React.RefObject<HTMLDivElement>
 ) {
   const context = useActionContext();
@@ -48,15 +47,6 @@ function Notifications(
         notifications.approximateUnreadCount
       );
     }
-
-    // PWA badging
-    if ("setAppBadge" in navigator) {
-      if (notifications.approximateUnreadCount) {
-        void navigator.setAppBadge(notifications.approximateUnreadCount);
-      } else {
-        void navigator.clearAppBadge();
-      }
-    }
   }, [notifications.approximateUnreadCount]);
 
   return (
@@ -68,7 +58,7 @@ function Notifications(
           </Text>
           <Flex gap={8}>
             {notifications.approximateUnreadCount > 0 && (
-              <Tooltip content={t("Mark all as read")}>
+              <Tooltip delay={500} content={t("Mark all as read")}>
                 <Button action={markNotificationsAsRead} context={context}>
                   <MarkAsReadIcon />
                 </Button>
@@ -82,7 +72,7 @@ function Notifications(
             <PaginatedList
               fetch={notifications.fetchPage}
               options={{ archived: false }}
-              items={isOpen ? notifications.orderedData : undefined}
+              items={notifications.orderedData}
               renderItem={(item: Notification) => (
                 <NotificationListItem
                   key={item.id}

app/components/Notifications/NotificationsPopover.tsx

@@ -40,11 +40,7 @@ const NotificationsPopover: React.FC = ({ children }: Props) => {
         shrink
         flex
       >
-        <Notifications
-          onRequestClose={popover.hide}
-          isOpen={popover.visible}
-          ref={scrollableRef}
-        />
+        <Notifications onRequestClose={popover.hide} ref={scrollableRef} />
       </StyledPopover>
     </>
   );

app/components/PaginatedEventList.tsx

@@ -1,8 +1,9 @@
 import * as React from "react";
 import styled from "styled-components";
 import Document from "~/models/Document";
+import Event from "~/models/Event";
 import PaginatedList from "~/components/PaginatedList";
-import EventListItem, { type Event } from "./EventListItem";
+import EventListItem from "./EventListItem";
 
 type Props = {
   events: Event[];
@@ -29,8 +30,13 @@ const PaginatedEventList = React.memo<Props>(function PaginatedEventList({
       heading={heading}
       fetch={fetch}
       options={options}
-      renderItem={(item: Event) => (
-        <EventListItem key={item.id} event={item} document={document} />
+      renderItem={(item: Event, index) => (
+        <EventListItem
+          key={item.id}
+          event={item}
+          document={document}
+          latest={index === 0}
+        />
       )}
       renderHeading={(name) => <Heading>{name}</Heading>}
       {...rest}

app/components/PaginatedList.tsx

@@ -19,8 +19,7 @@ export interface PaginatedItem {
 }
 
 type Props<T> = WithTranslation &
-  RootStore &
-  React.HTMLAttributes<HTMLDivElement> & {
+  RootStore & {
     fetch?: (
       options: Record<string, any> | undefined
     ) => Promise<T[] | undefined> | undefined;
@@ -60,7 +59,7 @@ class PaginatedList<T extends PaginatedItem> extends React.PureComponent<
   fetchCounter = 0;
 
   @observable
-  renderCount = Pagination.defaultLimit;
+  renderCount = 15;
 
   @observable
   offset = 0;
@@ -108,16 +107,13 @@ class PaginatedList<T extends PaginatedItem> extends React.PureComponent<
         ...this.props.options,
       });
 
-      if (this.offset !== 0) {
-        this.renderCount += limit;
-      }
-
       if (results && (results.length === 0 || results.length < limit)) {
         this.allowLoadMore = false;
       } else {
         this.offset += limit;
       }
 
+      this.renderCount += limit;
       this.isFetchingInitial = false;
     } catch (err) {
       this.error = err;
@@ -251,9 +247,7 @@ class PaginatedList<T extends PaginatedItem> extends React.PureComponent<
           }}
         </ArrowKeyNavigation>
         {this.allowLoadMore && (
-          <div style={{ height: "1px" }}>
-            <Waypoint key={this.renderCount} onEnter={this.loadMoreResults} />
-          </div>
+          <Waypoint key={this.renderCount} onEnter={this.loadMoreResults} />
         )}
       </>
     );

app/components/Popover.tsx

@@ -10,23 +10,13 @@ import { fadeAndScaleIn } from "~/styles/animations";
 
 type Props = PopoverProps & {
   children: React.ReactNode;
-  /** The width of the popover, defaults to 380px. */
   width?: number;
-  /** The minimum width of the popover, use instead of width if contents adjusts size. */
-  minWidth?: number;
-  /** Shrink the padding of the popover */
   shrink?: boolean;
-  /** Make the popover flex */
   flex?: boolean;
-  /** The tab index of the popover */
   tabIndex?: number;
-  /** Whether the popover should be scrollable, defaults to true. */
   scrollable?: boolean;
-  /** The position of the popover on mobile, defaults to "top". */
   mobilePosition?: "top" | "bottom";
-  /** Function to show the popover */
   show: () => void;
-  /** Function to hide the popover */
   hide: () => void;
 };
 
@@ -35,7 +25,6 @@ const Popover = (
     children,
     shrink,
     width = 380,
-    minWidth,
     scrollable = true,
     flex,
     mobilePosition,
@@ -82,7 +71,6 @@ const Popover = (
         ref={ref}
         $shrink={shrink}
         $width={width}
-        $minWidth={minWidth}
         $scrollable={scrollable}
         $flex={flex}
       >
@@ -95,7 +83,6 @@ const Popover = (
 type ContentsProps = {
   $shrink?: boolean;
   $width?: number;
-  $minWidth?: number;
   $flex?: boolean;
   $scrollable: boolean;
   $mobilePosition?: "top" | "bottom";
@@ -114,8 +101,7 @@ const Contents = styled.div<ContentsProps>`
   padding: ${(props) => (props.$shrink ? "6px 0" : "12px 24px")};
   max-height: 75vh;
   box-shadow: ${s("menuShadow")};
-  ${(props) => props.$width && `width: ${props.$width}px`};
-  ${(props) => props.$minWidth && `min-width: ${props.$minWidth}px`};
+  width: ${(props) => props.$width}px;
 
   ${(props) =>
     props.$scrollable

app/components/Reactions/Reaction.tsx

@@ -1,171 +0,0 @@
-import { observer } from "mobx-react";
-import { transparentize } from "polished";
-import React from "react";
-import { useTranslation } from "react-i18next";
-import styled, { css } from "styled-components";
-import { s, hover } from "@shared/styles";
-import type { ReactionSummary } from "@shared/types";
-import { getEmojiId } from "@shared/utils/emoji";
-import User from "~/models/User";
-import { Emoji } from "~/components/Emoji";
-import Flex from "~/components/Flex";
-import NudeButton from "~/components/NudeButton";
-import Text from "~/components/Text";
-import Tooltip from "~/components/Tooltip";
-import useCurrentUser from "~/hooks/useCurrentUser";
-
-type Props = {
-  /** Thin reaction data - contains the emoji & active user ids for this reaction. */
-  reaction: ReactionSummary;
-  /** Users who reacted using this emoji. */
-  reactedUsers: User[];
-  /** Whether the emoji button should be disabled (prevents add/remove events). */
-  disabled: boolean;
-  /** Callback when the user intends to add the reaction. */
-  onAddReaction: (emoji: string) => Promise<void>;
-  /** Callback when the user intends to remove the reaction. */
-  onRemoveReaction: (emoji: string) => Promise<void>;
-};
-
-const useTooltipContent = ({
-  reactedUsers,
-  currUser,
-  emoji,
-  active,
-}: {
-  reactedUsers: User[];
-  currUser: User;
-  emoji: string;
-  active: boolean;
-}) => {
-  const { t } = useTranslation();
-
-  if (!reactedUsers.length) {
-    return;
-  }
-
-  const transformedEmoji = `:${getEmojiId(emoji)}:`;
-
-  switch (reactedUsers.length) {
-    case 1: {
-      return t("{{ username }} reacted with {{ emoji }}", {
-        username: active ? t("You") : reactedUsers[0].name,
-        emoji: transformedEmoji,
-      });
-    }
-
-    case 2: {
-      const firstUsername = active ? t("You") : reactedUsers[0].name;
-      const secondUsername = active
-        ? reactedUsers.find((user) => user.id !== currUser.id)?.name
-        : reactedUsers[1].name;
-
-      return t(
-        "{{ firstUsername }} and {{ secondUsername }} reacted with {{ emoji }}",
-        {
-          firstUsername,
-          secondUsername,
-          emoji: transformedEmoji,
-        }
-      );
-    }
-
-    default: {
-      const firstUsername = active ? t("You") : reactedUsers[0].name;
-      const count = reactedUsers.length - 1;
-
-      return t(
-        "{{ firstUsername }} and {{ count }} others reacted with {{ emoji }}",
-        {
-          firstUsername,
-          count,
-          emoji: transformedEmoji,
-        }
-      );
-    }
-  }
-};
-
-const Reaction: React.FC<Props> = ({
-  reaction,
-  reactedUsers,
-  disabled,
-  onAddReaction,
-  onRemoveReaction,
-}) => {
-  const user = useCurrentUser();
-
-  const active = reaction.userIds.includes(user.id);
-
-  const tooltipContent = useTooltipContent({
-    reactedUsers,
-    currUser: user,
-    emoji: reaction.emoji,
-    active,
-  });
-
-  const handleClick = React.useCallback(
-    (event: React.SyntheticEvent<HTMLButtonElement>) => {
-      event.stopPropagation();
-      active
-        ? void onRemoveReaction(reaction.emoji)
-        : void onAddReaction(reaction.emoji);
-    },
-    [reaction, active, onAddReaction, onRemoveReaction]
-  );
-
-  const DisplayedEmoji = React.useMemo(
-    () => (
-      <EmojiButton disabled={disabled} $active={active} onClick={handleClick}>
-        <Flex gap={6} justify="center" align="center">
-          <Emoji size={15}>{reaction.emoji}</Emoji>
-          <Count weight="xbold">{reaction.userIds.length}</Count>
-        </Flex>
-      </EmojiButton>
-    ),
-    [reaction.emoji, reaction.userIds, disabled, active, handleClick]
-  );
-
-  return tooltipContent ? (
-    <Tooltip content={tooltipContent} placement="bottom">
-      {DisplayedEmoji}
-    </Tooltip>
-  ) : (
-    <>{DisplayedEmoji}</>
-  );
-};
-
-const EmojiButton = styled(NudeButton)<{
-  $active: boolean;
-  disabled: boolean;
-}>`
-  width: auto;
-  height: 28px;
-  padding: 6px;
-  border-radius: 12px;
-  background: ${s("backgroundTertiary")};
-  pointer-events: ${({ disabled }) => disabled && "none"};
-
-  &: ${hover} {
-    background: ${s("backgroundQuaternary")};
-  }
-
-  ${(props) =>
-    props.$active &&
-    css`
-      background: ${transparentize(0.7, props.theme.accent)};
-
-      &: ${hover} {
-        background: ${transparentize(0.5, props.theme.accent)};
-      }
-    `}
-`;
-
-const Count = styled(Text)`
-  font-size: 11px;
-  color: ${s("buttonNeutralText")};
-  padding-right: 1px;
-  font-variant-numeric: tabular-nums;
-`;
-
-export default observer(Reaction);

app/components/Reactions/ReactionList.tsx

@@ -1,87 +0,0 @@
-import compact from "lodash/compact";
-import { observer } from "mobx-react";
-import React from "react";
-import Comment from "~/models/Comment";
-import useHover from "~/hooks/useHover";
-import useStores from "~/hooks/useStores";
-import Logger from "~/utils/Logger";
-import Flex from "../Flex";
-import { ResizingHeightContainer } from "../ResizingHeightContainer";
-import Reaction from "./Reaction";
-
-type Props = {
-  /** Model for which to show the reactions. */
-  model: Comment;
-  /** Callback when the user intends to add a reaction. */
-  onAddReaction: (emoji: string) => Promise<void>;
-  /** Callback when the user intends to remove a reaction. */
-  onRemoveReaction: (emoji: string) => Promise<void>;
-  /** classname generated by styled-components. */
-  className?: string;
-  /** Picker to render as the last element */
-  picker?: React.ReactElement;
-};
-
-const ReactionList: React.FC<Props> = ({
-  model,
-  onAddReaction,
-  onRemoveReaction,
-  className,
-  picker,
-}) => {
-  const { users } = useStores();
-  const listRef = React.useRef<HTMLDivElement>(null);
-
-  const hovered = useHover({
-    ref: listRef,
-    duration: 250,
-  });
-
-  React.useEffect(() => {
-    const loadReactedUsersData = async () => {
-      try {
-        await model.loadReactedUsersData();
-      } catch (err) {
-        Logger.warn("Could not prefetch reaction data");
-      }
-    };
-
-    if (hovered) {
-      void loadReactedUsersData();
-    }
-  }, [hovered, model]);
-
-  const hasReactions = !!model.reactions.length;
-  const style = React.useMemo(() => {
-    if (hasReactions) {
-      return { minHeight: 28 };
-    }
-    return undefined;
-  }, [hasReactions]);
-
-  return (
-    <ResizingHeightContainer style={style}>
-      <Flex ref={listRef} className={className} align="center" gap={6} wrap>
-        {model.reactions.map((reaction) => {
-          const reactedUsers = compact(
-            reaction.userIds.map((id) => users.get(id))
-          );
-
-          return (
-            <Reaction
-              key={reaction.emoji}
-              reaction={reaction}
-              reactedUsers={reactedUsers}
-              disabled={model.isResolved}
-              onAddReaction={onAddReaction}
-              onRemoveReaction={onRemoveReaction}
-            />
-          );
-        })}
-        {picker}
-      </Flex>
-    </ResizingHeightContainer>
-  );
-};
-
-export default observer(ReactionList);

app/components/Reactions/ReactionPicker.tsx

@@ -1,156 +0,0 @@
-import { ReactionIcon } from "outline-icons";
-import React from "react";
-import { useTranslation } from "react-i18next";
-import { PopoverDisclosure, usePopoverState } from "reakit";
-import EventBoundary from "@shared/components/EventBoundary";
-import Flex from "~/components/Flex";
-import NudeButton from "~/components/NudeButton";
-import PlaceholderText from "~/components/PlaceholderText";
-import Popover from "~/components/Popover";
-import useMobile from "~/hooks/useMobile";
-import useOnClickOutside from "~/hooks/useOnClickOutside";
-import useWindowSize from "~/hooks/useWindowSize";
-import Tooltip from "../Tooltip";
-
-const EmojiPanel = React.lazy(
-  () => import("~/components/IconPicker/components/EmojiPanel")
-);
-
-type Props = {
-  /** Callback when an emoji is selected by the user. */
-  onSelect: (emoji: string) => Promise<void>;
-  /** Callback when the picker is opened. */
-  onOpen?: () => void;
-  /** Callback when the picker is closed. */
-  onClose?: () => void;
-  /** Optional classname. */
-  className?: string;
-  size?: number;
-};
-
-const ReactionPicker: React.FC<Props> = ({
-  onSelect,
-  onOpen,
-  onClose,
-  className,
-  size,
-}) => {
-  const { t } = useTranslation();
-  const popover = usePopoverState({
-    modal: true,
-    unstable_offset: [0, 0],
-    placement: "bottom-end",
-  });
-
-  const { width: windowWidth } = useWindowSize();
-  const isMobile = useMobile();
-
-  const [query, setQuery] = React.useState("");
-  const contentRef = React.useRef<HTMLDivElement | null>(null);
-
-  const popoverWidth = isMobile ? windowWidth : 300;
-  // In mobile, popover is absolutely positioned to leave 8px on both sides.
-  const panelWidth = isMobile ? windowWidth - 16 : popoverWidth;
-  const { toggle, hide } = popover;
-  const handlePopoverButtonClick = React.useCallback(
-    (ev: React.MouseEvent) => {
-      ev.stopPropagation();
-      toggle();
-    },
-    [toggle]
-  );
-
-  const handleEmojiSelect = React.useCallback(
-    (emoji: string) => {
-      hide();
-      void onSelect(emoji);
-    },
-    [hide, onSelect]
-  );
-
-  // Popover open effect
-  React.useEffect(() => {
-    if (popover.visible) {
-      onOpen?.();
-    } else {
-      onClose?.();
-    }
-  }, [popover.visible, onOpen, onClose]);
-
-  // Custom click outside handling rather than using `hideOnClickOutside` from reakit so that we can
-  // prevent event bubbling.
-  useOnClickOutside(
-    contentRef,
-    (event) => {
-      if (
-        popover.visible &&
-        !popover.unstable_disclosureRef.current?.contains(event.target as Node)
-      ) {
-        event.stopPropagation();
-        event.preventDefault();
-        popover.hide();
-      }
-    },
-    { capture: true }
-  );
-
-  return (
-    <>
-      <PopoverDisclosure {...popover}>
-        {(props) => (
-          <Tooltip content={t("Add reaction")} placement="top" hideOnClick>
-            <NudeButton
-              {...props}
-              aria-label={t("Reaction picker")}
-              className={className}
-              onClick={handlePopoverButtonClick}
-              size={size}
-            >
-              <ReactionIcon size={22} />
-            </NudeButton>
-          </Tooltip>
-        )}
-      </PopoverDisclosure>
-      <Popover
-        {...popover}
-        ref={contentRef}
-        width={popoverWidth}
-        shrink
-        aria-label={t("Reaction picker")}
-        onClick={(e) => e.stopPropagation()}
-        hideOnClickOutside={false}
-      >
-        {popover.visible && (
-          <React.Suspense fallback={<Placeholder />}>
-            <EventBoundary>
-              <EmojiPanel
-                height={300}
-                panelWidth={panelWidth}
-                query={query}
-                onEmojiChange={handleEmojiSelect}
-                onQueryChange={setQuery}
-                panelActive
-              />
-            </EventBoundary>
-          </React.Suspense>
-        )}
-      </Popover>
-    </>
-  );
-};
-
-const Placeholder = React.memo(
-  () => (
-    <Flex column gap={6} style={{ height: "300px", padding: "6px 12px" }}>
-      <Flex gap={8}>
-        <PlaceholderText height={32} minWidth={90} />
-        <PlaceholderText height={32} width={32} />
-      </Flex>
-      <PlaceholderText height={24} width={120} />
-    </Flex>
-  ),
-  () => true
-);
-Placeholder.displayName = "ReactionPickerPlaceholder";
-
-export default ReactionPicker;

app/components/Reactions/ViewReactionsDialog.tsx

@@ -1,145 +0,0 @@
-import compact from "lodash/compact";
-import { observer } from "mobx-react";
-import React from "react";
-import { useTranslation } from "react-i18next";
-import { Tab, TabPanel, useTabState } from "reakit";
-import { toast } from "sonner";
-import styled, { css } from "styled-components";
-import { s, hover } from "@shared/styles";
-import Comment from "~/models/Comment";
-import { Avatar, AvatarSize } from "~/components/Avatar";
-import { Emoji } from "~/components/Emoji";
-import Flex from "~/components/Flex";
-import PlaceholderText from "~/components/PlaceholderText";
-import Text from "~/components/Text";
-import useStores from "~/hooks/useStores";
-
-type Props = {
-  /** Model for which to show the reactions. */
-  model: Comment;
-};
-
-const ViewReactionsDialog: React.FC<Props> = ({ model }) => {
-  const { t } = useTranslation();
-  const { users } = useStores();
-  const tab = useTabState();
-  const { reactedUsersLoaded } = model;
-
-  React.useEffect(() => {
-    const loadReactedUsersData = async () => {
-      try {
-        await model.loadReactedUsersData();
-      } catch (err) {
-        toast.error(t("Could not load reactions"));
-      }
-    };
-
-    void loadReactedUsersData();
-  }, [t, model]);
-
-  if (!reactedUsersLoaded) {
-    return <PlaceHolder />;
-  }
-
-  return (
-    <>
-      <TabActionsWrapper>
-        {model.reactions.map((reaction) => (
-          <StyledTab
-            {...tab}
-            key={reaction.emoji}
-            id={reaction.emoji}
-            aria-label={t("Reaction")}
-            $active={tab.selectedId === reaction.emoji}
-          >
-            <Emoji size={16}>{reaction.emoji}</Emoji>
-          </StyledTab>
-        ))}
-      </TabActionsWrapper>
-      {model.reactions.map((reaction) => {
-        const reactedUsers = compact(
-          reaction.userIds.map((id) => users.get(id))
-        );
-
-        return (
-          <StyledTabPanel {...tab} key={reaction.emoji}>
-            {reactedUsers.map((user) => (
-              <UserInfo key={user.name} align="center" gap={8}>
-                <Avatar model={user} size={AvatarSize.Medium} />
-                <Text size="medium">{user.name}</Text>
-              </UserInfo>
-            ))}
-          </StyledTabPanel>
-        );
-      })}
-    </>
-  );
-};
-
-const PlaceHolder = React.memo(
-  () => (
-    <>
-      <TabActionsWrapper gap={8} style={{ paddingBottom: "10px" }}>
-        <PlaceholderText width={40} height={32} />
-        <PlaceholderText width={40} height={32} />
-      </TabActionsWrapper>
-      <UserInfo align="center" gap={12}>
-        <PlaceholderText width={AvatarSize.Medium} height={AvatarSize.Medium} />
-        <PlaceholderText height={34} />
-      </UserInfo>
-      <UserInfo align="center" gap={12}>
-        <PlaceholderText width={AvatarSize.Medium} height={AvatarSize.Medium} />
-        <PlaceholderText height={34} />
-      </UserInfo>
-    </>
-  ),
-  () => true
-);
-PlaceHolder.displayName = "ViewReactionsPlaceholder";
-
-const TabActionsWrapper = styled(Flex)`
-  border-bottom: 1px solid ${s("inputBorder")};
-`;
-
-const StyledTab = styled(Tab)<{ $active: boolean }>`
-  position: relative;
-  font-weight: 500;
-  font-size: 14px;
-  cursor: var(--pointer);
-  background: none;
-  border: 0;
-  border-radius: 4px 4px 0 0;
-  padding: 8px 12px 10px;
-  user-select: none;
-  transition: background-color 100ms ease;
-
-  &: ${hover} {
-    background-color: ${s("listItemHoverBackground")};
-  }
-
-  ${({ $active }) =>
-    $active &&
-    css`
-      &:after {
-        content: "";
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        height: 1px;
-        background: ${s("textSecondary")};
-      }
-    `}
-`;
-
-const StyledTabPanel = styled(TabPanel)`
-  height: 300px;
-  padding: 5px 0;
-  overflow-y: auto;
-`;
-
-const UserInfo = styled(Flex)`
-  padding: 10px 8px;
-`;
-
-export default observer(ViewReactionsDialog);

app/components/ResizingHeightContainer.tsx

@@ -1,7 +1,7 @@
 import { m, TargetAndTransition } from "framer-motion";
 import * as React from "react";
 import { mergeRefs } from "react-merge-refs";
-import { useComponentSize } from "@shared/hooks/useComponentSize";
+import useComponentSize from "~/hooks/useComponentSize";
 
 type Props = {
   /** The children to render */

app/components/SearchListItem.tsx

@@ -7,9 +7,10 @@ import * as React from "react";
 import { Link } from "react-router-dom";
 import styled, { css } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
-import { s, hover, ellipsis } from "@shared/styles";
+import { s, ellipsis } from "@shared/styles";
 import Document from "~/models/Document";
 import Highlight, { Mark } from "~/components/Highlight";
+import { hover } from "~/styles";
 import { sharedDocumentPath } from "~/utils/routeHelpers";
 
 type Props = {

app/components/SearchPopover.tsx

@@ -19,10 +19,9 @@ import SearchListItem from "./SearchListItem";
 
 interface Props extends React.HTMLAttributes<HTMLInputElement> {
   shareId: string;
-  className?: string;
 }
 
-function SearchPopover({ shareId, className }: Props) {
+function SearchPopover({ shareId }: Props) {
   const { t } = useTranslation();
   const { documents } = useStores();
   const focusRef = React.useRef<HTMLElement | null>(null);
@@ -55,8 +54,7 @@ function SearchPopover({ shareId, className }: Props) {
   const performSearch = React.useCallback(
     async ({ query, ...options }) => {
       if (query?.length > 0) {
-        const response = await documents.search({
-          query,
+        const response = await documents.search(query, {
           shareId,
           ...options,
         });
@@ -188,7 +186,6 @@ function SearchPopover({ shareId, className }: Props) {
             onChange={handleSearchInputChange}
             onFocus={handleSearchInputFocus}
             onKeyDown={handleKeyDown}
-            className={className}
           />
         )}
       </PopoverDisclosure>