chore: Extend use of Event.createFromContext

.babelrc

@@ -12,7 +12,7 @@
         "legacy": true
       }
     ],
-    "@babel/plugin-transform-class-properties",
+    "@babel/plugin-proposal-class-properties",
     [
       "transform-inline-environment-variables",
       {
@@ -60,4 +60,4 @@
       ]
     }
   }
-}
+}

.circleci/config.yml

@@ -4,6 +4,12 @@ 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
@@ -72,14 +78,6 @@ jobs:
   test-server:
     <<: *defaults
     parallelism: 3
-    docker:
-      - image: cimg/node:20.10
-      - image: cimg/redis:5.0
-      - image: cimg/postgres:14.2
-        environment:
-          POSTGRES_USER: postgres
-          POSTGRES_PASSWORD: password
-          POSTGRES_DB: circle_test
     steps:
       - checkout
       - restore_cache:
@@ -90,7 +88,7 @@ jobs:
       - run:
           name: test
           command: |
-            TESTFILES=$(circleci tests glob "**/server/**/*.test.ts" | circleci tests split)
+            TESTFILES=$(circleci tests glob "server/**/*.test.ts" | circleci tests split)
             yarn test --maxWorkers=2 $TESTFILES
   bundle-size:
     <<: *defaults
@@ -110,7 +108,8 @@ jobs:
     executor: docker-publisher
     steps:
       - checkout
-      - setup_remote_docker
+      - setup_remote_docker:
+          version: 20.10.6
       - run:
           name: Install Docker buildx
           command: |
@@ -127,7 +126,7 @@ jobs:
             docker buildx install
             docker context create docker-multiarch
             docker run --rm --privileged multiarch/qemu-user-static --reset -p yes
-            docker buildx create --name docker-multiarch --platform linux/amd64,linux/arm/v7,linux/arm64/v8,linux/ppc64le,linux/s390x docker-multiarch
+            docker buildx create --name docker-multiarch --platform linux/amd64,linux/arm/v6,linux/arm/v7,linux/arm64/v8,linux/ppc64le,linux/s390x docker-multiarch
             docker buildx inspect --builder docker-multiarch --bootstrap
             docker buildx use docker-multiarch
       - run:
@@ -143,9 +142,9 @@ jobs:
           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 .
+              docker buildx build -t $IMAGE_NAME:${CIRCLE_TAG/v/''} --platform linux/amd64,linux/arm/v6,linux/arm/v7,linux/arm64/v8,linux/ppc64le,linux/s390x --push .
             else
-              docker buildx build -t $IMAGE_NAME:latest -t $IMAGE_NAME:${CIRCLE_TAG/v/''} --platform linux/amd64,linux/arm/v7,linux/arm64/v8,linux/ppc64le,linux/s390x --push .
+              docker buildx build -t $IMAGE_NAME:latest -t $IMAGE_NAME:${CIRCLE_TAG/v/''} --platform linux/amd64,linux/arm/v6,linux/arm/v7,linux/arm64/v8,linux/ppc64le,linux/s390x --push .
             fi
 
 workflows:

.env.sample

@@ -127,26 +127,6 @@ GITHUB_APP_NAME=
 GITHUB_APP_ID=
 GITHUB_APP_PRIVATE_KEY=
 
-# To configure Discord auth, you'll need to create a Discord Application at
-# => https://discord.com/developers/applications/
-#
-# When configuring the Client ID, add a redirect URL under "OAuth2":
-# https://<URL>/auth/discord.callback
-DISCORD_CLIENT_ID=
-DISCORD_CLIENT_SECRET=
-
-# DISCORD_SERVER_ID should be the ID of the Discord server that Outline is
-# integrated with. 
-# Used to verify that the user is a member of the server as well as server
-# metadata such as nicknames, server icon and name.
-DISCORD_SERVER_ID=
-
-# DISCORD_SERVER_ROLES should be a comma separated list of role IDs that are
-# allowed to access Outline. If this is not set, all members of the server
-# will be allowed to access Outline.
-# DISCORD_SERVER_ID and DISCORD_SERVER_ROLES must be set together.
-DISCORD_SERVER_ROLES=
-
 # –––––––––––––––– OPTIONAL ––––––––––––––––
 
 # Base64 encoded private key and certificate for HTTPS termination. This is only
@@ -189,10 +169,6 @@ SLACK_VERIFICATION_TOKEN=your_token
 SLACK_APP_ID=A0XXXXXXX
 SLACK_MESSAGE_ACTIONS=true
 
-# For Dropbox integration, follow these instructions to get the key https://www.dropbox.com/developers/embedder#setup
-# and do not forget to whitelist your domain name in the app settings
-DROPBOX_APP_KEY=
-
 # Optionally enable Sentry (sentry.io) to track errors and performance,
 # and optionally add a Sentry proxy tunnel for bypassing ad blockers in the UI:
 # https://docs.sentry.io/platforms/javascript/troubleshooting/#using-the-tunnel-option)

.eslintrc

@@ -41,7 +41,6 @@
     "@typescript-eslint/no-shadow": [
       "warn",
       {
-        "allow": ["transaction"],
         "hoist": "all",
         "ignoreTypeValueShadow": true
       }
@@ -140,4 +139,4 @@
       "typescript": {}
     }
   }
-}
+}

.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/no-response.yml

@@ -1,7 +1,7 @@
 # Configuration for probot-no-response - https://github.com/probot/no-response
 
 # Number of days of inactivity before an Issue is closed for lack of response
-daysUntilClose: 7
+daysUntilClose: 14
 
 # Label requiring a response
 responseRequiredLabel: more information needed

Dockerfile

@@ -1,17 +1,19 @@
 ARG APP_PATH=/opt/outline
-FROM outlinewiki/outline-base AS base
+FROM outlinewiki/outline-base as base
 
 ARG APP_PATH
 WORKDIR $APP_PATH
 
 # ---
-FROM node:20-slim AS runner
+FROM node:20-alpine AS runner
+
+RUN apk update && apk add --no-cache curl && apk add --no-cache ca-certificates
 
 LABEL org.opencontainers.image.source="https://github.com/outline/outline"
 
 ARG APP_PATH
 WORKDIR $APP_PATH
-ENV NODE_ENV=production
+ENV NODE_ENV production
 
 COPY --from=base $APP_PATH/build ./build
 COPY --from=base $APP_PATH/server ./server
@@ -20,19 +22,13 @@ COPY --from=base $APP_PATH/.sequelizerc ./.sequelizerc
 COPY --from=base $APP_PATH/node_modules ./node_modules
 COPY --from=base $APP_PATH/package.json ./package.json
 
-# Install wget to healthcheck the server
-RUN  apt-get update \
-  && apt-get install -y wget \
-  && rm -rf /var/lib/apt/lists/*
-
-# Create a non-root user compatible with Debian and BusyBox based images
-RUN addgroup --gid 1001 nodejs && \
-  adduser --uid 1001 --ingroup nodejs nodejs && \
+RUN addgroup -g 1001 -S nodejs && \
+  adduser -S nodejs -u 1001 && \
   chown -R nodejs:nodejs $APP_PATH/build && \
   mkdir -p /var/lib/outline && \
 	chown -R nodejs:nodejs /var/lib/outline
 
-ENV FILE_STORAGE_LOCAL_ROOT_DIR=/var/lib/outline/data
+ENV FILE_STORAGE_LOCAL_ROOT_DIR /var/lib/outline/data
 RUN mkdir -p "$FILE_STORAGE_LOCAL_ROOT_DIR" && \
   chown -R nodejs:nodejs "$FILE_STORAGE_LOCAL_ROOT_DIR" && \
   chmod 1777 "$FILE_STORAGE_LOCAL_ROOT_DIR"
@@ -41,7 +37,5 @@ VOLUME /var/lib/outline/data
 
 USER nodejs
 
-HEALTHCHECK --interval=1m CMD wget -qO- "http://localhost:${PORT:-3000}/_health" | grep -q "OK" || exit 1
-
 EXPOSE 3000
 CMD ["yarn", "start"]

Dockerfile.base

@@ -1,5 +1,5 @@
 ARG APP_PATH=/opt/outline
-FROM node:20-slim AS deps
+FROM node:20-alpine AS deps
 
 ARG APP_PATH
 WORKDIR $APP_PATH
@@ -17,5 +17,3 @@ RUN rm -rf node_modules
 
 RUN yarn install --production=true --frozen-lockfile --network-timeout 1000000 && \
   yarn cache clean
-
-ENV PORT=3000

LICENSE

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

app.json

@@ -3,13 +3,7 @@
   "description": "Open source wiki and knowledge base for growing teams",
   "website": "https://www.getoutline.com/",
   "repository": "https://github.com/outline/outline",
-  "keywords": [
-    "wiki",
-    "team",
-    "node",
-    "markdown",
-    "slack"
-  ],
+  "keywords": ["wiki", "team", "node", "markdown", "slack"],
   "success_url": "/",
   "formation": {
     "web": {
@@ -218,4 +212,4 @@
       "required": false
     }
   }
-}
+}

app/actions/definitions/apiKeys.tsx

@@ -1,7 +1,7 @@
 import { PlusIcon } from "outline-icons";
 import * as React from "react";
 import stores from "~/stores";
-import ApiKeyNew from "~/scenes/ApiKeyNew";
+import APIKeyNew from "~/scenes/APIKeyNew";
 import { createAction } from "..";
 import { SettingsSection } from "../sections";
 
@@ -19,7 +19,7 @@ export const createApiKey = createAction({
 
     stores.dialogs.openModal({
       title: t("New API key"),
-      content: <ApiKeyNew onSubmit={stores.dialogs.closeAllModals} />,
+      content: <APIKeyNew onSubmit={stores.dialogs.closeAllModals} />,
     });
   },
 });

app/actions/definitions/collections.tsx

@@ -1,32 +1,27 @@
 import {
-  ArchiveIcon,
   CollectionIcon,
   EditIcon,
   PadlockIcon,
   PlusIcon,
-  RestoreIcon,
   SearchIcon,
-  ShapesIcon,
   StarredIcon,
   TrashIcon,
   UnstarredIcon,
 } from "outline-icons";
 import * as React from "react";
-import { toast } from "sonner";
 import stores from "~/stores";
 import Collection from "~/models/Collection";
 import { CollectionEdit } from "~/components/Collection/CollectionEdit";
 import { CollectionNew } from "~/components/Collection/CollectionNew";
 import CollectionDeleteDialog from "~/components/CollectionDeleteDialog";
-import ConfirmationDialog from "~/components/ConfirmationDialog";
 import DynamicCollectionIcon from "~/components/Icons/CollectionIcon";
 import SharePopover from "~/components/Sharing/Collection/SharePopover";
 import { getHeaderExpandedKey } from "~/components/Sidebar/components/Header";
 import { createAction } from "~/actions";
-import { ActiveCollectionSection, CollectionSection } from "~/actions/sections";
+import { CollectionSection } from "~/actions/sections";
 import { setPersistedState } from "~/hooks/usePersistedState";
 import history from "~/utils/history";
-import { newTemplatePath, searchPath } from "~/utils/routeHelpers";
+import { searchPath } from "~/utils/routeHelpers";
 
 const ColorCollectionIcon = ({ collection }: { collection: Collection }) => (
   <DynamicCollectionIcon collection={collection} />
@@ -74,9 +69,9 @@ export const editCollection = createAction({
   name: ({ t, isContextMenu }) =>
     isContextMenu ? `${t("Edit")}…` : t("Edit collection"),
   analyticsName: "Edit collection",
-  section: ActiveCollectionSection,
+  section: CollectionSection,
   icon: <EditIcon />,
-  visible: ({ activeCollectionId }) =>
+  visible: ({ stores, activeCollectionId }) =>
     !!activeCollectionId &&
     stores.policies.abilities(activeCollectionId).update,
   perform: ({ t, activeCollectionId }) => {
@@ -100,12 +95,12 @@ export const editCollectionPermissions = createAction({
   name: ({ t, isContextMenu }) =>
     isContextMenu ? `${t("Permissions")}…` : t("Collection permissions"),
   analyticsName: "Collection permissions",
-  section: ActiveCollectionSection,
+  section: CollectionSection,
   icon: <PadlockIcon />,
-  visible: ({ activeCollectionId }) =>
+  visible: ({ stores, activeCollectionId }) =>
     !!activeCollectionId &&
     stores.policies.abilities(activeCollectionId).update,
-  perform: ({ t, activeCollectionId }) => {
+  perform: ({ t, stores, activeCollectionId }) => {
     if (!activeCollectionId) {
       return;
     }
@@ -116,7 +111,6 @@ export const editCollectionPermissions = createAction({
 
     stores.dialogs.openModal({
       title: t("Share this collection"),
-      style: { marginBottom: -12 },
       content: (
         <SharePopover
           collection={collection}
@@ -131,22 +125,9 @@ export const editCollectionPermissions = createAction({
 export const searchInCollection = createAction({
   name: ({ t }) => t("Search in collection"),
   analyticsName: "Search collection",
-  section: ActiveCollectionSection,
+  section: CollectionSection,
   icon: <SearchIcon />,
-  visible: ({ activeCollectionId }) => {
-    if (!activeCollectionId) {
-      return false;
-    }
-
-    const collection = stores.collections.get(activeCollectionId);
-
-    if (!collection?.isActive) {
-      return false;
-    }
-
-    return stores.policies.abilities(activeCollectionId).readDocument;
-  },
-
+  visible: ({ activeCollectionId }) => !!activeCollectionId,
   perform: ({ activeCollectionId }) => {
     history.push(searchPath(undefined, { collectionId: activeCollectionId }));
   },
@@ -155,10 +136,10 @@ export const searchInCollection = createAction({
 export const starCollection = createAction({
   name: ({ t }) => t("Star"),
   analyticsName: "Star collection",
-  section: ActiveCollectionSection,
+  section: CollectionSection,
   icon: <StarredIcon />,
   keywords: "favorite bookmark",
-  visible: ({ activeCollectionId }) => {
+  visible: ({ activeCollectionId, stores }) => {
     if (!activeCollectionId) {
       return false;
     }
@@ -168,7 +149,7 @@ export const starCollection = createAction({
       stores.policies.abilities(activeCollectionId).star
     );
   },
-  perform: async ({ activeCollectionId }) => {
+  perform: async ({ activeCollectionId, stores }) => {
     if (!activeCollectionId) {
       return;
     }
@@ -182,10 +163,10 @@ export const starCollection = createAction({
 export const unstarCollection = createAction({
   name: ({ t }) => t("Unstar"),
   analyticsName: "Unstar collection",
-  section: ActiveCollectionSection,
+  section: CollectionSection,
   icon: <UnstarredIcon />,
   keywords: "unfavorite unbookmark",
-  visible: ({ activeCollectionId }) => {
+  visible: ({ activeCollectionId, stores }) => {
     if (!activeCollectionId) {
       return false;
     }
@@ -195,7 +176,7 @@ export const unstarCollection = createAction({
       stores.policies.abilities(activeCollectionId).unstar
     );
   },
-  perform: async ({ activeCollectionId }) => {
+  perform: async ({ activeCollectionId, stores }) => {
     if (!activeCollectionId) {
       return;
     }
@@ -205,85 +186,19 @@ export const unstarCollection = createAction({
   },
 });
 
-export const archiveCollection = createAction({
-  name: ({ t }) => `${t("Archive")}…`,
-  analyticsName: "Archive collection",
-  section: CollectionSection,
-  icon: <ArchiveIcon />,
-  visible: ({ activeCollectionId, stores }) => {
-    if (!activeCollectionId) {
-      return false;
-    }
-    return !!stores.policies.abilities(activeCollectionId).archive;
-  },
-  perform: async ({ activeCollectionId, stores, t }) => {
-    const { dialogs, collections } = stores;
-    if (!activeCollectionId) {
-      return;
-    }
-    const collection = collections.get(activeCollectionId);
-    if (!collection) {
-      return;
-    }
-
-    dialogs.openModal({
-      title: t("Archive collection"),
-      content: (
-        <ConfirmationDialog
-          onSubmit={async () => {
-            await collection.archive();
-            toast.success(t("Collection archived"));
-          }}
-          submitText={t("Archive")}
-          savingText={`${t("Archiving")}…`}
-        >
-          {t(
-            "Archiving this collection will also archive all documents within it. Documents from the collection will no longer be visible in search results."
-          )}
-        </ConfirmationDialog>
-      ),
-    });
-  },
-});
-
-export const restoreCollection = createAction({
-  name: ({ t }) => t("Restore"),
-  analyticsName: "Restore collection",
-  section: CollectionSection,
-  icon: <RestoreIcon />,
-  visible: ({ activeCollectionId, stores }) => {
-    if (!activeCollectionId) {
-      return false;
-    }
-    return !!stores.policies.abilities(activeCollectionId).restore;
-  },
-  perform: async ({ activeCollectionId, stores, t }) => {
-    if (!activeCollectionId) {
-      return;
-    }
-    const collection = stores.collections.get(activeCollectionId);
-    if (!collection) {
-      return;
-    }
-
-    await collection.restore();
-    toast.success(t("Collection restored"));
-  },
-});
-
 export const deleteCollection = createAction({
   name: ({ t }) => `${t("Delete")}…`,
   analyticsName: "Delete collection",
-  section: ActiveCollectionSection,
+  section: CollectionSection,
   dangerous: true,
   icon: <TrashIcon />,
-  visible: ({ activeCollectionId }) => {
+  visible: ({ activeCollectionId, stores }) => {
     if (!activeCollectionId) {
       return false;
     }
     return stores.policies.abilities(activeCollectionId).delete;
   },
-  perform: ({ activeCollectionId, t }) => {
+  perform: ({ activeCollectionId, stores, t }) => {
     if (!activeCollectionId) {
       return;
     }
@@ -305,27 +220,6 @@ export const deleteCollection = createAction({
   },
 });
 
-export const createTemplate = createAction({
-  name: ({ t }) => t("New template"),
-  analyticsName: "New template",
-  section: ActiveCollectionSection,
-  icon: <ShapesIcon />,
-  keywords: "new create template",
-  visible: ({ activeCollectionId }) =>
-    !!(
-      !!activeCollectionId &&
-      stores.policies.abilities(activeCollectionId).createDocument
-    ),
-  perform: ({ activeCollectionId, event }) => {
-    if (!activeCollectionId) {
-      return;
-    }
-    event?.preventDefault();
-    event?.stopPropagation();
-    history.push(newTemplatePath(activeCollectionId));
-  },
-});
-
 export const rootCollectionActions = [
   openCollection,
   createCollection,

app/actions/definitions/comments.tsx

@@ -1,123 +0,0 @@
-import { DoneIcon, SmileyIcon, TrashIcon } from "outline-icons";
-import * as React from "react";
-import { toast } from "sonner";
-import stores from "~/stores";
-import Comment from "~/models/Comment";
-import CommentDeleteDialog from "~/components/CommentDeleteDialog";
-import ViewReactionsDialog from "~/components/Reactions/ViewReactionsDialog";
-import history from "~/utils/history";
-import { createAction } from "..";
-import { DocumentSection } from "../sections";
-
-export const deleteCommentFactory = ({
-  comment,
-  onDelete,
-}: {
-  comment: Comment;
-  onDelete: () => void;
-}) =>
-  createAction({
-    name: ({ t }) => `${t("Delete")}…`,
-    analyticsName: "Delete comment",
-    section: DocumentSection,
-    icon: <TrashIcon />,
-    keywords: "trash",
-    dangerous: true,
-    visible: () => stores.policies.abilities(comment.id).delete,
-    perform: ({ t, event }) => {
-      event?.preventDefault();
-      event?.stopPropagation();
-
-      stores.dialogs.openModal({
-        title: t("Delete comment"),
-        content: <CommentDeleteDialog comment={comment} onSubmit={onDelete} />,
-      });
-    },
-  });
-
-export const resolveCommentFactory = ({
-  comment,
-  onResolve,
-}: {
-  comment: Comment;
-  onResolve: () => void;
-}) =>
-  createAction({
-    name: ({ t }) => t("Mark as resolved"),
-    analyticsName: "Resolve thread",
-    section: DocumentSection,
-    icon: <DoneIcon outline />,
-    visible: () =>
-      stores.policies.abilities(comment.id).resolve &&
-      stores.policies.abilities(comment.documentId).update,
-    perform: async ({ t }) => {
-      await comment.resolve();
-
-      const locationState = history.location.state as Record<string, unknown>;
-      history.replace({
-        ...history.location,
-        state: {
-          sidebarContext: locationState["sidebarContext"],
-          commentId: undefined,
-        },
-      });
-
-      onResolve();
-      toast.success(t("Thread resolved"));
-    },
-  });
-
-export const unresolveCommentFactory = ({
-  comment,
-  onUnresolve,
-}: {
-  comment: Comment;
-  onUnresolve: () => void;
-}) =>
-  createAction({
-    name: ({ t }) => t("Mark as unresolved"),
-    analyticsName: "Unresolve thread",
-    section: DocumentSection,
-    icon: <DoneIcon outline />,
-    visible: () =>
-      stores.policies.abilities(comment.id).unresolve &&
-      stores.policies.abilities(comment.documentId).update,
-    perform: async () => {
-      await comment.unresolve();
-
-      const locationState = history.location.state as Record<string, unknown>;
-      history.replace({
-        ...history.location,
-        state: {
-          sidebarContext: locationState["sidebarContext"],
-          commentId: undefined,
-        },
-      });
-
-      onUnresolve();
-    },
-  });
-
-export const viewCommentReactionsFactory = ({
-  comment,
-}: {
-  comment: Comment;
-}) =>
-  createAction({
-    name: ({ t }) => `${t("View reactions")}`,
-    analyticsName: "View comment reactions",
-    section: DocumentSection,
-    icon: <SmileyIcon />,
-    visible: () =>
-      stores.policies.abilities(comment.id).read &&
-      comment.reactions.length > 0,
-    perform: ({ t, event }) => {
-      event?.preventDefault();
-      event?.stopPropagation();
-
-      stores.dialogs.openModal({
-        title: t("Reactions"),
-        content: <ViewReactionsDialog model={comment} />,
-      });
-    },
-  });

app/actions/definitions/documents.tsx

@@ -24,39 +24,25 @@ import {
   UnpublishIcon,
   PublishIcon,
   CommentIcon,
+  GlobeIcon,
   CopyIcon,
   EyeIcon,
-  PadlockIcon,
-  GlobeIcon,
-  LogoutIcon,
 } from "outline-icons";
 import * as React from "react";
 import { toast } from "sonner";
-import Icon from "@shared/components/Icon";
-import {
-  ExportContentType,
-  TeamPreference,
-  NavigationNode,
-} from "@shared/types";
+import { ExportContentType, TeamPreference } from "@shared/types";
 import { getEventFiles } from "@shared/utils/files";
-import UserMembership from "~/models/UserMembership";
 import DocumentDelete from "~/scenes/DocumentDelete";
 import DocumentMove from "~/scenes/DocumentMove";
 import DocumentPermanentDelete from "~/scenes/DocumentPermanentDelete";
 import DocumentPublish from "~/scenes/DocumentPublish";
 import DeleteDocumentsInTrash from "~/scenes/Trash/components/DeleteDocumentsInTrash";
-import ConfirmationDialog from "~/components/ConfirmationDialog";
-import DocumentCopy from "~/components/DocumentCopy";
-import MarkdownIcon from "~/components/Icons/MarkdownIcon";
+import DocumentTemplatizeDialog from "~/components/DocumentTemplatizeDialog";
+import DuplicateDialog from "~/components/DuplicateDialog";
 import SharePopover from "~/components/Sharing/Document";
 import { getHeaderExpandedKey } from "~/components/Sidebar/components/Header";
-import DocumentTemplatizeDialog from "~/components/TemplatizeDialog";
 import { createAction } from "~/actions";
-import {
-  ActiveDocumentSection,
-  DocumentSection,
-  TrashSection,
-} from "~/actions/sections";
+import { DocumentSection, TrashSection } from "~/actions/sections";
 import env from "~/env";
 import { setPersistedState } from "~/hooks/usePersistedState";
 import history from "~/utils/history";
@@ -65,11 +51,11 @@ import {
   documentHistoryPath,
   homePath,
   newDocumentPath,
-  newNestedDocumentPath,
   searchPath,
   documentPath,
   urlify,
   trashPath,
+  newTemplatePath,
 } from "~/utils/routeHelpers";
 
 export const openDocument = createAction({
@@ -80,24 +66,23 @@ export const openDocument = createAction({
   keywords: "go to",
   icon: <DocumentIcon />,
   children: ({ stores }) => {
-    const nodes = stores.collections.navigationNodes.reduce(
-      (acc, node) => [...acc, ...node.children],
-      [] as NavigationNode[]
-    );
+    const paths = stores.collections.pathsToDocuments;
 
-    return nodes.map((item) => ({
-      // Note: using url which includes the slug rather than id here to bust
-      // cache if the document is renamed
-      id: item.url,
-      name: item.title,
-      icon: item.icon ? (
-        <Icon value={item.icon} color={item.color ?? undefined} />
-      ) : (
-        <DocumentIcon />
-      ),
-      section: DocumentSection,
-      perform: () => history.push(item.url),
-    }));
+    return paths
+      .filter((path) => path.type === "document")
+      .map((path) => ({
+        // Note: using url which includes the slug rather than id here to bust
+        // cache if the document is renamed
+        id: path.url,
+        name: path.title,
+        icon: function _Icon() {
+          return stores.documents.get(path.id)?.isStarred ? (
+            <StarredIcon />
+          ) : null;
+        },
+        section: DocumentSection,
+        perform: () => history.push(path.url),
+      }));
   },
 });
 
@@ -119,9 +104,9 @@ export const createDocument = createAction({
       !!currentTeamId && stores.policies.abilities(currentTeamId).createDocument
     );
   },
-  perform: ({ activeCollectionId, sidebarContext }) =>
+  perform: ({ activeCollectionId, inStarredSection }) =>
     history.push(newDocumentPath(activeCollectionId), {
-      sidebarContext,
+      starred: inStarredSection,
     }),
 });
 
@@ -131,35 +116,16 @@ export const createDocumentFromTemplate = createAction({
   section: DocumentSection,
   icon: <NewDocumentIcon />,
   keywords: "create",
-  visible: ({
-    currentTeamId,
-    activeCollectionId,
-    activeDocumentId,
-    stores,
-  }) => {
-    const document = activeDocumentId
-      ? stores.documents.get(activeDocumentId)
-      : undefined;
-
-    if (
-      !currentTeamId ||
-      !document?.isTemplate ||
-      !!document?.isDraft ||
-      !!document?.isDeleted
-    ) {
-      return false;
-    }
-
-    if (activeCollectionId) {
-      return stores.policies.abilities(activeCollectionId).createDocument;
-    }
-    return stores.policies.abilities(currentTeamId).createDocument;
-  },
-  perform: ({ activeCollectionId, activeDocumentId, sidebarContext }) =>
+  visible: ({ currentTeamId, activeDocumentId, stores }) =>
+    !!currentTeamId &&
+    !!activeDocumentId &&
+    !!stores.documents.get(activeDocumentId)?.template &&
+    stores.policies.abilities(currentTeamId).createDocument,
+  perform: ({ activeCollectionId, activeDocumentId, inStarredSection }) =>
     history.push(
       newDocumentPath(activeCollectionId, { templateId: activeDocumentId }),
       {
-        sidebarContext,
+        starred: inStarredSection,
       }
     ),
 });
@@ -167,7 +133,7 @@ export const createDocumentFromTemplate = createAction({
 export const createNestedDocument = createAction({
   name: ({ t }) => t("New nested document"),
   analyticsName: "New document",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
   icon: <NewDocumentIcon />,
   keywords: "create",
   visible: ({ currentTeamId, activeDocumentId, stores }) =>
@@ -175,16 +141,21 @@ export const createNestedDocument = createAction({
     !!activeDocumentId &&
     stores.policies.abilities(currentTeamId).createDocument &&
     stores.policies.abilities(activeDocumentId).createChildDocument,
-  perform: ({ activeDocumentId, sidebarContext }) =>
-    history.push(newNestedDocumentPath(activeDocumentId), {
-      sidebarContext,
-    }),
+  perform: ({ activeCollectionId, activeDocumentId, inStarredSection }) =>
+    history.push(
+      newDocumentPath(activeCollectionId, {
+        parentDocumentId: activeDocumentId,
+      }),
+      {
+        starred: inStarredSection,
+      }
+    ),
 });
 
 export const starDocument = createAction({
   name: ({ t }) => t("Star"),
   analyticsName: "Star document",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
   icon: <StarredIcon />,
   keywords: "favorite bookmark",
   visible: ({ activeDocumentId, stores }) => {
@@ -210,7 +181,7 @@ export const starDocument = createAction({
 export const unstarDocument = createAction({
   name: ({ t }) => t("Unstar"),
   analyticsName: "Unstar document",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
   icon: <UnstarredIcon />,
   keywords: "unfavorite unbookmark",
   visible: ({ activeDocumentId, stores }) => {
@@ -236,7 +207,7 @@ export const unstarDocument = createAction({
 export const publishDocument = createAction({
   name: ({ t }) => t("Publish"),
   analyticsName: "Publish document",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
   icon: <PublishIcon />,
   visible: ({ activeDocumentId, stores }) => {
     if (!activeDocumentId) {
@@ -257,7 +228,7 @@ export const publishDocument = createAction({
       return;
     }
 
-    if (document?.collectionId || document?.template) {
+    if (document?.collectionId) {
       await document.save(undefined, {
         publish: true,
       });
@@ -278,7 +249,7 @@ export const publishDocument = createAction({
 export const unpublishDocument = createAction({
   name: ({ t }) => t("Unpublish"),
   analyticsName: "Unpublish document",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
   icon: <UnpublishIcon />,
   visible: ({ activeDocumentId, stores }) => {
     if (!activeDocumentId) {
@@ -309,7 +280,7 @@ export const unpublishDocument = createAction({
 export const subscribeDocument = createAction({
   name: ({ t }) => t("Subscribe"),
   analyticsName: "Subscribe to document",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
   icon: <SubscribeIcon />,
   visible: ({ activeDocumentId, stores }) => {
     if (!activeDocumentId) {
@@ -337,7 +308,7 @@ export const subscribeDocument = createAction({
 export const unsubscribeDocument = createAction({
   name: ({ t }) => t("Unsubscribe"),
   analyticsName: "Unsubscribe from document",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
   icon: <UnsubscribeIcon />,
   visible: ({ activeDocumentId, stores }) => {
     if (!activeDocumentId) {
@@ -365,30 +336,29 @@ export const unsubscribeDocument = createAction({
 });
 
 export const shareDocument = createAction({
-  name: ({ t }) => `${t("Permissions")}…`,
+  name: ({ t }) => t("Share"),
   analyticsName: "Share document",
-  section: ActiveDocumentSection,
-  icon: <PadlockIcon />,
-  visible: ({ stores, activeDocumentId }) => {
-    const can = stores.policies.abilities(activeDocumentId!);
-    return can.manageUsers || can.share;
-  },
+  section: DocumentSection,
+  icon: <GlobeIcon />,
   perform: async ({ activeDocumentId, stores, currentUserId, t }) => {
     if (!activeDocumentId || !currentUserId) {
       return;
     }
 
     const document = stores.documents.get(activeDocumentId);
+    const share = stores.shares.getByDocumentId(activeDocumentId);
+    const sharedParent = stores.shares.getByDocumentParents(activeDocumentId);
     if (!document) {
       return;
     }
 
     stores.dialogs.openModal({
-      style: { marginBottom: -12 },
       title: t("Share this document"),
       content: (
         <SharePopover
           document={document}
+          share={share}
+          sharedParent={sharedParent}
           onRequestClose={stores.dialogs.closeAllModals}
           visible
         />
@@ -400,7 +370,7 @@ export const shareDocument = createAction({
 export const downloadDocumentAsHTML = createAction({
   name: ({ t }) => t("HTML"),
   analyticsName: "Download document as HTML",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
   keywords: "html export",
   icon: <DownloadIcon />,
   iconInContextMenu: false,
@@ -419,7 +389,7 @@ export const downloadDocumentAsHTML = createAction({
 export const downloadDocumentAsPDF = createAction({
   name: ({ t }) => t("PDF"),
   analyticsName: "Download document as PDF",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
   keywords: "export",
   icon: <DownloadIcon />,
   iconInContextMenu: false,
@@ -443,7 +413,7 @@ export const downloadDocumentAsPDF = createAction({
 export const downloadDocumentAsMarkdown = createAction({
   name: ({ t }) => t("Markdown"),
   analyticsName: "Download document as Markdown",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
   keywords: "md markdown export",
   icon: <DownloadIcon />,
   iconInContextMenu: false,
@@ -463,11 +433,9 @@ export const downloadDocument = createAction({
   name: ({ t, isContextMenu }) =>
     isContextMenu ? t("Download") : t("Download document"),
   analyticsName: "Download document",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
   icon: <DownloadIcon />,
   keywords: "export",
-  visible: ({ activeDocumentId, stores }) =>
-    !!activeDocumentId && stores.policies.abilities(activeDocumentId).download,
   children: [
     downloadDocumentAsHTML,
     downloadDocumentAsPDF,
@@ -477,10 +445,8 @@ export const downloadDocument = createAction({
 
 export const copyDocumentAsMarkdown = createAction({
   name: ({ t }) => t("Copy as Markdown"),
-  section: ActiveDocumentSection,
+  section: DocumentSection,
   keywords: "clipboard",
-  icon: <MarkdownIcon />,
-  iconInContextMenu: false,
   visible: ({ activeDocumentId, stores }) =>
     !!activeDocumentId && stores.policies.abilities(activeDocumentId).download,
   perform: ({ stores, activeDocumentId, t }) => {
@@ -494,33 +460,10 @@ export const copyDocumentAsMarkdown = createAction({
   },
 });
 
-export const copyDocumentShareLink = createAction({
-  name: ({ t }) => t("Copy public link"),
-  section: ActiveDocumentSection,
-  keywords: "clipboard share",
-  icon: <GlobeIcon />,
-  iconInContextMenu: false,
-  visible: ({ activeDocumentId, stores }) =>
-    !!activeDocumentId &&
-    !!stores.shares.getByDocumentId(activeDocumentId)?.published,
-  perform: ({ stores, activeDocumentId, t }) => {
-    if (!activeDocumentId) {
-      return;
-    }
-    const share = stores.shares.getByDocumentId(activeDocumentId);
-    if (share) {
-      copy(share.url);
-      toast.success(t("Link copied to clipboard"));
-    }
-  },
-});
-
 export const copyDocumentLink = createAction({
   name: ({ t }) => t("Copy link"),
-  section: ActiveDocumentSection,
+  section: DocumentSection,
   keywords: "clipboard",
-  icon: <CopyIcon />,
-  iconInContextMenu: false,
   visible: ({ activeDocumentId }) => !!activeDocumentId,
   perform: ({ stores, activeDocumentId, t }) => {
     const document = activeDocumentId
@@ -536,17 +479,17 @@ export const copyDocumentLink = createAction({
 export const copyDocument = createAction({
   name: ({ t }) => t("Copy"),
   analyticsName: "Copy document",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
   icon: <CopyIcon />,
   keywords: "clipboard",
-  children: [copyDocumentLink, copyDocumentShareLink, copyDocumentAsMarkdown],
+  children: [copyDocumentLink, copyDocumentAsMarkdown],
 });
 
 export const duplicateDocument = createAction({
   name: ({ t, isContextMenu }) =>
     isContextMenu ? t("Duplicate") : t("Duplicate document"),
   analyticsName: "Duplicate document",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
   icon: <DuplicateIcon />,
   keywords: "copy",
   visible: ({ activeDocumentId, stores }) =>
@@ -562,7 +505,7 @@ export const duplicateDocument = createAction({
     stores.dialogs.openModal({
       title: t("Copy document"),
       content: (
-        <DocumentCopy
+        <DuplicateDialog
           document={document}
           onSubmit={(response) => {
             stores.dialogs.closeAllModals();
@@ -590,7 +533,7 @@ export const pinDocumentToCollection = createAction({
     });
   },
   analyticsName: "Pin document to collection",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
   icon: <PinIcon />,
   iconInContextMenu: false,
   visible: ({ activeCollectionId, activeDocumentId, stores }) => {
@@ -626,7 +569,7 @@ export const pinDocumentToCollection = createAction({
 export const pinDocumentToHome = createAction({
   name: ({ t }) => t("Pin to home"),
   analyticsName: "Pin document to home",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
   icon: <PinIcon />,
   iconInContextMenu: false,
   visible: ({ activeDocumentId, currentTeamId, stores }) => {
@@ -658,7 +601,7 @@ export const pinDocumentToHome = createAction({
 export const pinDocument = createAction({
   name: ({ t }) => t("Pin"),
   analyticsName: "Pin document",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
   icon: <PinIcon />,
   children: [pinDocumentToCollection, pinDocumentToHome],
 });
@@ -666,7 +609,7 @@ export const pinDocument = createAction({
 export const searchInDocument = createAction({
   name: ({ t }) => t("Search in document"),
   analyticsName: "Search document",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
   icon: <SearchIcon />,
   visible: ({ stores, activeDocumentId }) => {
     if (!activeDocumentId) {
@@ -684,7 +627,7 @@ export const printDocument = createAction({
   name: ({ t, isContextMenu }) =>
     isContextMenu ? t("Print") : t("Print document"),
   analyticsName: "Print document",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
   icon: <PrintIcon />,
   visible: ({ activeDocumentId }) => !!(activeDocumentId && window.print),
   perform: () => {
@@ -719,54 +662,52 @@ export const importDocument = createAction({
       const files = getEventFiles(ev);
 
       const file = files[0];
-
-      try {
-        const document = await documents.import(
-          file,
-          activeDocumentId,
-          activeCollectionId,
-          {
-            publish: true,
-          }
-        );
-        history.push(document.url);
-      } catch (err) {
-        toast.error(err.message);
-      }
+      const document = await documents.import(
+        file,
+        activeDocumentId,
+        activeCollectionId,
+        {
+          publish: true,
+        }
+      );
+      history.push(document.url);
     };
 
     input.click();
   },
 });
 
-export const createTemplateFromDocument = createAction({
-  name: ({ t }) => t("Templatize"),
+export const createTemplate = createAction({
+  name: ({ t, activeDocumentId }) =>
+    activeDocumentId ? t("Templatize") : t("New template"),
   analyticsName: "Templatize document",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
   icon: <ShapesIcon />,
   keywords: "new create template",
   visible: ({ activeCollectionId, activeDocumentId, stores }) => {
-    const document = activeDocumentId
-      ? stores.documents.get(activeDocumentId)
-      : undefined;
-    if (document?.isTemplate || !document?.isActive) {
-      return false;
+    if (activeDocumentId) {
+      const document = stores.documents.get(activeDocumentId);
+      if (document?.isTemplate || !document?.isActive) {
+        return false;
+      }
     }
     return !!(
       !!activeCollectionId &&
-      stores.policies.abilities(activeCollectionId).updateDocument
+      stores.policies.abilities(activeCollectionId).update
     );
   },
-  perform: ({ activeDocumentId, stores, t, event }) => {
-    if (!activeDocumentId) {
-      return;
-    }
+  perform: ({ activeCollectionId, activeDocumentId, stores, t, event }) => {
     event?.preventDefault();
     event?.stopPropagation();
-    stores.dialogs.openModal({
-      title: t("Create template"),
-      content: <DocumentTemplatizeDialog documentId={activeDocumentId} />,
-    });
+
+    if (activeDocumentId) {
+      stores.dialogs.openModal({
+        title: t("Create template"),
+        content: <DocumentTemplatizeDialog documentId={activeDocumentId} />,
+      });
+    } else if (activeCollectionId) {
+      history.push(newTemplatePath(activeCollectionId));
+    }
   },
 });
 
@@ -777,14 +718,14 @@ export const openRandomDocument = createAction({
   section: DocumentSection,
   icon: <ShuffleIcon />,
   perform: ({ stores, activeDocumentId }) => {
-    const nodes = stores.collections.navigationNodes
-      .reduce((acc, node) => [...acc, ...node.children], [] as NavigationNode[])
-      .filter((node) => node.id !== activeDocumentId);
+    const documentPaths = stores.collections.pathsToDocuments.filter(
+      (path) => path.type === "document" && path.id !== activeDocumentId
+    );
+    const documentPath =
+      documentPaths[Math.round(Math.random() * documentPaths.length)];
 
-    const random = nodes[Math.round(Math.random() * nodes.length)];
-
-    if (random) {
-      history.push(random.url);
+    if (documentPath) {
+      history.push(documentPath.url);
     }
   },
 });
@@ -801,50 +742,11 @@ export const searchDocumentsForQuery = (searchQuery: string) =>
     visible: ({ location }) => location.pathname !== searchPath(),
   });
 
-export const moveTemplateToWorkspace = createAction({
-  name: ({ t }) => t("Move to workspace"),
-  analyticsName: "Move template to workspace",
+export const moveDocument = createAction({
+  name: ({ t }) => t("Move"),
+  analyticsName: "Move document",
   section: DocumentSection,
   icon: <MoveIcon />,
-  iconInContextMenu: false,
-  visible: ({ activeDocumentId, stores }) => {
-    if (!activeDocumentId) {
-      return false;
-    }
-    const document = stores.documents.get(activeDocumentId);
-    if (!document || !document.template || document.isWorkspaceTemplate) {
-      return false;
-    }
-    return !!stores.policies.abilities(activeDocumentId).move;
-  },
-  perform: async ({ activeDocumentId, stores }) => {
-    if (activeDocumentId) {
-      const document = stores.documents.get(activeDocumentId);
-      if (!document) {
-        return;
-      }
-
-      await document.move({
-        collectionId: null,
-      });
-    }
-  },
-});
-
-export const moveDocumentToCollection = createAction({
-  name: ({ activeDocumentId, stores, t }) => {
-    if (!activeDocumentId) {
-      return t("Move");
-    }
-    const document = stores.documents.get(activeDocumentId);
-    return document?.template && document?.collectionId
-      ? t("Move to collection")
-      : t("Move");
-  },
-  analyticsName: "Move document",
-  section: ActiveDocumentSection,
-  icon: <MoveIcon />,
-  iconInContextMenu: false,
   visible: ({ activeDocumentId, stores }) => {
     if (!activeDocumentId) {
       return false;
@@ -868,48 +770,10 @@ export const moveDocumentToCollection = createAction({
   },
 });
 
-export const moveDocument = createAction({
-  name: ({ t }) => t("Move"),
-  analyticsName: "Move document",
-  section: ActiveDocumentSection,
-  icon: <MoveIcon />,
-  visible: ({ activeDocumentId, stores }) => {
-    if (!activeDocumentId) {
-      return false;
-    }
-    const document = stores.documents.get(activeDocumentId);
-    // Don't show the button if this is a non-workspace template.
-    if (!document || (document.template && !document.isWorkspaceTemplate)) {
-      return false;
-    }
-    return !!stores.policies.abilities(activeDocumentId).move;
-  },
-  perform: moveDocumentToCollection.perform,
-});
-
-export const moveTemplate = createAction({
-  name: ({ t }) => t("Move"),
-  analyticsName: "Move document",
-  section: ActiveDocumentSection,
-  icon: <MoveIcon />,
-  visible: ({ activeDocumentId, stores }) => {
-    if (!activeDocumentId) {
-      return false;
-    }
-    const document = stores.documents.get(activeDocumentId);
-    // Don't show the menu if this is not a template (or) a workspace template.
-    if (!document || !document.template || document.isWorkspaceTemplate) {
-      return false;
-    }
-    return !!stores.policies.abilities(activeDocumentId).move;
-  },
-  children: [moveTemplateToWorkspace, moveDocumentToCollection],
-});
-
 export const archiveDocument = createAction({
-  name: ({ t }) => `${t("Archive")}…`,
+  name: ({ t }) => t("Archive"),
   analyticsName: "Archive document",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
   icon: <ArchiveIcon />,
   visible: ({ activeDocumentId, stores }) => {
     if (!activeDocumentId) {
@@ -918,30 +782,14 @@ export const archiveDocument = createAction({
     return !!stores.policies.abilities(activeDocumentId).archive;
   },
   perform: async ({ activeDocumentId, stores, t }) => {
-    const { dialogs, documents } = stores;
-
     if (activeDocumentId) {
-      const document = documents.get(activeDocumentId);
+      const document = stores.documents.get(activeDocumentId);
       if (!document) {
         return;
       }
 
-      dialogs.openModal({
-        title: t("Are you sure you want to archive this document?"),
-        content: (
-          <ConfirmationDialog
-            onSubmit={async () => {
-              await document.archive();
-              toast.success(t("Document archived"));
-            }}
-            savingText={`${t("Archiving")}…`}
-          >
-            {t(
-              "Archiving this document will remove it from the collection and search results."
-            )}
-          </ConfirmationDialog>
-        ),
-      });
+      await document.archive();
+      toast.success(t("Document archived"));
     }
   },
 });
@@ -949,7 +797,7 @@ export const archiveDocument = createAction({
 export const deleteDocument = createAction({
   name: ({ t }) => `${t("Delete")}…`,
   analyticsName: "Delete document",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
   icon: <TrashIcon />,
   dangerous: true,
   visible: ({ activeDocumentId, stores }) => {
@@ -983,7 +831,7 @@ export const deleteDocument = createAction({
 export const permanentlyDeleteDocument = createAction({
   name: ({ t }) => t("Permanently delete"),
   analyticsName: "Permanently delete document",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
   icon: <CrossIcon />,
   dangerous: true,
   visible: ({ activeDocumentId, stores }) => {
@@ -1038,7 +886,7 @@ export const permanentlyDeleteDocumentsInTrash = createAction({
 export const openDocumentComments = createAction({
   name: ({ t }) => t("Comments"),
   analyticsName: "Open comments",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
   icon: <CommentIcon />,
   visible: ({ activeDocumentId, stores }) => {
     const can = stores.policies.abilities(activeDocumentId ?? "");
@@ -1053,14 +901,14 @@ export const openDocumentComments = createAction({
       return;
     }
 
-    stores.ui.toggleComments();
+    stores.ui.toggleComments(activeDocumentId);
   },
 });
 
 export const openDocumentHistory = createAction({
   name: ({ t }) => t("History"),
   analyticsName: "Open document history",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
   icon: <HistoryIcon />,
   visible: ({ activeDocumentId, stores }) => {
     const can = stores.policies.abilities(activeDocumentId ?? "");
@@ -1081,7 +929,7 @@ export const openDocumentHistory = createAction({
 export const openDocumentInsights = createAction({
   name: ({ t }) => t("Insights"),
   analyticsName: "Open document insights",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
   icon: <GraphIcon />,
   visible: ({ activeDocumentId, stores }) => {
     const can = stores.policies.abilities(activeDocumentId ?? "");
@@ -1118,7 +966,7 @@ export const toggleViewerInsights = createAction({
       : t("Enable viewer insights");
   },
   analyticsName: "Toggle viewer insights",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
   icon: <EyeIcon />,
   visible: ({ activeDocumentId, stores }) => {
     const can = stores.policies.abilities(activeDocumentId ?? "");
@@ -1139,52 +987,15 @@ export const toggleViewerInsights = createAction({
   },
 });
 
-export const leaveDocument = createAction({
-  name: ({ t }) => t("Leave document"),
-  analyticsName: "Leave document",
-  section: ActiveDocumentSection,
-  icon: <LogoutIcon />,
-  visible: ({ currentUserId, activeDocumentId, stores }) => {
-    const membership = stores.userMemberships.orderedData.find(
-      (m) => m.documentId === activeDocumentId && m.userId === currentUserId
-    );
-
-    return !!membership;
-  },
-  perform: async ({ t, location, currentUserId, activeDocumentId, stores }) => {
-    if (!activeDocumentId) {
-      return;
-    }
-
-    const document = stores.documents.get(activeDocumentId);
-
-    try {
-      if (document && location.pathname.startsWith(document.path)) {
-        history.push(homePath());
-      }
-
-      await stores.userMemberships.delete({
-        documentId: activeDocumentId,
-        userId: currentUserId,
-      } as UserMembership);
-
-      toast.success(t("You have left the shared document"));
-    } catch (err) {
-      toast.error(t("Could not leave document"));
-    }
-  },
-});
-
 export const rootDocumentActions = [
   openDocument,
   archiveDocument,
   createDocument,
-  createTemplateFromDocument,
+  createTemplate,
   deleteDocument,
   importDocument,
   downloadDocument,
   copyDocumentLink,
-  copyDocumentShareLink,
   copyDocumentAsMarkdown,
   starDocument,
   unstarDocument,
@@ -1193,9 +1004,7 @@ export const rootDocumentActions = [
   subscribeDocument,
   unsubscribeDocument,
   duplicateDocument,
-  leaveDocument,
-  moveTemplateToWorkspace,
-  moveDocumentToCollection,
+  moveDocument,
   openRandomDocument,
   permanentlyDeleteDocument,
   permanentlyDeleteDocumentsInTrash,

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",
@@ -225,9 +216,7 @@ export const logout = createAction({
   perform: async () => {
     await stores.auth.logout();
     if (env.OIDC_LOGOUT_URI) {
-      setTimeout(() => {
-        window.location.replace(env.OIDC_LOGOUT_URI);
-      }, 200);
+      window.location.replace(env.OIDC_LOGOUT_URI);
     }
   },
 });

app/actions/definitions/revisions.tsx

@@ -17,7 +17,7 @@ export const restoreRevision = createAction({
   analyticsName: "Restore revision",
   icon: <RestoreIcon />,
   section: RevisionSection,
-  visible: ({ activeDocumentId }) =>
+  visible: ({ activeDocumentId, stores }) =>
     !!activeDocumentId && stores.policies.abilities(activeDocumentId).update,
   perform: async ({ event, location, activeDocumentId }) => {
     event?.preventDefault();
@@ -47,7 +47,7 @@ export const copyLinkToRevision = createAction({
   analyticsName: "Copy link to revision",
   icon: <LinkIcon />,
   section: RevisionSection,
-  perform: async ({ activeDocumentId, t }) => {
+  perform: async ({ activeDocumentId, stores, t }) => {
     if (!activeDocumentId) {
       return;
     }

app/actions/definitions/users.tsx

@@ -18,7 +18,7 @@ export const inviteUser = createAction({
   icon: <PlusIcon />,
   keywords: "team member workspace user",
   section: UserSection,
-  visible: () =>
+  visible: ({ stores }) =>
     stores.policies.abilities(stores.auth.team?.id || "").inviteUser,
   perform: ({ t }) => {
     stores.dialogs.openModal({
@@ -40,7 +40,7 @@ export const updateUserRoleActionFactory = (user: User, role: UserRole) =>
           })}…`,
     analyticsName: "Update user role",
     section: UserSection,
-    visible: () => {
+    visible: ({ stores }) => {
       const can = stores.policies.abilities(user.id);
 
       return UserRoleHelper.isRoleHigher(role, user.role)
@@ -70,7 +70,7 @@ export const deleteUserActionFactory = (userId: string) =>
     keywords: "leave",
     dangerous: true,
     section: UserSection,
-    visible: () => stores.policies.abilities(userId).delete,
+    visible: ({ stores }) => stores.policies.abilities(userId).delete,
     perform: ({ t }) => {
       const user = stores.users.get(userId);
       if (!user) {

app/actions/index.ts

@@ -98,11 +98,6 @@ export function actionToKBar(
       )
     : [];
 
-  const sectionPriority =
-    typeof action.section !== "string" && "priority" in action.section
-      ? (action.section.priority as number) ?? 0
-      : 0;
-
   return [
     {
       id: action.id,
@@ -113,7 +108,6 @@ export function actionToKBar(
       keywords: action.keywords ?? "",
       shortcut: action.shortcut || [],
       icon: resolvedIcon,
-      priority: (1 + (action.priority ?? 0)) * (1 + (sectionPriority ?? 0)),
       perform: action.perform
         ? () => performAction(action, context)
         : undefined,

app/actions/sections.ts

@@ -2,30 +2,10 @@ import { ActionContext } from "~/types";
 
 export const CollectionSection = ({ t }: ActionContext) => t("Collection");
 
-export const ActiveCollectionSection = ({ t, stores }: ActionContext) => {
-  const activeCollection = stores.collections.active;
-  return `${t("Collection")} · ${activeCollection?.name}`;
-};
-
-ActiveCollectionSection.priority = 0.8;
-
 export const DeveloperSection = ({ t }: ActionContext) => t("Debug");
 
 export const DocumentSection = ({ t }: ActionContext) => t("Document");
 
-export const DocumentsSection = ({ t }: ActionContext) => t("Documents");
-
-export const ActiveDocumentSection = ({ t, stores }: ActionContext) => {
-  const activeDocument = stores.documents.active;
-  return `${t("Document")} · ${activeDocument?.titleWithDefault}`;
-};
-
-ActiveDocumentSection.priority = 0.9;
-
-export const RecentSection = ({ t }: ActionContext) => t("Recently viewed");
-
-RecentSection.priority = 1;
-
 export const RevisionSection = ({ t }: ActionContext) => t("Revision");
 
 export const SettingsSection = ({ t }: ActionContext) => t("Settings");
@@ -36,13 +16,9 @@ export const NotificationSection = ({ t }: ActionContext) => t("Notification");
 
 export const UserSection = ({ t }: ActionContext) => t("People");
 
-UserSection.priority = 0.5;
-
 export const TeamSection = ({ t }: ActionContext) => t("Workspace");
 
 export const RecentSearchesSection = ({ t }: ActionContext) =>
   t("Recent searches");
 
-RecentSearchesSection.priority = -0.1;
-
 export const TrashSection = ({ t }: ActionContext) => t("Trash");

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/Analytics.tsx

@@ -2,14 +2,13 @@
 /* global ga */
 import escape from "lodash/escape";
 import * as React from "react";
-import { IntegrationService, PublicEnv } from "@shared/types";
+import { IntegrationService } from "@shared/types";
 import env from "~/env";
 
 type Props = {
   children?: React.ReactNode;
 };
 
-// TODO: Refactor this component to allow injection from plugins
 const Analytics: React.FC = ({ children }: Props) => {
   // Google Analytics 3
   React.useEffect(() => {
@@ -44,16 +43,12 @@ const Analytics: React.FC = ({ children }: Props) => {
   React.useEffect(() => {
     const measurementIds = [];
 
+    if (env.analytics.service === IntegrationService.GoogleAnalytics) {
+      measurementIds.push(escape(env.analytics.settings?.measurementId));
+    }
     if (env.GOOGLE_ANALYTICS_ID?.startsWith("G-")) {
       measurementIds.push(env.GOOGLE_ANALYTICS_ID);
     }
-
-    (env.analytics as PublicEnv["analytics"]).forEach((integration) => {
-      if (integration.service === IntegrationService.GoogleAnalytics) {
-        measurementIds.push(escape(integration.settings?.measurementId));
-      }
-    });
-
     if (measurementIds.length === 0) {
       return;
     }
@@ -80,50 +75,6 @@ const Analytics: React.FC = ({ children }: Props) => {
     document.getElementsByTagName("head")[0]?.appendChild(script);
   }, []);
 
-  // Matomo
-  React.useEffect(() => {
-    (env.analytics as PublicEnv["analytics"]).forEach((integration) => {
-      if (integration.service !== IntegrationService.Matomo) {
-        return;
-      }
-
-      // @ts-expect-error - Matomo global variable
-      const _paq = (window._paq = window._paq || []);
-      _paq.push(["trackPageView"]);
-      _paq.push(["enableLinkTracking"]);
-      (function () {
-        const u = integration.settings?.instanceUrl;
-        _paq.push(["setTrackerUrl", u + "matomo.php"]);
-        _paq.push(["setSiteId", integration.settings?.measurementId]);
-        const d = document,
-          g = d.createElement("script"),
-          s = d.getElementsByTagName("script")[0];
-        g.type = "text/javascript";
-        g.async = true;
-        g.src = u + "matomo.js";
-        s.parentNode?.insertBefore(g, s);
-      })();
-    });
-  }, []);
-
-  // Umami
-  React.useEffect(() => {
-    (env.analytics as PublicEnv["analytics"]).forEach((integration) => {
-      if (integration.service !== IntegrationService.Umami) {
-        return;
-      }
-
-      const script = document.createElement("script");
-      script.defer = true;
-      script.src = `${integration.settings?.instanceUrl}${integration.settings?.scriptName}`;
-      script.setAttribute(
-        "data-website-id",
-        integration.settings?.measurementId
-      );
-      document.getElementsByTagName("head")[0]?.appendChild(script);
-    });
-  }, []);
-
   return <>{children}</>;
 };
 

app/components/ArrowKeyNavigation.tsx

@@ -1,50 +1,54 @@
-import { RovingTabIndexProvider } from "@getoutline/react-roving-tabindex";
 import { observer } from "mobx-react";
 import * as React from "react";
+import {
+  useCompositeState,
+  Composite,
+  CompositeStateReturn,
+} from "reakit/Composite";
 
 type Props = React.HTMLAttributes<HTMLDivElement> & {
-  children: () => React.ReactNode;
+  children: (composite: CompositeStateReturn) => React.ReactNode;
   onEscape?: (ev: React.KeyboardEvent<HTMLDivElement>) => void;
-  items: unknown[];
 };
 
 function ArrowKeyNavigation(
-  { children, onEscape, items, ...rest }: Props,
+  { children, onEscape, ...rest }: Props,
   ref: React.RefObject<HTMLDivElement>
 ) {
+  const composite = useCompositeState();
+
   const handleKeyDown = React.useCallback(
-    (ev: React.KeyboardEvent<HTMLDivElement>) => {
+    (ev) => {
       if (onEscape) {
         if (ev.nativeEvent.isComposing) {
           return;
         }
 
-        if (ev.key === "Escape" || ev.key === "Backspace") {
-          ev.preventDefault();
+        if (ev.key === "Escape") {
           onEscape(ev);
         }
 
         if (
           ev.key === "ArrowUp" &&
-          // If the first item is focused and the user presses ArrowUp
-          ev.currentTarget.firstElementChild === document.activeElement
+          composite.currentId === composite.items[0].id
         ) {
           onEscape(ev);
         }
       }
     },
-    [onEscape]
+    [composite.currentId, composite.items, onEscape]
   );
 
   return (
-    <RovingTabIndexProvider
-      options={{ focusOnClick: true, direction: "both" }}
-      items={items}
+    <Composite
+      {...rest}
+      {...composite}
+      onKeyDown={handleKeyDown}
+      role="menu"
+      ref={ref}
     >
-      <div {...rest} onKeyDown={handleKeyDown} ref={ref}>
-        {children()}
-      </div>
-    </RovingTabIndexProvider>
+      {children(composite)}
+    </Composite>
   );
 }
 

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

@@ -1,14 +1,17 @@
 import { AnimatePresence } from "framer-motion";
-import { observer } from "mobx-react";
+import { observer, useLocalStore } from "mobx-react";
 import * as React from "react";
 import { Switch, Route, useLocation, matchPath } from "react-router-dom";
 import { TeamPreference } from "@shared/types";
 import ErrorSuspended from "~/scenes/ErrorSuspended";
+import DocumentContext from "~/components/DocumentContext";
+import type { DocumentContextValue } from "~/components/DocumentContext";
 import Layout from "~/components/Layout";
 import RegisterKeyDown from "~/components/RegisterKeyDown";
 import Sidebar from "~/components/Sidebar";
 import SidebarRight from "~/components/Sidebar/Right";
 import SettingsSidebar from "~/components/Sidebar/Settings";
+import type { Editor as TEditor } from "~/editor";
 import useCurrentTeam from "~/hooks/useCurrentTeam";
 import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
@@ -22,7 +25,6 @@ import {
   matchDocumentSlug as slug,
   matchDocumentInsights,
 } from "~/utils/routeHelpers";
-import { DocumentContextProvider } from "./DocumentContext";
 import Fade from "./Fade";
 import { PortalContext } from "./Portal";
 
@@ -48,6 +50,12 @@ const AuthenticatedLayout: React.FC = ({ children }: Props) => {
   const can = usePolicy(ui.activeDocumentId);
   const canCollection = usePolicy(ui.activeCollectionId);
   const team = useCurrentTeam();
+  const documentContext = useLocalStore<DocumentContextValue>(() => ({
+    editor: null,
+    setEditor: (editor: TEditor) => {
+      documentContext.editor = editor;
+    },
+  }));
 
   const goToSearch = (ev: KeyboardEvent) => {
     if (!ev.metaKey && !ev.ctrlKey) {
@@ -94,7 +102,7 @@ const AuthenticatedLayout: React.FC = ({ children }: Props) => {
     !showHistory &&
     can.comment &&
     ui.activeDocumentId &&
-    ui.commentsExpanded &&
+    ui.commentsExpanded.includes(ui.activeDocumentId) &&
     team.getPreference(TeamPreference.Commenting);
 
   const sidebarRight = (
@@ -117,7 +125,7 @@ const AuthenticatedLayout: React.FC = ({ children }: Props) => {
   );
 
   return (
-    <DocumentContextProvider>
+    <DocumentContext.Provider value={documentContext}>
       <PortalContext.Provider value={layoutRef.current}>
         <Layout
           title={team.name}
@@ -134,7 +142,7 @@ const AuthenticatedLayout: React.FC = ({ children }: Props) => {
           </React.Suspense>
         </Layout>
       </PortalContext.Provider>
-    </DocumentContextProvider>
+    </DocumentContext.Provider>
   );
 };
 

app/components/Avatar/AvatarWithPresence.tsx

@@ -4,8 +4,8 @@ import { useTranslation } from "react-i18next";
 import styled, { css } from "styled-components";
 import { s } from "@shared/styles";
 import User from "~/models/User";
+import Avatar from "~/components/Avatar";
 import Tooltip from "~/components/Tooltip";
-import Avatar from "./Avatar";
 
 type Props = {
   user: User;

app/components/Avatar/GroupAvatar.tsx

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

app/components/Avatar/Initials.tsx

@@ -1,5 +1,4 @@
 import styled from "styled-components";
-import { s } from "@shared/styles";
 import Flex from "~/components/Flex";
 
 const Initials = styled(Flex)<{
@@ -12,7 +11,7 @@ const Initials = styled(Flex)<{
   border-radius: 50%;
   width: 100%;
   height: 100%;
-  color: ${s("white75")};
+  color: #fff;
   background-color: ${(props) => props.color};
   width: ${(props) => props.size}px;
   height: ${(props) => props.size}px;

app/components/Avatar/index.ts

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

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";
@@ -25,7 +25,7 @@ const RealButton = styled(ActionButton)<RealProps>`
   background: ${s("accent")};
   color: ${s("accentText")};
   box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px;
-  border-radius: 6px;
+  border-radius: 4px;
   font-size: 14px;
   font-weight: 500;
   height: 32px;
@@ -49,8 +49,8 @@ const RealButton = styled(ActionButton)<RealProps>`
   &:disabled {
     cursor: default;
     pointer-events: none;
-    color: ${(props) => transparentize(0.3, props.theme.accentText)};
-    background: ${(props) => transparentize(0.1, props.theme.accent)};
+    color: ${(props) => transparentize(0.5, props.theme.accentText)};
+    background: ${(props) => lighten(0.2, props.theme.accent)};
 
     svg {
       fill: ${(props) => props.theme.white50};
@@ -105,7 +105,7 @@ const RealButton = styled(ActionButton)<RealProps>`
         background: ${lighten(0.05, props.theme.danger)};
       }
 
-      &:focus-visible {
+      &.focus-visible {
         outline-color: ${darken(0.2, props.theme.danger)} !important;
       }
   `};
@@ -189,14 +189,10 @@ const Button = <T extends React.ElementType = "button">(
       <Inner hasIcon={hasIcon} hasText={hasText} disclosure={disclosure}>
         {hasIcon && ic}
         {hasText && <Label hasIcon={hasIcon}>{children || value}</Label>}
-        {disclosure && <StyledDisclosureIcon />}
+        {disclosure && <ExpandedIcon />}
       </Inner>
     </RealButton>
   );
 };
 
-const StyledDisclosureIcon = styled(DisclosureIcon)`
-  opacity: 0.8;
-`;
-
 export default React.forwardRef(Button);

app/components/Collaborators.tsx

@@ -1,13 +1,13 @@
 import filter from "lodash/filter";
 import isEqual from "lodash/isEqual";
-import orderBy from "lodash/orderBy";
+import sortBy from "lodash/sortBy";
 import uniq from "lodash/uniq";
 import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { usePopoverState, PopoverDisclosure } from "reakit/Popover";
 import Document from "~/models/Document";
-import { AvatarWithPresence } from "~/components/Avatar";
+import AvatarWithPresence from "~/components/Avatar/AvatarWithPresence";
 import DocumentViews from "~/components/DocumentViews";
 import Facepile from "~/components/Facepile";
 import NudeButton from "~/components/NudeButton";
@@ -16,18 +16,10 @@ import useCurrentUser from "~/hooks/useCurrentUser";
 import useStores from "~/hooks/useStores";
 
 type Props = {
-  /** The document to display live collaborators for */
   document: Document;
-  /** The maximum number of collaborators to display, defaults to 6 */
-  limit?: number;
 };
 
-/**
- * Displays a list of live collaborators for a document, including their avatars
- * and presence status.
- */
 function Collaborators(props: Props) {
-  const { limit = 6 } = props;
   const { t } = useTranslation();
   const user = useCurrentUser();
   const currentUserId = user?.id;
@@ -47,16 +39,15 @@ function Collaborators(props: Props) {
   // ensure currently present via websocket are always ordered first
   const collaborators = React.useMemo(
     () =>
-      orderBy(
+      sortBy(
         filter(
           users.orderedData,
-          (u) =>
-            (presentIds.includes(u.id) ||
-              document.collaboratorIds.includes(u.id)) &&
-            !u.isSuspended
+          (user) =>
+            (presentIds.includes(user.id) ||
+              document.collaboratorIds.includes(user.id)) &&
+            !user.isSuspended
         ),
-        [(u) => presentIds.includes(u.id), "id"],
-        ["asc", "asc"]
+        (user) => presentIds.includes(user.id)
       ),
     [document.collaboratorIds, users.orderedData, presentIds]
   );
@@ -81,15 +72,9 @@ function Collaborators(props: Props) {
   return (
     <>
       <PopoverDisclosure {...popover}>
-        {(popoverProps) => (
-          <NudeButton
-            width={Math.min(collaborators.length, limit) * 32}
-            height={32}
-            {...popoverProps}
-          >
+        {(props) => (
+          <NudeButton width={collaborators.length * 32} height={32} {...props}>
             <Facepile
-              limit={limit}
-              overflow={collaborators.length - limit}
               users={collaborators}
               renderAvatar={(collaborator) => {
                 const isPresent = presentIds.includes(collaborator.id);

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,20 +11,19 @@ import { CollectionValidation } from "@shared/validations";
 import Collection from "~/models/Collection";
 import Button from "~/components/Button";
 import Flex from "~/components/Flex";
+import IconPicker from "~/components/IconPicker";
 import Input from "~/components/Input";
 import InputSelectPermission from "~/components/InputSelectPermission";
 import Switch from "~/components/Switch";
 import Text from "~/components/Text";
 import useBoolean from "~/hooks/useBoolean";
 import useCurrentTeam from "~/hooks/useCurrentTeam";
-import { EmptySelectValue } from "~/types";
-
-const IconPicker = React.lazy(() => import("~/components/IconPicker"));
+import { Feature, FeatureFlags } from "~/utils/FeatureFlags";
 
 export interface FormData {
   name: string;
   icon: string;
-  color: string | null;
+  color: string;
   sharing: boolean;
   permission: CollectionPermission | undefined;
 }
@@ -39,16 +37,7 @@ export const CollectionForm = observer(function CollectionForm_({
 }) {
   const team = useCurrentTeam();
   const { t } = useTranslation();
-
   const [hasOpenedIconPicker, setHasOpenedIconPicker] = useBoolean(false);
-
-  const iconColor = React.useMemo(
-    () => collection?.color ?? randomElement(colorPalette),
-    [collection?.color]
-  );
-
-  const fallbackIcon = <Icon value="collection" color={iconColor} />;
-
   const {
     register,
     handleSubmit: formHandleSubmit,
@@ -64,7 +53,7 @@ export const CollectionForm = observer(function CollectionForm_({
       icon: collection?.icon,
       sharing: collection?.sharing ?? true,
       permission: collection?.permission,
-      color: iconColor,
+      color: collection?.color ?? randomElement(colorPalette),
     },
   });
 
@@ -81,20 +70,20 @@ export const CollectionForm = observer(function CollectionForm_({
           "collection"
       );
     }
-  }, [collection, hasOpenedIconPicker, setValue, values.name, values.icon]);
+  }, [values.name, collection]);
 
   React.useEffect(() => {
     setTimeout(() => setFocus("name", { shouldSelect: true }), 100);
   }, [setFocus]);
 
-  const handleIconChange = React.useCallback(
-    (icon: string, color: string | null) => {
+  const handleIconPickerChange = React.useCallback(
+    (color: string, icon: string) => {
       if (icon !== values.icon) {
         setFocus("name");
       }
 
-      setValue("icon", icon);
       setValue("color", color);
+      setValue("icon", icon);
     },
     [setFocus, setValue, values.icon]
   );
@@ -116,16 +105,13 @@ export const CollectionForm = observer(function CollectionForm_({
             maxLength: CollectionValidation.maxNameLength,
           })}
           prefix={
-            <React.Suspense fallback={fallbackIcon}>
-              <StyledIconPicker
-                icon={values.icon}
-                color={values.color ?? iconColor}
-                initial={values.name[0]}
-                popoverPosition="right"
-                onOpen={setHasOpenedIconPicker}
-                onChange={handleIconChange}
-              />
-            </React.Suspense>
+            <StyledIconPicker
+              onOpen={setHasOpenedIconPicker}
+              onChange={handleIconPickerChange}
+              initial={values.name[0]}
+              color={values.color}
+              icon={values.icon}
+            />
           }
           autoComplete="off"
           autoFocus
@@ -142,10 +128,8 @@ export const CollectionForm = observer(function CollectionForm_({
             <InputSelectPermission
               ref={field.ref}
               value={field.value}
-              onChange={(
-                value: CollectionPermission | typeof EmptySelectValue
-              ) => {
-                field.onChange(value === EmptySelectValue ? null : value);
+              onChange={(value: CollectionPermission) => {
+                field.onChange(value);
               }}
               note={t(
                 "The default access for workspace members, you can share with more users or groups later."
@@ -155,16 +139,18 @@ export const CollectionForm = observer(function CollectionForm_({
         />
       )}
 
-      {team.sharing && (
-        <Switch
-          id="sharing"
-          label={t("Public document sharing")}
-          note={t(
-            "Allow documents within this collection to be shared publicly on the internet."
-          )}
-          {...register("sharing")}
-        />
-      )}
+      {team.sharing &&
+        (!collection ||
+          FeatureFlags.isEnabled(Feature.newCollectionSharing)) && (
+          <Switch
+            id="sharing"
+            label={t("Public document sharing")}
+            note={t(
+              "Allow documents within this collection to be shared publicly on the internet."
+            )}
+            {...register("sharing")}
+          />
+        )}
 
       <Flex justify="flex-end">
         <Button

app/components/Collection/CollectionNew.tsx

@@ -1,7 +1,7 @@
-import { runInAction } from "mobx";
 import { observer } from "mobx-react";
 import * as React from "react";
 import { toast } from "sonner";
+import Collection from "~/models/Collection";
 import useStores from "~/hooks/useStores";
 import history from "~/utils/history";
 import { CollectionForm, FormData } from "./CollectionForm";
@@ -17,11 +17,8 @@ export const CollectionNew = observer(function CollectionNew_({
   const handleSubmit = React.useCallback(
     async (data: FormData) => {
       try {
-        const collection = await collections.save(data);
-        // Avoid flash of loading state for the new collection, we know it's empty.
-        runInAction(() => {
-          collection.documents = [];
-        });
+        const collection = new Collection(data, collections);
+        await collection.save();
         onSubmit?.();
         history.push(collection.path);
       } catch (error) {

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

@@ -201,6 +201,7 @@ const Input = styled.div`
   margin: -8px;
   padding: 8px;
   border-radius: 8px;
+  transition: ${s("backgroundTransition")};
 
   &:after {
     content: "";
@@ -225,7 +226,7 @@ const Input = styled.div`
   }
 
   &[data-editing="true"] {
-    background: ${s("backgroundSecondary")};
+    background: ${s("secondaryBackground")};
   }
 
   .block-menu-trigger,

app/components/CommandBar.tsx

@@ -6,27 +6,20 @@ import { Portal } from "react-portal";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import { depths, s } from "@shared/styles";
+import CommandBarResults from "~/components/CommandBarResults";
 import SearchActions from "~/components/SearchActions";
 import rootActions from "~/actions/root";
 import useCommandBarActions from "~/hooks/useCommandBarActions";
-import CommandBarResults from "./CommandBarResults";
-import useRecentDocumentActions from "./useRecentDocumentActions";
-import useSettingsAction from "./useSettingsAction";
-import useTemplatesAction from "./useTemplatesAction";
+import useSettingsActions from "~/hooks/useSettingsActions";
+import useTemplateActions from "~/hooks/useTemplateActions";
 
 function CommandBar() {
   const { t } = useTranslation();
-  const recentDocumentActions = useRecentDocumentActions();
-  const settingsAction = useSettingsAction();
-  const templatesAction = useTemplatesAction();
+  const settingsActions = useSettingsActions();
+  const templateActions = useTemplateActions();
   const commandBarActions = React.useMemo(
-    () => [
-      ...recentDocumentActions,
-      ...rootActions,
-      templatesAction,
-      settingsAction,
-    ],
-    [recentDocumentActions, settingsAction, templatesAction]
+    () => [...rootActions, templateActions, settingsActions],
+    [settingsActions, templateActions]
   );
 
   useCommandBarActions(commandBarActions);
@@ -37,9 +30,7 @@ function CommandBar() {
         <Positioner>
           <Animator>
             <SearchActions />
-            <SearchInput
-              defaultPlaceholder={`${t("Type a command or search")}…`}
-            />
+            <SearchInput defaultPlaceholder={t("Type a command or search")} />
             <CommandBarResults />
           </Animator>
         </Positioner>
@@ -69,19 +60,13 @@ const Positioner = styled(KBarPositioner)`
 `;
 
 const SearchInput = styled(KBarSearch)`
-  position: relative;
-  padding: 16px 12px;
-  margin: 0 8px;
-  width: calc(100% - 16px);
+  padding: 16px 20px;
+  width: 100%;
   outline: none;
   border: none;
   background: ${s("menuBackground")};
   color: ${s("text")};
 
-  &:not(:last-child) {
-    border-bottom: 1px solid ${s("inputBorder")};
-  }
-
   &:disabled,
   &::placeholder {
     color: ${s("placeholder")};

app/components/CommandBar/index.ts

@@ -1,3 +0,0 @@
-import CommandBar from "./CommandBar";
-
-export default CommandBar;

app/components/CommandBar/useRecentDocumentActions.tsx

@@ -1,35 +0,0 @@
-import { DocumentIcon } from "outline-icons";
-import * as React from "react";
-import Icon from "@shared/components/Icon";
-import { createAction } from "~/actions";
-import { RecentSection } from "~/actions/sections";
-import useStores from "~/hooks/useStores";
-import history from "~/utils/history";
-import { documentPath } from "~/utils/routeHelpers";
-
-const useRecentDocumentActions = (count = 6) => {
-  const { documents, ui } = useStores();
-
-  return React.useMemo(
-    () =>
-      documents.recentlyViewed
-        .filter((document) => document.id !== ui.activeDocumentId)
-        .slice(0, count)
-        .map((item) =>
-          createAction({
-            name: item.titleWithDefault,
-            analyticsName: "Recently viewed document",
-            section: RecentSection,
-            icon: item.icon ? (
-              <Icon value={item.icon} color={item.color ?? undefined} />
-            ) : (
-              <DocumentIcon />
-            ),
-            perform: () => history.push(documentPath(item)),
-          })
-        ),
-    [count, ui.activeDocumentId, documents.recentlyViewed]
-  );
-};
-
-export default useRecentDocumentActions;

app/components/CommandBar/useTemplatesAction.tsx

@@ -1,89 +0,0 @@
-import { NewDocumentIcon, ShapesIcon } from "outline-icons";
-import * as React from "react";
-import Icon from "@shared/components/Icon";
-import { createAction } from "~/actions";
-import {
-  ActiveCollectionSection,
-  DocumentSection,
-  TeamSection,
-} from "~/actions/sections";
-import useStores from "~/hooks/useStores";
-import history from "~/utils/history";
-import { newDocumentPath } from "~/utils/routeHelpers";
-
-const useTemplatesAction = () => {
-  const { documents } = useStores();
-
-  React.useEffect(() => {
-    void documents.fetchAllTemplates();
-  }, [documents]);
-
-  const actions = React.useMemo(
-    () =>
-      documents.templatesAlphabetical.map((template) =>
-        createAction({
-          name: template.titleWithDefault,
-          analyticsName: "New document",
-          section: template.isWorkspaceTemplate
-            ? TeamSection
-            : ActiveCollectionSection,
-          icon: template.icon ? (
-            <Icon value={template.icon} color={template.color ?? undefined} />
-          ) : (
-            <NewDocumentIcon />
-          ),
-          keywords: "create",
-          visible: ({ currentTeamId, activeCollectionId, stores }) => {
-            if (activeCollectionId) {
-              return (
-                stores.policies.abilities(activeCollectionId).createDocument &&
-                (template.collectionId === activeCollectionId ||
-                  template.isWorkspaceTemplate)
-              );
-            }
-            return (
-              !!currentTeamId &&
-              stores.policies.abilities(currentTeamId).createDocument &&
-              template.isWorkspaceTemplate
-            );
-          },
-          perform: ({ activeCollectionId, sidebarContext }) =>
-            history.push(
-              newDocumentPath(template.collectionId ?? activeCollectionId, {
-                templateId: template.id,
-              }),
-              {
-                sidebarContext,
-              }
-            ),
-        })
-      ),
-    [documents.templatesAlphabetical]
-  );
-
-  const newFromTemplate = React.useMemo(
-    () =>
-      createAction({
-        id: "templates",
-        name: ({ t }) => t("New from template"),
-        placeholder: ({ t }) => t("Choose a template"),
-        section: DocumentSection,
-        icon: <ShapesIcon />,
-        visible: ({ currentTeamId, activeCollectionId, stores }) => {
-          if (activeCollectionId) {
-            return stores.policies.abilities(activeCollectionId).createDocument;
-          }
-          return (
-            !!currentTeamId &&
-            stores.policies.abilities(currentTeamId).createDocument
-          );
-        },
-        children: () => actions,
-      }),
-    [actions]
-  );
-
-  return newFromTemplate;
-};
-
-export default useTemplatesAction;

app/components/CommandBarItem.tsx

@@ -5,7 +5,7 @@ import styled, { css, useTheme } from "styled-components";
 import { s, ellipsis } from "@shared/styles";
 import Flex from "~/components/Flex";
 import Key from "~/components/Key";
-import Text from "~/components/Text";
+import Text from "./Text";
 
 type Props = {
   action: ActionImpl;
@@ -69,8 +69,8 @@ function CommandBarItem(
               ) : (
                 ""
               )}
-              {sc.split("+").map((key) => (
-                <Key key={key}>{key}</Key>
+              {sc.split("+").map((s) => (
+                <Key key={s}>{s}</Key>
               ))}
             </React.Fragment>
           ))}

app/components/CommandBarResults.tsx

@@ -1,16 +1,12 @@
 import { useMatches, KBarResults } from "kbar";
 import * as React from "react";
 import styled from "styled-components";
-import Text from "~/components/Text";
-import CommandBarItem from "./CommandBarItem";
+import { s } from "@shared/styles";
+import CommandBarItem from "~/components/CommandBarItem";
 
 export default function CommandBarResults() {
   const { results, rootActionId } = useMatches();
 
-  if (results.length === 0) {
-    return null;
-  }
-
   return (
     <Container>
       <KBarResults
@@ -18,9 +14,7 @@ export default function CommandBarResults() {
         maxHeight={400}
         onRender={({ item, active }) =>
           typeof item === "string" ? (
-            <Header type="tertiary" size="xsmall" ellipsis>
-              {item}
-            </Header>
+            <Header>{item}</Header>
           ) : (
             <CommandBarItem
               action={item}
@@ -41,10 +35,11 @@ const Container = styled.div`
   }
 `;
 
-const Header = styled(Text).attrs({ as: "h3" })`
-  letter-spacing: 0.03em;
+const Header = styled.h3`
+  font-size: 13px;
+  letter-spacing: 0.04em;
   margin: 0;
   padding: 16px 0 4px 20px;
+  color: ${s("textTertiary")};
   height: 36px;
-  cursor: default;
 `;

app/components/ConfirmMoveDialog.tsx

@@ -1,64 +0,0 @@
-import { observer } from "mobx-react";
-import * as React from "react";
-import { Trans, useTranslation } from "react-i18next";
-import { CollectionPermission, NavigationNode } from "@shared/types";
-import type Collection from "~/models/Collection";
-import ConfirmationDialog from "~/components/ConfirmationDialog";
-import useStores from "~/hooks/useStores";
-
-type Props = {
-  /** The navigation node to move, must represent a document. */
-  item: NavigationNode;
-  /** The collection to move the document to. */
-  collection: Collection;
-  /** The parent document to move the document under. */
-  parentDocumentId?: string | null;
-  /** The index to move the document to. */
-  index?: number | null;
-};
-
-function ConfirmMoveDialog({ collection, item, ...rest }: Props) {
-  const { documents, dialogs, collections } = useStores();
-  const { t } = useTranslation();
-  const prevCollection = collections.get(item.collectionId!);
-  const accessMapping: Record<Partial<CollectionPermission> | "null", string> =
-    {
-      [CollectionPermission.Admin]: t("manage access"),
-      [CollectionPermission.ReadWrite]: t("view and edit access"),
-      [CollectionPermission.Read]: t("view only access"),
-      null: t("no access"),
-    };
-
-  const handleSubmit = async () => {
-    await documents.move({
-      documentId: item.id,
-      collectionId: collection.id,
-      ...rest,
-    });
-    dialogs.closeAllModals();
-  };
-
-  return (
-    <ConfirmationDialog
-      onSubmit={handleSubmit}
-      submitText={t("Move document")}
-      savingText={`${t("Moving")}…`}
-    >
-      <Trans
-        defaults="Moving the document <em>{{ title }}</em> to the {{ newCollectionName }} collection will change permission for all workspace members from <em>{{ prevPermission }}</em> to <em>{{ newPermission }}</em>."
-        values={{
-          title: item.title,
-          prevCollectionName: prevCollection?.name,
-          newCollectionName: collection.name,
-          prevPermission: accessMapping[prevCollection?.permission || "null"],
-          newPermission: accessMapping[collection.permission || "null"],
-        }}
-        components={{
-          em: <strong />,
-        }}
-      />
-    </ConfirmationDialog>
-  );
-}
-
-export default observer(ConfirmMoveDialog);

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

@@ -2,7 +2,7 @@ import { observer } from "mobx-react";
 import { DisconnectedIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
-import styled from "styled-components";
+import styled, { useTheme } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import Fade from "~/components/Fade";
 import NudeButton from "~/components/NudeButton";
@@ -11,6 +11,7 @@ import useStores from "~/hooks/useStores";
 
 function ConnectionStatus() {
   const { ui } = useStores();
+  const theme = useTheme();
   const { t } = useTranslation();
 
   const codeToMessage = {
@@ -35,7 +36,7 @@ function ConnectionStatus() {
   };
 
   const message = ui.multiplayerErrorCode
-    ? codeToMessage[ui.multiplayerErrorCode as keyof typeof codeToMessage]
+    ? codeToMessage[ui.multiplayerErrorCode]
     : undefined;
 
   return ui.multiplayerStatus === "connecting" ||
@@ -60,7 +61,7 @@ function ConnectionStatus() {
     >
       <Button>
         <Fade>
-          <DisconnectedIcon />
+          <DisconnectedIcon color={theme.sidebarText} />
         </Fade>
       </Button>
     </Tooltip>
@@ -71,7 +72,7 @@ const Button = styled(NudeButton)`
   display: none;
   position: fixed;
   bottom: 0;
-  margin: 20px;
+  margin: 24px;
   transform: translateX(-32px);
 
   ${breakpoint("tablet")`

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

@@ -1,18 +1,16 @@
 import { LocationDescriptor } from "history";
 import { CheckmarkIcon } from "outline-icons";
-import { ellipsis, transparentize } from "polished";
+import { ellipsis } from "polished";
 import * as React from "react";
 import { mergeRefs } from "react-merge-refs";
 import { MenuItem as BaseMenuItem } from "reakit/Menu";
 import styled, { css } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
-import { s } from "@shared/styles";
-import Text from "../Text";
 import MenuIconWrapper from "./MenuIconWrapper";
 
 type Props = {
   id?: string;
-  onClick?: (event: React.MouseEvent) => void | Promise<void>;
+  onClick?: (event: React.SyntheticEvent) => void | Promise<void>;
   active?: boolean;
   selected?: boolean;
   disabled?: boolean;
@@ -23,7 +21,7 @@ type Props = {
   as?: string | React.ComponentType<any>;
   hide?: () => void;
   level?: number;
-  icon?: React.ReactNode;
+  icon?: React.ReactElement;
   children?: React.ReactNode;
   ref?: React.LegacyRef<HTMLButtonElement> | undefined;
 };
@@ -44,40 +42,39 @@ const MenuItem = (
 ) => {
   const content = React.useCallback(
     (props) => {
-      // Preventing default mousedown otherwise menu items do not work in Firefox,
-      // which triggers the hideOnClickOutside handler first via mousedown – hiding
-      // and un-rendering the menu contents.
-      const preventDefault = (ev: React.MouseEvent) => {
-        ev.preventDefault();
-        ev.stopPropagation();
-      };
-
       const handleClick = async (ev: React.MouseEvent) => {
         hide?.();
 
         if (onClick) {
-          preventDefault(ev);
+          ev.preventDefault();
           await onClick(ev);
         }
       };
 
+      // Preventing default mousedown otherwise menu items do not work in Firefox,
+      // which triggers the hideOnClickOutside handler first via mousedown – hiding
+      // and un-rendering the menu contents.
+      const handleMouseDown = (ev: React.MouseEvent) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+      };
+
       return (
         <MenuAnchor
           {...props}
           $active={active}
           as={onClick ? "button" : as}
           onClick={handleClick}
-          onPointerDown={preventDefault}
-          onMouseDown={preventDefault}
+          onMouseDown={handleMouseDown}
           ref={mergeRefs([
             ref,
             props.ref as React.RefObject<HTMLAnchorElement>,
           ])}
         >
           {selected !== undefined && (
-            <SelectedWrapper aria-hidden>
+            <MenuIconWrapper aria-hidden>
               {selected ? <CheckmarkIcon /> : <Spacer />}
-            </SelectedWrapper>
+            </MenuIconWrapper>
           )}
           {icon && <MenuIconWrapper aria-hidden>{icon}</MenuIconWrapper>}
           <Title>{children}</Title>
@@ -109,8 +106,6 @@ const Title = styled.div`
   ${ellipsis()}
   flex-grow: 1;
   display: flex;
-  align-items: center;
-  gap: 8px;
 `;
 
 type MenuAnchorProps = {
@@ -155,7 +150,7 @@ export const MenuAnchorCSS = css<MenuAnchorProps>`
   @media (hover: hover) {
     &:hover,
     &:focus,
-    &:focus-visible {
+    &.focus-visible {
       color: ${props.theme.accentText};
       background: ${props.dangerous ? props.theme.danger : props.theme.accent};
       box-shadow: none;
@@ -165,10 +160,6 @@ export const MenuAnchorCSS = css<MenuAnchorProps>`
         color: ${props.theme.accentText};
         fill: ${props.theme.accentText};
       }
-
-      ${Text} {
-        color: ${transparentize(0.5, props.theme.accentText)};
-      }
     }
   }
   `}
@@ -199,13 +190,4 @@ export const MenuAnchor = styled.a`
   ${MenuAnchorCSS}
 `;
 
-const SelectedWrapper = styled.span`
-  width: 24px;
-  height: 24px;
-  margin-right: 4px;
-  margin-left: -8px;
-  flex-shrink: 0;
-  color: ${s("textSecondary")};
-`;
-
 export default React.forwardRef<HTMLAnchorElement, Props>(MenuItem);

app/components/ContextMenu/Template.tsx

@@ -30,7 +30,6 @@ type Props = Omit<MenuStateReturn, "items"> & {
   actions?: (Action | MenuSeparator | MenuHeading)[];
   context?: Partial<ActionContext>;
   items?: TMenuItem[];
-  showIcons?: boolean;
 };
 
 const Disclosure = styled(ExpandedIcon)`
@@ -99,7 +98,7 @@ export function filterTemplateItems(items: TMenuItem[]): TMenuItem[] {
     });
 }
 
-function Template({ items, actions, context, showIcons, ...menu }: Props) {
+function Template({ items, actions, context, ...menu }: Props) {
   const ctx = useActionContext({
     isContextMenu: true,
   });
@@ -125,8 +124,7 @@ function Template({ items, actions, context, showIcons, ...menu }: Props) {
         if (
           iconIsPresentInAnyMenuItem &&
           item.type !== "separator" &&
-          item.type !== "heading" &&
-          showIcons !== false
+          item.type !== "heading"
         ) {
           item.icon = item.icon || <MenuIconWrapper aria-hidden />;
         }
@@ -140,7 +138,7 @@ function Template({ items, actions, context, showIcons, ...menu }: Props) {
               key={index}
               disabled={item.disabled}
               selected={item.selected}
-              icon={showIcons !== false ? item.icon : undefined}
+              icon={item.icon}
               {...menu}
             >
               {item.title}
@@ -158,7 +156,7 @@ function Template({ items, actions, context, showIcons, ...menu }: Props) {
               selected={item.selected}
               level={item.level}
               target={item.href.startsWith("#") ? undefined : "_blank"}
-              icon={showIcons !== false ? item.icon : undefined}
+              icon={item.icon}
               {...menu}
             >
               {item.title}
@@ -176,7 +174,7 @@ function Template({ items, actions, context, showIcons, ...menu }: Props) {
               selected={item.selected}
               dangerous={item.dangerous}
               key={index}
-              icon={showIcons !== false ? item.icon : undefined}
+              icon={item.icon}
               {...menu}
             >
               {item.title}
@@ -192,12 +190,7 @@ function Template({ items, actions, context, showIcons, ...menu }: Props) {
               id={`${item.title}-${index}`}
               templateItems={item.items}
               parentMenuState={menu}
-              title={
-                <Title
-                  title={item.title}
-                  icon={showIcons !== false ? item.icon : undefined}
-                />
-              }
+              title={<Title title={item.title} icon={item.icon} />}
               {...menu}
             />
           );

app/components/ContextMenu/index.tsx

@@ -6,7 +6,6 @@ import styled, { DefaultTheme } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import { depths, s } from "@shared/styles";
 import Scrollable from "~/components/Scrollable";
-import useEventListener from "~/hooks/useEventListener";
 import useMenuContext from "~/hooks/useMenuContext";
 import useMenuHeight from "~/hooks/useMenuHeight";
 import useMobile from "~/hooks/useMobile";
@@ -51,8 +50,6 @@ type Props = MenuStateReturn & {
   onClick?: (ev: React.MouseEvent) => void;
   /** The maximum width of the context menu. */
   maxWidth?: number;
-  /** The minimum height of the context menu. */
-  minHeight?: number;
   children?: React.ReactNode;
 };
 
@@ -137,7 +134,6 @@ type InnerContextMenuProps = MenuStateReturn & {
   menuProps: { style?: React.CSSProperties; placement: string };
   children: React.ReactNode;
   maxWidth?: number;
-  minHeight?: number;
 };
 
 /**
@@ -175,32 +171,6 @@ const InnerContextMenu = (props: InnerContextMenuProps) => {
     };
   }, [props.isSubMenu, props.visible]);
 
-  useEventListener(
-    "animationstart",
-    (event) => {
-      if (event.target instanceof HTMLElement) {
-        const parent = event.target.parentElement;
-        if (parent) {
-          parent.style.pointerEvents = "none";
-        }
-      }
-    },
-    backgroundRef.current
-  );
-
-  useEventListener(
-    "animationend",
-    (event) => {
-      if (event.target instanceof HTMLElement) {
-        const parent = event.target.parentElement;
-        if (parent) {
-          parent.style.pointerEvents = "auto";
-        }
-      }
-    },
-    backgroundRef.current
-  );
-
   const style =
     topAnchor && !isMobile
       ? {
@@ -223,7 +193,6 @@ const InnerContextMenu = (props: InnerContextMenuProps) => {
         <Background
           dir="auto"
           maxWidth={props.maxWidth}
-          minHeight={props.minHeight}
           topAnchor={topAnchor}
           rightAnchor={rightAnchor}
           ref={backgroundRef}
@@ -254,14 +223,10 @@ export const Position = styled.div`
   position: absolute;
   z-index: ${depths.menu};
 
-  // Note: pointer events are re-enabled after the animation ends, see event listeners above
-  pointer-events: none;
-
-  &:focus-visible {
+  &.focus-visible {
     transition-delay: 250ms;
     transition-property: outline-width;
     transition-duration: 0;
-    outline: none;
   }
 
   /*
@@ -282,7 +247,6 @@ type BackgroundProps = {
   topAnchor?: boolean;
   rightAnchor?: boolean;
   maxWidth?: number;
-  minHeight?: number;
   theme: DefaultTheme;
 };
 
@@ -294,8 +258,9 @@ export const Background = styled(Scrollable)<BackgroundProps>`
   border-radius: 6px;
   padding: 6px;
   min-width: 180px;
-  min-height: ${(props) => props.minHeight || 44}px;
+  min-height: 44px;
   max-height: 75vh;
+  pointer-events: all;
   font-weight: normal;
 
   @media print {

app/components/DefaultCollectionInputSelect.tsx

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

app/components/Dialogs.tsx

@@ -25,7 +25,6 @@ function Dialogs() {
           fullscreen={modal.fullscreen ?? false}
           onRequestClose={() => dialogs.closeModal(id)}
           title={modal.title}
-          style={modal.style}
         >
           {modal.content}
         </Modal>

app/components/DocumentBreadcrumb.tsx

@@ -3,16 +3,19 @@ import { ArchiveIcon, GoToIcon, ShapesIcon, TrashIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
-import Icon from "@shared/components/Icon";
 import type { NavigationNode } from "@shared/types";
 import Document from "~/models/Document";
 import Breadcrumb from "~/components/Breadcrumb";
 import CollectionIcon from "~/components/Icons/CollectionIcon";
-import { useLocationSidebarContext } from "~/hooks/useLocationSidebarContext";
-import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
 import { MenuInternalLink } from "~/types";
-import { archivePath, settingsPath, trashPath } from "~/utils/routeHelpers";
+import {
+  archivePath,
+  collectionPath,
+  settingsPath,
+  trashPath,
+} from "~/utils/routeHelpers";
+import EmojiIcon from "./Icons/EmojiIcon";
 
 type Props = {
   children?: React.ReactNode;
@@ -53,34 +56,30 @@ function useCategory(document: Document): MenuInternalLink | null {
   return null;
 }
 
-function DocumentBreadcrumb(
-  { document, children, onlyText }: Props,
-  ref: React.RefObject<HTMLDivElement> | null
-) {
+const DocumentBreadcrumb: React.FC<Props> = ({
+  document,
+  children,
+  onlyText,
+}: Props) => {
   const { collections } = useStores();
   const { t } = useTranslation();
   const category = useCategory(document);
-  const sidebarContext = useLocationSidebarContext();
   const collection = document.collectionId
     ? collections.get(document.collectionId)
     : undefined;
-  const can = usePolicy(collection);
 
   React.useEffect(() => {
-    void document.loadRelations({ withoutPolicies: true });
+    void document.loadRelations();
   }, [document]);
 
   let collectionNode: MenuInternalLink | undefined;
 
-  if (collection && can.readDocument) {
+  if (collection) {
     collectionNode = {
       type: "route",
       title: collection.name,
       icon: <CollectionIcon collection={collection} expanded />,
-      to: {
-        pathname: collection.path,
-        state: { sidebarContext },
-      },
+      to: collectionPath(collection.path),
     };
   } else if (document.isCollectionDeleted) {
     collectionNode = {
@@ -107,21 +106,18 @@ function DocumentBreadcrumb(
     path.slice(0, -1).forEach((node: NavigationNode) => {
       output.push({
         type: "route",
-        title: node.icon ? (
+        title: node.emoji ? (
           <>
-            <StyledIcon value={node.icon} color={node.color} /> {node.title}
+            <EmojiIcon emoji={node.emoji} /> {node.title}
           </>
         ) : (
           node.title
         ),
-        to: {
-          pathname: node.url,
-          state: { sidebarContext },
-        },
+        to: node.url,
       });
     });
     return output;
-  }, [path, category, sidebarContext, collectionNode]);
+  }, [path, category, collectionNode]);
 
   if (!collections.isLoaded) {
     return null;
@@ -142,15 +138,11 @@ function DocumentBreadcrumb(
   }
 
   return (
-    <Breadcrumb items={items} ref={ref} highlightFirstItem>
+    <Breadcrumb items={items} highlightFirstItem>
       {children}
     </Breadcrumb>
   );
-}
-
-const StyledIcon = styled(Icon)`
-  margin-right: 2px;
-`;
+};
 
 const SmallSlash = styled(GoToIcon)`
   width: 12px;
@@ -162,4 +154,4 @@ const SmallSlash = styled(GoToIcon)`
   opacity: 0.5;
 `;
 
-export default observer(React.forwardRef(DocumentBreadcrumb));
+export default observer(DocumentBreadcrumb);

app/components/DocumentCard.tsx

@@ -1,26 +1,23 @@
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
-import { subDays } from "date-fns";
 import { m } from "framer-motion";
 import { observer } from "mobx-react";
-import { CloseIcon, DocumentIcon, ClockIcon, EyeIcon } from "outline-icons";
+import { CloseIcon, DocumentIcon, ClockIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import styled, { useTheme } from "styled-components";
-import Icon from "@shared/components/Icon";
 import Squircle from "@shared/components/Squircle";
-import { s, hover, ellipsis } from "@shared/styles";
-import { IconType } from "@shared/types";
-import { determineIconType } from "@shared/utils/icon";
+import { s, ellipsis } from "@shared/styles";
 import Document from "~/models/Document";
 import Pin from "~/models/Pin";
 import Flex from "~/components/Flex";
 import NudeButton from "~/components/NudeButton";
 import Time from "~/components/Time";
 import useStores from "~/hooks/useStores";
-import { useTextStats } from "~/hooks/useTextStats";
+import { hover } from "~/styles";
 import CollectionIcon from "./Icons/CollectionIcon";
+import EmojiIcon from "./Icons/EmojiIcon";
 import Text from "./Text";
 import Tooltip from "./Tooltip";
 
@@ -40,7 +37,6 @@ function DocumentCard(props: Props) {
   const { collections } = useStores();
   const theme = useTheme();
   const { document, pin, canUpdatePin, isDraggable } = props;
-  const pinnedToHome = React.useRef(!pin?.collectionId).current;
   const collection = document.collectionId
     ? collections.get(document.collectionId)
     : undefined;
@@ -56,8 +52,6 @@ function DocumentCard(props: Props) {
     disabled: !isDraggable || !canUpdatePin,
   });
 
-  const hasEmojiInTitle = determineIconType(document.icon) === IconType.Emoji;
-
   const style = {
     transform: CSS.Transform.toString(transform),
     transition,
@@ -72,10 +66,6 @@ function DocumentCard(props: Props) {
     [pin]
   );
 
-  // If the document was updated within the last 7 days, show a timestamp instead of reading time
-  const isRecentlyUpdated =
-    new Date(document.updatedAt) > subDays(new Date(), 7);
-
   return (
     <Reorderable
       ref={setNodeRef}
@@ -119,22 +109,16 @@ function DocumentCard(props: Props) {
               <path d="M19.5 19.5H6C2.96243 19.5 0.5 17.0376 0.5 14V0.5H0.792893L19.5 19.2071V19.5Z" />
             </Fold>
 
-            {document.icon ? (
-              <DocumentSquircle
-                icon={document.icon}
-                color={document.color ?? undefined}
-              />
+            {document.emoji ? (
+              <Squircle color={theme.slateLight}>
+                <EmojiIcon emoji={document.emoji} size={24} />
+              </Squircle>
             ) : (
-              <Squircle
-                color={
-                  collection?.color ??
-                  (pinnedToHome ? theme.slateLight : theme.slateDark)
-                }
-              >
+              <Squircle color={collection?.color}>
                 {collection?.icon &&
                 collection?.icon !== "letter" &&
                 collection?.icon !== "collection" &&
-                pinnedToHome ? (
+                !pin?.collectionId ? (
                   <CollectionIcon collection={collection} color="white" />
                 ) : (
                   <DocumentIcon color="white" />
@@ -143,19 +127,18 @@ function DocumentCard(props: Props) {
             )}
             <div>
               <Heading dir={document.dir}>
-                {hasEmojiInTitle
-                  ? document.titleWithDefault.replace(document.icon!, "")
+                {document.emoji
+                  ? document.titleWithDefault.replace(document.emoji, "")
                   : document.titleWithDefault}
               </Heading>
               <DocumentMeta size="xsmall">
-                {isRecentlyUpdated ? (
-                  <>
-                    <Clock size={18} />
-                    <Time dateTime={document.updatedAt} addSuffix shorten />
-                  </>
-                ) : (
-                  <ReadingTime document={document} />
-                )}
+                <Clock size={18} />
+                <Time
+                  dateTime={document.updatedAt}
+                  tooltipDelay={500}
+                  addSuffix
+                  shorten
+                />
               </DocumentMeta>
             </div>
           </Content>
@@ -176,39 +159,6 @@ function DocumentCard(props: Props) {
   );
 }
 
-const ReadingTime = ({ document }: { document: Document }) => {
-  const { t } = useTranslation();
-  const markdown = React.useMemo(() => document.toMarkdown(), [document]);
-  const stats = useTextStats(markdown);
-
-  return (
-    <>
-      <EyeIcon size={18} />
-      {t(`{{ minutes }}m read`, {
-        minutes: stats.total.readingTime,
-      })}
-    </>
-  );
-};
-
-const DocumentSquircle = ({
-  icon,
-  color,
-}: {
-  icon: string;
-  color?: string;
-}) => {
-  const theme = useTheme();
-  const iconType = determineIconType(icon)!;
-  const squircleColor = iconType === IconType.SVG ? color : theme.slateLight;
-
-  return (
-    <Squircle color={squircleColor}>
-      <Icon value={icon} color={theme.white} forceColor />
-    </Squircle>
-  );
-};
-
 const Clock = styled(ClockIcon)`
   flex-shrink: 0;
 `;

app/components/DocumentContext.ts

@@ -0,0 +1,37 @@
+import * as React from "react";
+import { Editor } from "~/editor";
+import useIdle from "~/hooks/useIdle";
+
+export type DocumentContextValue = {
+  /** The current editor instance for this document. */
+  editor: Editor | null;
+  /** Set the current editor instance for this document. */
+  setEditor: (editor: Editor) => void;
+};
+
+const DocumentContext = React.createContext<DocumentContextValue>({
+  editor: null,
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  setEditor() {},
+});
+
+export const useDocumentContext = () => React.useContext(DocumentContext);
+
+const activityEvents = [
+  "click",
+  "mousemove",
+  "DOMMouseScroll",
+  "mousewheel",
+  "mousedown",
+  "touchstart",
+  "touchmove",
+  "focus",
+];
+
+export const useEditingFocus = () => {
+  const { editor } = useDocumentContext();
+  const isIdle = useIdle(3000, activityEvents);
+  return isIdle && !!editor?.view.hasFocus();
+};
+
+export default DocumentContext;

app/components/DocumentContext.tsx

@@ -1,84 +0,0 @@
-import { action, computed, observable } from "mobx";
-import React, { PropsWithChildren } from "react";
-import { Heading } from "@shared/utils/ProsemirrorHelper";
-import Document from "~/models/Document";
-import { Editor } from "~/editor";
-
-class DocumentContext {
-  /** The current document */
-  document?: Document;
-
-  /** The editor instance for this document */
-  editor?: Editor;
-
-  @observable
-  isEditorInitialized: boolean = false;
-
-  @observable
-  headings: Heading[] = [];
-
-  @computed
-  get hasHeadings() {
-    return this.headings.length > 0;
-  }
-
-  @action
-  setDocument = (document: Document) => {
-    this.document = document;
-    this.updateState();
-  };
-
-  @action
-  setEditor = (editor: Editor) => {
-    this.editor = editor;
-    this.updateState();
-  };
-
-  @action
-  setEditorInitialized = (initialized: boolean) => {
-    this.isEditorInitialized = initialized;
-  };
-
-  @action
-  updateState = () => {
-    this.updateHeadings();
-    this.updateTasks();
-  };
-
-  private updateHeadings() {
-    const currHeadings = this.editor?.getHeadings() ?? [];
-    const hasChanged =
-      currHeadings.map((h) => h.level + h.title).join("") !==
-      this.headings.map((h) => h.level + h.title).join("");
-
-    if (hasChanged) {
-      this.headings = currHeadings;
-    }
-  }
-
-  private updateTasks() {
-    const tasks = this.editor?.getTasks() ?? [];
-    const total = tasks.length ?? 0;
-    const completed = tasks.filter((t) => t.completed).length ?? 0;
-    this.document?.updateTasks(total, completed);
-  }
-}
-
-const Context = React.createContext<DocumentContext | null>(null);
-
-export const useDocumentContext = () => {
-  const ctx = React.useContext(Context);
-  if (!ctx) {
-    throw new Error(
-      "useDocumentContext must be used within DocumentContextProvider"
-    );
-  }
-  return ctx;
-};
-
-export const DocumentContextProvider = ({
-  children,
-}: PropsWithChildren<unknown>) => {
-  const context = React.useMemo(() => new DocumentContext(), []);
-  return <Context.Provider value={context}>{children}</Context.Provider>;
-};

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

@@ -11,35 +11,35 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import AutoSizer from "react-virtualized-auto-sizer";
 import { FixedSizeList as List } from "react-window";
-import scrollIntoView from "scroll-into-view-if-needed";
+import scrollIntoView from "smooth-scroll-into-view-if-needed";
 import styled, { useTheme } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
-import Icon from "@shared/components/Icon";
 import { NavigationNode } from "@shared/types";
-import { isModKey } from "@shared/utils/keyboard";
 import DocumentExplorerNode from "~/components/DocumentExplorerNode";
 import DocumentExplorerSearchResult from "~/components/DocumentExplorerSearchResult";
 import Flex from "~/components/Flex";
 import CollectionIcon from "~/components/Icons/CollectionIcon";
+import EmojiIcon from "~/components/Icons/EmojiIcon";
 import { Outline } from "~/components/Input";
 import InputSearch from "~/components/InputSearch";
 import Text from "~/components/Text";
 import useMobile from "~/hooks/useMobile";
 import useStores from "~/hooks/useStores";
+import { isModKey } from "~/utils/keyboard";
 import { ancestors, descendants } from "~/utils/tree";
 
 type Props = {
   /** Action taken upon submission of selected item, could be publish, move etc. */
   onSubmit: () => void;
+
   /** A side-effect of item selection */
   onSelect: (item: NavigationNode | null) => void;
+
   /** Items to be shown in explorer */
   items: NavigationNode[];
-  /** Automatically expand to and select item with the given id */
-  defaultValue?: string;
 };
 
-function DocumentExplorer({ onSubmit, onSelect, items, defaultValue }: Props) {
+function DocumentExplorer({ onSubmit, onSelect, items }: Props) {
   const isMobile = useMobile();
   const { collections, documents } = useStores();
   const { t } = useTranslation();
@@ -47,25 +47,12 @@ function DocumentExplorer({ onSubmit, onSelect, items, defaultValue }: Props) {
 
   const [searchTerm, setSearchTerm] = React.useState<string>();
   const [selectedNode, selectNode] = React.useState<NavigationNode | null>(
-    () => {
-      const node =
-        defaultValue && items.find((item) => item.id === defaultValue);
-      return node || null;
-    }
+    null
   );
   const [initialScrollOffset, setInitialScrollOffset] =
     React.useState<number>(0);
   const [activeNode, setActiveNode] = React.useState<number>(0);
-  const [expandedNodes, setExpandedNodes] = React.useState<string[]>(() => {
-    if (defaultValue) {
-      const node = items.find((item) => item.id === defaultValue);
-      if (node) {
-        return ancestors(node).map((node) => node.id);
-      }
-    }
-    return [];
-  });
-
+  const [expandedNodes, setExpandedNodes] = React.useState<string[]>([]);
   const [itemRefs, setItemRefs] = React.useState<
     React.RefObject<HTMLSpanElement>[]
   >([]);
@@ -107,15 +94,6 @@ function DocumentExplorer({ onSubmit, onSelect, items, defaultValue }: Props) {
     onSelect(selectedNode);
   }, [selectedNode, onSelect]);
 
-  React.useEffect(() => {
-    if (defaultValue && selectedNode && listRef) {
-      const index = nodes.findIndex((node) => node.id === selectedNode.id);
-      if (index > 0) {
-        setTimeout(() => listRef.current?.scrollToItem(index, "center"), 50);
-      }
-    }
-  }, []);
-
   function getNodes() {
     function includeDescendants(item: NavigationNode): NavigationNode[] {
       return expandedNodes.includes(item.id)
@@ -238,30 +216,25 @@ function DocumentExplorer({ onSubmit, onSelect, items, defaultValue }: Props) {
     }) => {
       const node = data[index];
       const isCollection = node.type === "collection";
-      let renderedIcon,
-        title: string,
-        icon: string | undefined,
-        color: string | undefined,
-        path;
+      let icon, title: string, emoji: string | undefined, path;
 
       if (isCollection) {
         const col = collections.get(node.collectionId as string);
-        renderedIcon = col && (
+        icon = col && (
           <CollectionIcon collection={col} expanded={isExpanded(index)} />
         );
         title = node.title;
       } else {
         const doc = documents.get(node.id);
-        icon = doc?.icon ?? node.icon ?? node.emoji;
-        color = doc?.color ?? node.color;
+        emoji = doc?.emoji ?? node.emoji;
         title = doc?.title ?? node.title;
 
-        if (icon) {
-          renderedIcon = <Icon value={icon} color={color} />;
+        if (emoji) {
+          icon = <EmojiIcon emoji={emoji} />;
         } else if (doc?.isStarred) {
-          renderedIcon = <StarredIcon color={theme.yellow} />;
+          icon = <StarredIcon color={theme.yellow} />;
         } else {
-          renderedIcon = <DocumentIcon color={theme.textSecondary} />;
+          icon = <DocumentIcon color={theme.textSecondary} />;
         }
 
         path = ancestors(node)
@@ -281,7 +254,7 @@ function DocumentExplorer({ onSubmit, onSelect, items, defaultValue }: Props) {
           }}
           onPointerMove={() => setActiveNode(index)}
           onClick={() => toggleSelect(index)}
-          icon={renderedIcon}
+          icon={icon}
           title={title}
           path={path}
         />
@@ -302,7 +275,7 @@ function DocumentExplorer({ onSubmit, onSelect, items, defaultValue }: Props) {
           selected={isSelected(index)}
           active={activeNode === index}
           expanded={isExpanded(index)}
-          icon={renderedIcon}
+          icon={icon}
           title={title}
           depth={node.depth as number}
           hasChildren={hasChildren(index)}

app/components/DocumentExplorerNode.tsx

@@ -120,7 +120,6 @@ export const Node = styled.span<{
       color: ${props.theme.white};
 
       svg {
-        color: ${props.theme.white};
         fill: ${props.theme.white};
       }
     `}

app/components/DocumentExplorerSearchResult.tsx

@@ -1,7 +1,7 @@
 import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
-import scrollIntoView from "scroll-into-view-if-needed";
+import scrollIntoView from "smooth-scroll-into-view-if-needed";
 import styled from "styled-components";
 import { ellipsis } from "@shared/styles";
 import { Node as SearchResult } from "~/components/DocumentExplorerNode";

app/components/DocumentListItem.tsx

@@ -1,19 +1,15 @@
-import {
-  useFocusEffect,
-  useRovingTabIndex,
-} from "@getoutline/react-roving-tabindex";
 import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
+import { CompositeStateReturn, CompositeItem } from "reakit/Composite";
 import styled, { css } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
-import EventBoundary from "@shared/components/EventBoundary";
-import Icon from "@shared/components/Icon";
-import { s, hover } from "@shared/styles";
+import { s } from "@shared/styles";
 import Document from "~/models/Document";
 import Badge from "~/components/Badge";
 import DocumentMeta from "~/components/DocumentMeta";
+import EventBoundary from "~/components/EventBoundary";
 import Flex from "~/components/Flex";
 import Highlight from "~/components/Highlight";
 import NudeButton from "~/components/NudeButton";
@@ -21,10 +17,10 @@ import StarButton, { AnimatedStar } from "~/components/Star";
 import Tooltip from "~/components/Tooltip";
 import useBoolean from "~/hooks/useBoolean";
 import useCurrentUser from "~/hooks/useCurrentUser";
-import { useLocationSidebarContext } from "~/hooks/useLocationSidebarContext";
 import DocumentMenu from "~/menus/DocumentMenu";
+import { hover } from "~/styles";
 import { documentPath } from "~/utils/routeHelpers";
-import { determineSidebarContext } from "./Sidebar/components/SidebarContext";
+import EmojiIcon from "./Icons/EmojiIcon";
 
 type Props = {
   document: Document;
@@ -36,7 +32,7 @@ type Props = {
   showPin?: boolean;
   showDraft?: boolean;
   showTemplate?: boolean;
-};
+} & CompositeStateReturn;
 
 const SEARCH_RESULT_REGEX = /<b\b[^>]*>(.*?)<\/b>/gi;
 
@@ -51,18 +47,8 @@ function DocumentListItem(
 ) {
   const { t } = useTranslation();
   const user = useCurrentUser();
-  const locationSidebarContext = useLocationSidebarContext();
   const [menuOpen, handleMenuOpen, handleMenuClose] = useBoolean();
 
-  let itemRef: React.Ref<HTMLAnchorElement> =
-    React.useRef<HTMLAnchorElement>(null);
-  if (ref) {
-    itemRef = ref;
-  }
-
-  const { focused, ...rovingTabIndex } = useRovingTabIndex(itemRef, false);
-  useFocusEffect(focused, itemRef);
-
   const {
     document,
     showParentDocuments,
@@ -78,17 +64,13 @@ function DocumentListItem(
   const queryIsInTitle =
     !!highlight &&
     !!document.title.toLowerCase().includes(highlight.toLowerCase());
-  const canStar = !document.isArchived && !document.isTemplate;
-
-  const sidebarContext = determineSidebarContext({
-    document,
-    user,
-    currentContext: locationSidebarContext,
-  });
+  const canStar =
+    !document.isDraft && !document.isArchived && !document.isTemplate;
 
   return (
-    <DocumentLink
-      ref={itemRef}
+    <CompositeItem
+      as={DocumentLink}
+      ref={ref}
       dir={document.dir}
       role="menuitem"
       $isStarred={document.isStarred}
@@ -97,17 +79,15 @@ function DocumentListItem(
         pathname: documentPath(document),
         state: {
           title: document.titleWithDefault,
-          sidebarContext,
         },
       }}
       {...rest}
-      {...rovingTabIndex}
     >
       <Content>
         <Heading dir={document.dir}>
-          {document.icon && (
+          {document.emoji && (
             <>
-              <Icon value={document.icon} color={document.color ?? undefined} />
+              <EmojiIcon emoji={document.emoji} size={24} />
               &nbsp;
             </>
           )}
@@ -119,16 +99,20 @@ function DocumentListItem(
           {document.isBadgedNew && document.createdBy?.id !== user.id && (
             <Badge yellow>{t("New")}</Badge>
           )}
-          {document.isDraft && showDraft && (
-            <Tooltip content={t("Only visible to you")} placement="top">
-              <Badge>{t("Draft")}</Badge>
-            </Tooltip>
-          )}
           {canStar && (
             <StarPositioner>
               <StarButton document={document} />
             </StarPositioner>
           )}
+          {document.isDraft && showDraft && (
+            <Tooltip
+              content={t("Only visible to you")}
+              delay={500}
+              placement="top"
+            >
+              <Badge>{t("Draft")}</Badge>
+            </Tooltip>
+          )}
           {document.isTemplate && showTemplate && (
             <Badge primary>{t("Template")}</Badge>
           )}
@@ -158,7 +142,7 @@ function DocumentListItem(
           modal={false}
         />
       </Actions>
-    </DocumentLink>
+    </CompositeItem>
   );
 }
 
@@ -279,8 +263,6 @@ const ResultContext = styled(Highlight)`
   font-size: 15px;
   margin-top: -0.25em;
   margin-bottom: 0.25em;
-  max-height: 90px;
-  overflow: hidden;
 `;
 
 export default observer(React.forwardRef(DocumentListItem));

app/components/DocumentMeta.tsx

@@ -128,6 +128,15 @@ const DocumentMeta: React.FC<Props> = ({
         <Time dateTime={publishedAt} addSuffix />
       </span>
     );
+  } else if (isDraft) {
+    content = (
+      <span>
+        {lastUpdatedByCurrentUser
+          ? t("You saved")
+          : t("{{ userName }} saved", { userName })}{" "}
+        <Time dateTime={updatedAt} addSuffix />
+      </span>
+    );
   } else {
     content = (
       <Modified highlight={modifiedSinceViewed && !lastUpdatedByCurrentUser}>
@@ -140,7 +149,7 @@ const DocumentMeta: React.FC<Props> = ({
   }
 
   const nestedDocumentsCount = collection
-    ? collection.getChildrenForDocument(document.id).length
+    ? collection.getDocumentChildren(document.id).length
     : 0;
   const canShowProgressBar = isTasks && !isTemplate;
 
@@ -185,9 +194,9 @@ const DocumentMeta: React.FC<Props> = ({
       {showCollection && collection && (
         <span>
           &nbsp;{t("in")}&nbsp;
-          <Strong>
+          <strong>
             <DocumentBreadcrumb document={document} onlyText />
-          </Strong>
+          </strong>
         </span>
       )}
       {showParentDocuments && nestedDocumentsCount > 0 && (
@@ -210,10 +219,6 @@ const DocumentMeta: React.FC<Props> = ({
   );
 };
 
-const Strong = styled.strong`
-  font-weight: 550;
-`;
-
 const Container = styled(Flex)<{ rtl?: boolean }>`
   justify-content: ${(props) => (props.rtl ? "flex-end" : "flex-start")};
   color: ${s("textTertiary")};

app/components/DocumentTemplatizeDialog.tsx

@@ -0,0 +1,49 @@
+import invariant from "invariant";
+import { observer } from "mobx-react";
+import * as React from "react";
+import { useTranslation, Trans } from "react-i18next";
+import { useHistory } from "react-router-dom";
+import { toast } from "sonner";
+import ConfirmationDialog from "~/components/ConfirmationDialog";
+import useStores from "~/hooks/useStores";
+import { documentPath } from "~/utils/routeHelpers";
+
+type Props = {
+  documentId: string;
+};
+
+function DocumentTemplatizeDialog({ documentId }: Props) {
+  const history = useHistory();
+  const { t } = useTranslation();
+  const { documents } = useStores();
+  const document = documents.get(documentId);
+  invariant(document, "Document must exist");
+
+  const handleSubmit = React.useCallback(async () => {
+    const template = await document?.templatize();
+    if (template) {
+      history.push(documentPath(template));
+      toast.success(t("Template created, go ahead and customize it"));
+    }
+  }, [document, history, t]);
+
+  return (
+    <ConfirmationDialog
+      onSubmit={handleSubmit}
+      submitText={t("Create template")}
+      savingText={`${t("Creating")}…`}
+    >
+      <Trans
+        defaults="Creating a template from <em>{{titleWithDefault}}</em> is a non-destructive action – we'll make a copy of the document and turn it into a template that can be used as a starting point for new documents."
+        values={{
+          titleWithDefault: document.titleWithDefault,
+        }}
+        components={{
+          em: <strong />,
+        }}
+      />
+    </ConfirmationDialog>
+  );
+}
+
+export default observer(DocumentTemplatizeDialog);

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 } from "~/components/Avatar";
+import Avatar from "~/components/Avatar";
 import ListItem from "~/components/List/Item";
 import PaginatedList from "~/components/PaginatedList";
 import useCurrentUser from "~/hooks/useCurrentUser";

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("Published")}
+                labelPosition="right"
+                checked={publish}
+                onChange={handlePublishChange}
+              />
+            </Text>
+          )}
+          {document.publishedAt && (
+            <Text size="small">
+              <Switch
+                name="recursive"
+                label={t("Include nested documents")}
+                labelPosition="right"
+                checked={recursive}
+                onChange={handleRecursiveChange}
+              />
+            </Text>
+          )}
+        </>
+      )}
+    </ConfirmationDialog>
+  );
+}
+
+export default observer(DuplicateDialog);

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,11 @@ import { mergeRefs } from "react-merge-refs";
 import { Optional } from "utility-types";
 import insertFiles from "@shared/editor/commands/insertFiles";
 import { AttachmentPreset } from "@shared/types";
+import { Heading } from "@shared/utils/ProsemirrorHelper";
+import { dateLocale, dateToRelative } from "@shared/utils/date";
 import { getDataTransferFiles } from "@shared/utils/files";
+import parseDocumentSlug from "@shared/utils/parseDocumentSlug";
+import { isInternalUrl } from "@shared/utils/urls";
 import { AttachmentValidation } from "@shared/validations";
 import ClickablePadding from "~/components/ClickablePadding";
 import ErrorBoundary from "~/components/ErrorBoundary";
@@ -17,8 +23,11 @@ import useDictionary from "~/hooks/useDictionary";
 import useEditorClickHandlers from "~/hooks/useEditorClickHandlers";
 import useEmbeds from "~/hooks/useEmbeds";
 import useStores from "~/hooks/useStores";
+import useUserLocale from "~/hooks/useUserLocale";
+import { NotFoundError } from "~/utils/errors";
 import { uploadFile } from "~/utils/files";
 import lazyWithRetry from "~/utils/lazyWithRetry";
+import DocumentBreadcrumb from "./DocumentBreadcrumb";
 
 const LazyLoadedEditor = lazyWithRetry(() => import("~/editor"));
 
@@ -33,21 +42,83 @@ export type Props = Optional<
 > & {
   shareId?: string | undefined;
   embedsDisabled?: boolean;
+  onHeadingsChange?: (headings: Heading[]) => void;
   onSynced?: () => Promise<void>;
   onPublish?: (event: React.MouseEvent) => void;
   editorStyle?: React.CSSProperties;
 };
 
 function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
-  const { id, shareId, onChange, onCreateCommentMark, onDeleteCommentMark } =
-    props;
-  const { comments } = useStores();
+  const {
+    id,
+    shareId,
+    onChange,
+    onHeadingsChange,
+    onCreateCommentMark,
+    onDeleteCommentMark,
+  } = props;
+  const userLocale = useUserLocale();
+  const locale = dateLocale(userLocale);
+  const { comments, documents } = useStores();
   const dictionary = useDictionary();
   const embeds = useEmbeds(!shareId);
   const localRef = React.useRef<SharedEditor>();
   const preferences = useCurrentUser({ rejectOnEmpty: false })?.preferences;
+  const previousHeadings = React.useRef<Heading[] | null>(null);
   const previousCommentIds = React.useRef<string[]>();
 
+  const handleSearchLink = React.useCallback(
+    async (term: string) => {
+      if (isInternalUrl(term)) {
+        // search for exact internal document
+        const slug = parseDocumentSlug(term);
+        if (!slug) {
+          return [];
+        }
+
+        try {
+          const document = await documents.fetch(slug);
+          const time = dateToRelative(Date.parse(document.updatedAt), {
+            addSuffix: true,
+            shorten: true,
+            locale,
+          });
+
+          return [
+            {
+              title: document.title,
+              subtitle: `Updated ${time}`,
+              url: document.url,
+            },
+          ];
+        } catch (error) {
+          // NotFoundError could not find document for slug
+          if (!(error instanceof NotFoundError)) {
+            throw error;
+          }
+        }
+      }
+
+      // default search for anything that doesn't look like a URL
+      const results = await documents.searchTitles(term);
+
+      return sortBy(
+        results.map(({ document }) => ({
+          title: document.title,
+          subtitle: <DocumentBreadcrumb document={document} onlyText />,
+          url: document.url,
+        })),
+        (document) =>
+          deburr(document.title)
+            .toLowerCase()
+            .startsWith(deburr(term).toLowerCase())
+            ? -1
+            : 1
+      );
+    },
+    [locale, documents]
+  );
+
   const handleUploadFile = React.useCallback(
     async (file: File) => {
       const result = await uploadFile(file, {
@@ -131,6 +202,21 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
     []
   );
 
+  // Calculate if headings have changed and trigger callback if so
+  const updateHeadings = React.useCallback(() => {
+    if (onHeadingsChange) {
+      const headings = localRef?.current?.getHeadings();
+      if (
+        headings &&
+        headings.map((h) => h.level + h.title).join("") !==
+          previousHeadings.current?.map((h) => h.level + h.title).join("")
+      ) {
+        previousHeadings.current = headings;
+        onHeadingsChange(headings);
+      }
+    }
+  }, [localRef, onHeadingsChange]);
+
   const updateComments = React.useCallback(() => {
     if (onCreateCommentMark && onDeleteCommentMark && localRef.current) {
       const commentMarks = localRef.current.getComments();
@@ -165,25 +251,26 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
   const handleChange = React.useCallback(
     (event) => {
       onChange?.(event);
+      updateHeadings();
       updateComments();
     },
-    [onChange, updateComments]
+    [onChange, updateComments, updateHeadings]
   );
 
   const handleRefChanged = React.useCallback(
     (node: SharedEditor | null) => {
       if (node) {
+        updateHeadings();
         updateComments();
       }
     },
-    [updateComments]
+    [updateComments, updateHeadings]
   );
 
   return (
     <ErrorBoundary component="div" reloadOnChunkMissing>
       <>
         <LazyLoadedEditor
-          key={props.extensions?.length || 0}
           ref={mergeRefs([ref, localRef, handleRefChanged])}
           uploadFile={handleUploadFile}
           embeds={embeds}
@@ -191,19 +278,19 @@ 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 || props.shareId) && (
-            <ClickablePadding
-              onClick={props.readOnly ? undefined : focusAtEnd}
-              onDrop={props.readOnly ? undefined : handleDrop}
-              onDragOver={props.readOnly ? undefined : handleDragOver}
-              minHeight={props.editorStyle.paddingBottom}
-            />
-          )}
+        {props.editorStyle?.paddingBottom && !props.readOnly && (
+          <ClickablePadding
+            onClick={focusAtEnd}
+            onDrop={handleDrop}
+            onDragOver={handleDragOver}
+            minHeight={props.editorStyle.paddingBottom}
+          />
+        )}
       </>
     </ErrorBoundary>
   );

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/EmojiPicker/components.tsx

@@ -0,0 +1,23 @@
+import styled from "styled-components";
+import Button from "~/components/Button";
+import { hover } from "~/styles";
+import Flex from "../Flex";
+
+export const EmojiButton = styled(Button)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+
+  &: ${hover},
+  &:active,
+  &[aria-expanded= "true"] {
+    opacity: 1 !important;
+  }
+`;
+
+export const Emoji = styled(Flex)<{ size?: number }>`
+  line-height: 1.6;
+  ${(props) => (props.size ? `font-size: ${props.size}px` : "")}
+`;

app/components/EmojiPicker/index.tsx

@@ -0,0 +1,262 @@
+import data from "@emoji-mart/data";
+import Picker from "@emoji-mart/react";
+import { SmileyIcon } from "outline-icons";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { usePopoverState, PopoverDisclosure } from "reakit/Popover";
+import styled, { useTheme } from "styled-components";
+import { depths, s } from "@shared/styles";
+import { toRGB } from "@shared/utils/color";
+import Button from "~/components/Button";
+import Popover from "~/components/Popover";
+import useStores from "~/hooks/useStores";
+import useUserLocale from "~/hooks/useUserLocale";
+import { Emoji, EmojiButton } from "./components";
+
+/* Locales supported by emoji-mart */
+const supportedLocales = [
+  "en",
+  "ar",
+  "be",
+  "cs",
+  "de",
+  "es",
+  "fa",
+  "fi",
+  "fr",
+  "hi",
+  "it",
+  "ja",
+  "ko",
+  "nl",
+  "pl",
+  "pt",
+  "ru",
+  "sa",
+  "tr",
+  "uk",
+  "vi",
+  "zh",
+];
+
+/**
+ * React hook to derive emoji picker's theme from UI theme
+ *
+ * @returns {string} Theme to use for emoji picker
+ */
+function usePickerTheme(): string {
+  const { ui } = useStores();
+  const { theme } = ui;
+
+  if (theme === "system") {
+    return "auto";
+  }
+
+  return theme;
+}
+
+type Props = {
+  /** The selected emoji, if any */
+  value?: string | null;
+  /** Callback when an emoji is selected */
+  onChange: (emoji: string | null) => void | Promise<void>;
+  /** Callback when the picker is opened */
+  onOpen?: () => void;
+  /** Callback when the picker is closed */
+  onClose?: () => void;
+  /** Callback when the picker is clicked outside of */
+  onClickOutside: () => void;
+  /** Whether to auto focus the search input on open */
+  autoFocus?: boolean;
+  /** Class name to apply to the trigger button */
+  className?: string;
+};
+
+function EmojiPicker({
+  value,
+  onOpen,
+  onClose,
+  onChange,
+  onClickOutside,
+  autoFocus,
+  className,
+}: Props) {
+  const { t } = useTranslation();
+  const pickerTheme = usePickerTheme();
+  const theme = useTheme();
+  const locale = useUserLocale(true) ?? "en";
+
+  const popover = usePopoverState({
+    placement: "bottom-start",
+    modal: true,
+    unstable_offset: [0, 0],
+  });
+
+  const [emojisPerLine, setEmojisPerLine] = React.useState(9);
+
+  const pickerRef = React.useRef<HTMLDivElement>(null);
+
+  React.useEffect(() => {
+    if (popover.visible) {
+      onOpen?.();
+    } else {
+      onClose?.();
+    }
+  }, [popover.visible, onOpen, onClose]);
+
+  React.useEffect(() => {
+    if (popover.visible && pickerRef.current) {
+      // 28 is picker's observed width when perLine is set to 0
+      // and 36 is the default emojiButtonSize
+      // Ref: https://github.com/missive/emoji-mart#options--props
+      setEmojisPerLine(Math.floor((pickerRef.current.clientWidth - 28) / 36));
+    }
+  }, [popover.visible]);
+
+  const handleEmojiChange = React.useCallback(
+    async (emoji) => {
+      popover.hide();
+      await onChange(emoji ? emoji.native : null);
+    },
+    [popover, onChange]
+  );
+
+  const handleClick = React.useCallback(
+    (ev: React.MouseEvent) => {
+      ev.stopPropagation();
+      if (popover.visible) {
+        popover.hide();
+      } else {
+        popover.show();
+      }
+    },
+    [popover]
+  );
+
+  const handleClickOutside = React.useCallback(() => {
+    // It was observed that onClickOutside got triggered
+    // even when the picker wasn't open or opened at all.
+    // Hence, this guard here...
+    if (popover.visible) {
+      onClickOutside();
+    }
+  }, [popover.visible, onClickOutside]);
+
+  // Auto focus search input when picker is opened
+  React.useLayoutEffect(() => {
+    if (autoFocus && popover.visible) {
+      requestAnimationFrame(() => {
+        const searchInput = pickerRef.current
+          ?.querySelector("em-emoji-picker")
+          ?.shadowRoot?.querySelector(
+            "input[type=search]"
+          ) as HTMLInputElement | null;
+        searchInput?.focus();
+      });
+    }
+  }, [autoFocus, popover.visible]);
+
+  return (
+    <>
+      <PopoverDisclosure {...popover}>
+        {(props) => (
+          <EmojiButton
+            {...props}
+            className={className}
+            onClick={handleClick}
+            icon={
+              value ? (
+                <Emoji size={32} align="center" justify="center">
+                  {value}
+                </Emoji>
+              ) : (
+                <StyledSmileyIcon size={32} color={theme.textTertiary} />
+              )
+            }
+            neutral
+            borderOnHover
+          />
+        )}
+      </PopoverDisclosure>
+      <PickerPopover
+        {...popover}
+        tabIndex={0}
+        // This prevents picker from closing when any of its
+        // children are focused, e.g, clicking on search bar or
+        // a click on skin tone button
+        onClick={(e) => e.stopPropagation()}
+        width={352}
+        aria-label={t("Emoji Picker")}
+      >
+        {popover.visible && (
+          <>
+            {value && (
+              <RemoveButton neutral onClick={() => handleEmojiChange(null)}>
+                {t("Remove")}
+              </RemoveButton>
+            )}
+            <PickerStyles ref={pickerRef}>
+              <Picker
+                locale={supportedLocales.includes(locale) ? locale : "en"}
+                data={data}
+                onEmojiSelect={handleEmojiChange}
+                theme={pickerTheme}
+                previewPosition="none"
+                perLine={emojisPerLine}
+                onClickOutside={handleClickOutside}
+              />
+            </PickerStyles>
+          </>
+        )}
+      </PickerPopover>
+    </>
+  );
+}
+
+const StyledSmileyIcon = styled(SmileyIcon)`
+  flex-shrink: 0;
+
+  @media print {
+    display: none;
+  }
+`;
+
+const RemoveButton = styled(Button)`
+  margin-left: -12px;
+  margin-bottom: 8px;
+  border-radius: 6px;
+  height: 24px;
+  font-size: 13px;
+
+  > :first-child {
+    min-height: unset;
+    line-height: unset;
+  }
+`;
+
+const PickerPopover = styled(Popover)`
+  z-index: ${depths.popover};
+  > :first-child {
+    padding-top: 8px;
+    padding-bottom: 0;
+    max-height: 488px;
+    overflow: unset;
+  }
+`;
+
+const PickerStyles = styled.div`
+  margin-left: -24px;
+  margin-right: -24px;
+  em-emoji-picker {
+    --shadow: none;
+    --font-family: ${s("fontFamily")};
+    --rgb-background: ${(props) => toRGB(props.theme.menuBackground)};
+    --rgb-accent: ${(props) => toRGB(props.theme.accent)};
+    --border-radius: 6px;
+    margin-left: auto;
+    margin-right: auto;
+    min-height: 443px;
+  }
+`;
+
+export default EmojiPicker;

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/EventBoundary.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+
+type Props = {
+  children?: React.ReactNode;
+  className?: string;
+};
+
+const EventBoundary: React.FC<Props> = ({ children, className }: Props) => {
+  const handleClick = React.useCallback((event: React.SyntheticEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
+  }, []);
+
+  return (
+    <span onClick={handleClick} className={className}>
+      {children}
+    </span>
+  );
+};
+
+export default EventBoundary;

app/components/EventListItem.tsx

@@ -11,31 +11,33 @@ import {
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { useLocation } from "react-router-dom";
+import { CompositeStateReturn } from "reakit/Composite";
 import styled, { css } from "styled-components";
-import EventBoundary from "@shared/components/EventBoundary";
-import { s, hover } from "@shared/styles";
+import { s } from "@shared/styles";
 import Document from "~/models/Document";
 import Event from "~/models/Event";
-import { Avatar } from "~/components/Avatar";
-import Item, { Actions, Props as ItemProps } from "~/components/List/Item";
+import Avatar from "~/components/Avatar";
+import CompositeItem, {
+  Props as ItemProps,
+} from "~/components/List/CompositeItem";
+import Item, { Actions } from "~/components/List/Item";
 import Time from "~/components/Time";
-import { useLocationSidebarContext } from "~/hooks/useLocationSidebarContext";
 import useStores from "~/hooks/useStores";
 import RevisionMenu from "~/menus/RevisionMenu";
+import { hover } from "~/styles";
 import Logger from "~/utils/Logger";
 import { documentHistoryPath } from "~/utils/routeHelpers";
 
 type Props = {
   document: Document;
-  event: Event<Document>;
+  event: Event;
   latest?: boolean;
-};
+} & CompositeStateReturn;
 
 const EventListItem = ({ event, latest, document, ...rest }: Props) => {
   const { t } = useTranslation();
   const { revisions } = useStores();
   const location = useLocation();
-  const sidebarContext = useLocationSidebarContext();
   const opts = {
     userName: event.actor.name,
   };
@@ -67,10 +69,7 @@ const EventListItem = ({ event, latest, document, ...rest }: Props) => {
       );
       to = {
         pathname: documentHistoryPath(document, event.modelId || "latest"),
-        state: {
-          sidebarContext,
-          retainScrollPosition: true,
-        },
+        state: { retainScrollPosition: true },
       };
       break;
 
@@ -144,6 +143,7 @@ const EventListItem = ({ event, latest, document, ...rest }: Props) => {
       title={
         <Time
           dateTime={event.createdAt}
+          tooltipDelay={500}
           format={{
             en_US: "MMM do, h:mm a",
             fr_FR: "'Le 'd MMMM 'à' H:mm",
@@ -162,9 +162,7 @@ const EventListItem = ({ event, latest, document, ...rest }: Props) => {
       }
       actions={
         isRevision && isActive && event.modelId && !latest ? (
-          <StyledEventBoundary>
-            <RevisionMenu document={document} revisionId={event.modelId} />
-          </StyledEventBoundary>
+          <RevisionMenu document={document} revisionId={event.modelId} />
         ) : undefined
       }
       onMouseEnter={prefetchRevision}
@@ -178,12 +176,12 @@ const BaseItem = React.forwardRef(function _BaseItem(
   { to, ...rest }: ItemProps,
   ref?: React.Ref<HTMLAnchorElement>
 ) {
-  return <ListItem to={to} ref={ref} {...rest} />;
-});
+  if (to) {
+    return <CompositeListItem to={to} ref={ref} {...rest} />;
+  }
 
-const StyledEventBoundary = styled(EventBoundary)`
-  height: 24px;
-`;
+  return <ListItem ref={ref} {...rest} />;
+});
 
 const Subtitle = styled.span`
   svg {
@@ -242,4 +240,8 @@ const ListItem = styled(Item)`
   ${ItemStyle}
 `;
 
+const CompositeListItem = styled(CompositeItem)`
+  ${ItemStyle}
+`;
+
 export default observer(EventListItem);

app/components/Facepile.tsx

@@ -3,8 +3,9 @@ import * as React from "react";
 import styled from "styled-components";
 import { s } from "@shared/styles";
 import User from "~/models/User";
-import { Avatar, AvatarSize } from "~/components/Avatar";
+import Avatar from "~/components/Avatar";
 import Flex from "~/components/Flex";
+import { AvatarSize } from "./Avatar/Avatar";
 
 type Props = {
   users: User[];

app/components/FilterOptions.tsx

@@ -1,23 +1,18 @@
-import deburr from "lodash/deburr";
 import * as React from "react";
-import { useTranslation } from "react-i18next";
 import { useMenuState, MenuButton } from "reakit/Menu";
 import styled from "styled-components";
 import { s } from "@shared/styles";
-import type { FetchPageParams } from "~/stores/base/Store";
 import Button, { Inner } from "~/components/Button";
 import ContextMenu from "~/components/ContextMenu";
 import MenuItem from "~/components/ContextMenu/MenuItem";
 import Text from "~/components/Text";
-import Input, { NativeInput, Outline } from "./Input";
-import PaginatedList, { PaginatedItem } from "./PaginatedList";
 
-interface TFilterOption extends PaginatedItem {
+type TFilterOption = {
   key: string;
   label: string;
   note?: string;
   icon?: React.ReactNode;
-}
+};
 
 type Props = {
   options: TFilterOption[];
@@ -26,9 +21,6 @@ type Props = {
   selectedPrefix?: string;
   className?: string;
   onSelect: (key: string | null | undefined) => void;
-  showFilter?: boolean;
-  fetchQuery?: (options: FetchPageParams) => Promise<PaginatedItem[]>;
-  fetchQueryOptions?: Record<string, string>;
 };
 
 const FilterOptions = ({
@@ -38,20 +30,13 @@ const FilterOptions = ({
   selectedPrefix = "",
   className,
   onSelect,
-  showFilter,
-  fetchQuery,
-  fetchQueryOptions,
 }: Props) => {
-  const { t } = useTranslation();
-  const searchInputRef = React.useRef<HTMLInputElement>(null);
-  const listRef = React.useRef<HTMLDivElement | null>(null);
   const menu = useMenuState({
-    modal: false,
+    modal: true,
   });
   const selectedItems = options.filter((option) =>
     selectedKeys.includes(option.key)
   );
-  const [query, setQuery] = React.useState("");
 
   const selectedLabel = selectedItems.length
     ? selectedItems
@@ -59,109 +44,6 @@ const FilterOptions = ({
         .join(", ")
     : "";
 
-  const renderItem = React.useCallback(
-    (option: TFilterOption) => (
-      <MenuItem
-        key={option.key}
-        onClick={() => {
-          onSelect(option.key);
-          menu.hide();
-        }}
-        selected={selectedKeys.includes(option.key)}
-        {...menu}
-      >
-        {option.icon && <Icon>{option.icon}</Icon>}
-        {option.note ? (
-          <LabelWithNote>
-            {option.label}
-            <Note>{option.note}</Note>
-          </LabelWithNote>
-        ) : (
-          option.label
-        )}
-      </MenuItem>
-    ),
-    [menu, onSelect, selectedKeys]
-  );
-
-  const handleFilter = (ev: React.ChangeEvent<HTMLInputElement>) => {
-    setQuery(ev.target.value);
-  };
-
-  const filteredOptions = React.useMemo(() => {
-    const normalizedQuery = deburr(query.toLowerCase());
-
-    return query
-      ? options
-          .filter((option) =>
-            deburr(option.label).toLowerCase().includes(normalizedQuery)
-          )
-          // sort options starting with query first
-          .sort((a, b) => {
-            const aStartsWith = deburr(a.label)
-              .toLowerCase()
-              .startsWith(normalizedQuery);
-            const bStartsWith = deburr(b.label)
-              .toLowerCase()
-              .startsWith(normalizedQuery);
-
-            if (aStartsWith && !bStartsWith) {
-              return -1;
-            }
-            if (!aStartsWith && bStartsWith) {
-              return 1;
-            }
-            return 0;
-          })
-      : options;
-  }, [options, query]);
-
-  const handleKeyDown = React.useCallback(
-    (ev: React.KeyboardEvent) => {
-      if (ev.nativeEvent.isComposing || ev.shiftKey) {
-        return;
-      }
-
-      switch (ev.key) {
-        case "Escape":
-          menu.hide();
-          break;
-        case "Enter":
-          if (filteredOptions.length === 1) {
-            ev.preventDefault();
-            onSelect(filteredOptions[0].key);
-            menu.hide();
-          }
-          break;
-        case "ArrowDown":
-          ev.preventDefault();
-          (listRef.current?.firstElementChild as HTMLElement)?.focus();
-          break;
-        default:
-          break;
-      }
-    },
-    [filteredOptions, menu, onSelect]
-  );
-
-  const handleEscapeFromList = React.useCallback((ev: React.KeyboardEvent) => {
-    searchInputRef.current?.focus();
-
-    if (ev.key === "Backspace") {
-      setQuery((prev) => prev.slice(0, -1));
-    }
-  }, []);
-
-  React.useEffect(() => {
-    if (menu.visible) {
-      searchInputRef.current?.focus();
-    } else {
-      setQuery("");
-    }
-  }, [menu.visible]);
-
-  const showFilterInput = showFilter || options.length > 10;
-
   return (
     <div>
       <MenuButton {...menu}>
@@ -171,73 +53,33 @@ const FilterOptions = ({
           </StyledButton>
         )}
       </MenuButton>
-      <ContextMenu aria-label={defaultLabel} minHeight={66} {...menu}>
-        <PaginatedList
-          listRef={listRef}
-          options={{ query, ...fetchQueryOptions }}
-          items={filteredOptions}
-          fetch={fetchQuery}
-          renderItem={renderItem}
-          onEscape={handleEscapeFromList}
-          heading={showFilterInput ? <Spacer /> : undefined}
-          empty={<Empty />}
-        />
-        {showFilterInput && (
-          <SearchInput
-            ref={searchInputRef}
-            value={query}
-            onChange={handleFilter}
-            onKeyDown={handleKeyDown}
-            placeholder={`${t("Filter")}…`}
-            autoFocus
-          />
-        )}
+      <ContextMenu aria-label={defaultLabel} {...menu}>
+        {options.map((option) => (
+          <MenuItem
+            key={option.key}
+            onClick={() => {
+              onSelect(option.key);
+              menu.hide();
+            }}
+            selected={selectedKeys.includes(option.key)}
+            {...menu}
+          >
+            {option.icon && <Icon>{option.icon}</Icon>}
+            {option.note ? (
+              <LabelWithNote>
+                {option.label}
+                <Note>{option.note}</Note>
+              </LabelWithNote>
+            ) : (
+              option.label
+            )}
+          </MenuItem>
+        ))}
       </ContextMenu>
     </div>
   );
 };
 
-const Empty = () => {
-  const { t } = useTranslation();
-
-  return (
-    <>
-      <Spacer />
-      <Text size="small" type="tertiary" style={{ marginLeft: 6 }}>
-        {t("No results")}
-      </Text>
-    </>
-  );
-};
-
-const Spacer = styled.div`
-  height: 30px;
-`;
-
-const SearchInput = styled(Input)`
-  position: absolute;
-  width: 100%;
-  border: none;
-  border-top-left-radius: 6px;
-  border-top-right-radius: 6px;
-  overflow: hidden;
-  margin: 0;
-  top: 0;
-  left: 0;
-  right: 0;
-
-  ${Outline} {
-    border: none;
-    border-radius: 0;
-    border-bottom: 1px solid ${s("divider")};
-    background: ${s("menuBackground")};
-  }
-
-  ${NativeInput} {
-    font-size: 14px;
-  }
-`;
-
 const Note = styled(Text)`
   display: block;
   margin: 2px 0;

app/components/GroupListItem.tsx

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

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,7 +3,6 @@ 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 { depths, s } from "@shared/styles";
@@ -11,35 +10,25 @@ import { supportsPassiveListener } from "@shared/utils/browser";
 import Button from "~/components/Button";
 import Fade from "~/components/Fade";
 import Flex from "~/components/Flex";
-import useComponentSize from "~/hooks/useComponentSize";
 import useEventListener from "~/hooks/useEventListener";
 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/Highlight.tsx

@@ -2,7 +2,6 @@ import escapeRegExp from "lodash/escapeRegExp";
 import * as React from "react";
 import replace from "string-replace-to-array";
 import styled from "styled-components";
-import { s } from "@shared/styles";
 
 type Props = React.HTMLAttributes<HTMLSpanElement> & {
   highlight: (string | null | undefined) | RegExp;
@@ -44,7 +43,7 @@ function Highlight({
 }
 
 export const Mark = styled.mark`
-  color: ${s("text")};
+  color: inherit;
   background: transparent;
   font-weight: 600;
 `;

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/HoverPreviewDocument.tsx

@@ -1,9 +1,7 @@
 import * as React from "react";
-import { richExtensions } from "@shared/editor/nodes";
 import { UnfurlResourceType, UnfurlResponse } from "@shared/types";
 import Editor from "~/components/Editor";
 import Flex from "~/components/Flex";
-import ErrorBoundary from "../ErrorBoundary";
 import {
   Preview,
   Title,
@@ -23,23 +21,20 @@ const HoverPreviewDocument = React.forwardRef(function _HoverPreviewDocument(
     <Preview to={url}>
       <Card ref={ref}>
         <CardContent>
-          <ErrorBoundary showTitle={false} reloadOnChunkMissing={false}>
-            <Flex column gap={2}>
-              <Title>{title}</Title>
-              <Info>{lastActivityByViewer}</Info>
-              <Description as="div">
-                <React.Suspense fallback={<div />}>
-                  <Editor
-                    key={id}
-                    extensions={richExtensions}
-                    defaultValue={summary}
-                    embedsDisabled
-                    readOnly
-                  />
-                </React.Suspense>
-              </Description>
-            </Flex>
-          </ErrorBoundary>
+          <Flex column gap={2}>
+            <Title>{title}</Title>
+            <Info>{lastActivityByViewer}</Info>
+            <Description as="div">
+              <React.Suspense fallback={<div />}>
+                <Editor
+                  key={id}
+                  defaultValue={summary}
+                  embedsDisabled
+                  readOnly
+                />
+              </React.Suspense>
+            </Description>
+          </Flex>
         </CardContent>
       </Card>
     </Preview>

app/components/HoverPreview/HoverPreviewIssue.tsx

@@ -1,8 +1,8 @@
 import * as React from "react";
 import { Trans } from "react-i18next";
 import { UnfurlResourceType, UnfurlResponse } from "@shared/types";
-import { Avatar } from "~/components/Avatar";
 import Flex from "~/components/Flex";
+import Avatar from "../Avatar";
 import { IssueStatusIcon } from "../Icons/IssueStatusIcon";
 import Text from "../Text";
 import Time from "../Time";

app/components/HoverPreview/HoverPreviewMention.tsx

@@ -1,13 +1,14 @@
 import * as React from "react";
 import { UnfurlResourceType, UnfurlResponse } from "@shared/types";
-import { Avatar, AvatarSize } from "~/components/Avatar";
+import Avatar from "~/components/Avatar";
+import { AvatarSize } from "~/components/Avatar/Avatar";
 import Flex from "~/components/Flex";
 import { Preview, Title, Info, Card, CardContent } from "./Components";
 
 type Props = Omit<UnfurlResponse[UnfurlResourceType.Mention], "type">;
 
 const HoverPreviewMention = React.forwardRef(function _HoverPreviewMention(
-  { avatarUrl, name, lastActive, color, email }: Props,
+  { avatarUrl, name, lastActive, color }: Props,
   ref: React.Ref<HTMLDivElement>
 ) {
   return (
@@ -25,7 +26,6 @@ const HoverPreviewMention = React.forwardRef(function _HoverPreviewMention(
             />
             <Flex column gap={2} justify="center">
               <Title>{name}</Title>
-              {email && <Info>{email}</Info>}
               <Info>{lastActive}</Info>
             </Flex>
           </Flex>

app/components/HoverPreview/HoverPreviewPullRequest.tsx

@@ -1,8 +1,8 @@
 import * as React from "react";
 import { Trans } from "react-i18next";
 import { UnfurlResourceType, UnfurlResponse } from "@shared/types";
-import { Avatar } from "~/components/Avatar";
 import Flex from "~/components/Flex";
+import Avatar from "../Avatar";
 import { PullRequestIcon } from "../Icons/PullRequestIcon";
 import Text from "../Text";
 import Time from "../Time";

app/components/IconPicker.tsx

@@ -0,0 +1,211 @@
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { PopoverDisclosure, usePopoverState } from "reakit";
+import { MenuItem } from "reakit/Menu";
+import styled, { useTheme } from "styled-components";
+import { IconLibrary } from "@shared/utils/IconLibrary";
+import { colorPalette } from "@shared/utils/collections";
+import Flex from "~/components/Flex";
+import NudeButton from "~/components/NudeButton";
+import Text from "~/components/Text";
+import useOnClickOutside from "~/hooks/useOnClickOutside";
+import lazyWithRetry from "~/utils/lazyWithRetry";
+import DelayedMount from "./DelayedMount";
+import InputSearch from "./InputSearch";
+import Popover from "./Popover";
+
+const icons = IconLibrary.mapping;
+
+const TwitterPicker = lazyWithRetry(
+  () => import("react-color/lib/components/twitter/Twitter")
+);
+
+type Props = {
+  onOpen?: () => void;
+  onClose?: () => void;
+  onChange: (color: string, icon: string) => void;
+  initial: string;
+  icon: string;
+  color: string;
+  className?: string;
+};
+
+function IconPicker({
+  onOpen,
+  onClose,
+  icon,
+  initial,
+  color,
+  onChange,
+  className,
+}: Props) {
+  const [query, setQuery] = React.useState("");
+  const { t } = useTranslation();
+  const theme = useTheme();
+  const popover = usePopoverState({
+    gutter: 0,
+    placement: "right",
+    modal: true,
+  });
+
+  React.useEffect(() => {
+    if (popover.visible) {
+      onOpen?.();
+    } else {
+      onClose?.();
+      setQuery("");
+    }
+  }, [onOpen, onClose, popover.visible]);
+
+  const filteredIcons = IconLibrary.findIcons(query);
+  const handleFilter = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setQuery(event.target.value.toLowerCase());
+  };
+
+  const styles = React.useMemo(
+    () => ({
+      default: {
+        body: {
+          padding: 0,
+          marginRight: -8,
+        },
+        hash: {
+          color: theme.text,
+          background: theme.inputBorder,
+        },
+        swatch: {
+          cursor: "var(--cursor-pointer)",
+        },
+        input: {
+          color: theme.text,
+          boxShadow: `inset 0 0 0 1px ${theme.inputBorder}`,
+          background: "transparent",
+        },
+      },
+    }),
+    [theme]
+  );
+
+  // Custom click outside handling rather than using `hideOnClickOutside` from reakit so that we can
+  // prevent event bubbling.
+  useOnClickOutside(
+    popover.unstable_popoverRef,
+    (event) => {
+      if (popover.visible) {
+        event.stopPropagation();
+        event.preventDefault();
+        popover.hide();
+      }
+    },
+    { capture: true }
+  );
+
+  const iconNames = Object.keys(icons);
+  const delayPerIcon = 250 / iconNames.length;
+
+  return (
+    <>
+      <PopoverDisclosure {...popover}>
+        {(props) => (
+          <NudeButton
+            aria-label={t("Show menu")}
+            className={className}
+            {...props}
+          >
+            <Icon
+              as={IconLibrary.getComponent(icon || "collection")}
+              color={color}
+            >
+              {initial}
+            </Icon>
+          </NudeButton>
+        )}
+      </PopoverDisclosure>
+      <Popover
+        {...popover}
+        width={552}
+        aria-label={t("Choose an icon")}
+        hideOnClickOutside={false}
+      >
+        <Flex column gap={12}>
+          <Text size="large" weight="xbold">
+            {t("Choose an icon")}
+          </Text>
+          <InputSearch
+            value={query}
+            placeholder={`${t("Filter")}…`}
+            onChange={handleFilter}
+            autoFocus
+          />
+          <div>
+            {iconNames.map((name, index) => (
+              <MenuItem key={name} onClick={() => onChange(color, name)}>
+                {(props) => (
+                  <IconButton
+                    style={
+                      {
+                        opacity: query
+                          ? filteredIcons.includes(name)
+                            ? 1
+                            : 0.3
+                          : undefined,
+                        "--delay": `${Math.round(index * delayPerIcon)}ms`,
+                      } as React.CSSProperties
+                    }
+                    {...props}
+                  >
+                    <Icon
+                      as={IconLibrary.getComponent(name)}
+                      color={color}
+                      size={30}
+                    >
+                      {initial}
+                    </Icon>
+                  </IconButton>
+                )}
+              </MenuItem>
+            ))}
+          </div>
+          <Flex>
+            <React.Suspense
+              fallback={
+                <DelayedMount>
+                  <Text>{t("Loading")}…</Text>
+                </DelayedMount>
+              }
+            >
+              <ColorPicker
+                color={color}
+                onChange={(color) => onChange(color.hex, icon)}
+                colors={colorPalette}
+                triangle="hide"
+                styles={styles}
+              />
+            </React.Suspense>
+          </Flex>
+        </Flex>
+      </Popover>
+    </>
+  );
+}
+
+const Icon = styled.svg`
+  transition: color 150ms ease-in-out, fill 150ms ease-in-out;
+  transition-delay: var(--delay);
+`;
+
+const IconButton = styled(NudeButton)`
+  vertical-align: top;
+  border-radius: 4px;
+  margin: 0px 6px 6px 0px;
+  width: 30px;
+  height: 30px;
+`;
+
+const ColorPicker = styled(TwitterPicker)`
+  box-shadow: none !important;
+  background: transparent !important;
+  width: 100% !important;
+`;
+
+export default IconPicker;

app/components/IconPicker/components/ColorPicker.tsx

@@ -1,217 +0,0 @@
-import { BackIcon } from "outline-icons";
-import React from "react";
-import styled from "styled-components";
-import { breakpoints, s, hover } from "@shared/styles";
-import { colorPalette } from "@shared/utils/collections";
-import { validateColorHex } from "@shared/utils/color";
-import Flex from "~/components/Flex";
-import NudeButton from "~/components/NudeButton";
-import Text from "~/components/Text";
-
-enum Panel {
-  Builtin,
-  Hex,
-}
-
-type Props = {
-  width: number;
-  activeColor: string;
-  onSelect: (color: string) => void;
-};
-
-const ColorPicker = ({ width, activeColor, onSelect }: Props) => {
-  const [localValue, setLocalValue] = React.useState(activeColor);
-
-  const [panel, setPanel] = React.useState(
-    colorPalette.includes(activeColor) ? Panel.Builtin : Panel.Hex
-  );
-
-  const handleSwitcherClick = React.useCallback(() => {
-    setPanel(panel === Panel.Builtin ? Panel.Hex : Panel.Builtin);
-  }, [panel, setPanel]);
-
-  const isLargeMobile = width > breakpoints.mobileLarge + 12; // 12px for the Container padding
-
-  React.useEffect(() => {
-    setLocalValue(activeColor);
-    setPanel(colorPalette.includes(activeColor) ? Panel.Builtin : Panel.Hex);
-  }, [activeColor]);
-
-  return isLargeMobile ? (
-    <Container justify="space-between">
-      <LargeMobileBuiltinColors activeColor={activeColor} onClick={onSelect} />
-      <LargeMobileCustomColor
-        value={localValue}
-        setLocalValue={setLocalValue}
-        onValidHex={onSelect}
-      />
-    </Container>
-  ) : (
-    <Container gap={12}>
-      <PanelSwitcher align="center">
-        <SwitcherButton panel={panel} onClick={handleSwitcherClick}>
-          {panel === Panel.Builtin ? "#" : <BackIcon />}
-        </SwitcherButton>
-      </PanelSwitcher>
-      {panel === Panel.Builtin ? (
-        <BuiltinColors activeColor={activeColor} onClick={onSelect} />
-      ) : (
-        <CustomColor
-          value={localValue}
-          setLocalValue={setLocalValue}
-          onValidHex={onSelect}
-        />
-      )}
-    </Container>
-  );
-};
-
-const BuiltinColors = ({
-  activeColor,
-  onClick,
-  className,
-}: {
-  activeColor: string;
-  onClick: (color: string) => void;
-  className?: string;
-}) => (
-  <Flex className={className} justify="space-between" align="center" auto>
-    {colorPalette.map((color) => (
-      <ColorButton
-        key={color}
-        $color={color}
-        $active={color === activeColor}
-        onClick={() => onClick(color)}
-      >
-        <Selected />
-      </ColorButton>
-    ))}
-  </Flex>
-);
-
-const CustomColor = ({
-  value,
-  setLocalValue,
-  onValidHex,
-  className,
-}: {
-  value: string;
-  setLocalValue: (value: string) => void;
-  onValidHex: (color: string) => void;
-  className?: string;
-}) => {
-  const hasHexChars = React.useCallback(
-    (color: string) => /(^#[0-9A-F]{1,6}$)/i.test(color),
-    []
-  );
-
-  const handleInputChange = React.useCallback(
-    (ev: React.ChangeEvent<HTMLInputElement>) => {
-      const val = ev.target.value;
-
-      if (val === "" || val === "#") {
-        setLocalValue("#");
-        return;
-      }
-
-      const uppercasedVal = val.toUpperCase();
-
-      if (hasHexChars(uppercasedVal)) {
-        setLocalValue(uppercasedVal);
-      }
-
-      if (validateColorHex(uppercasedVal)) {
-        onValidHex(uppercasedVal);
-      }
-    },
-    [setLocalValue, hasHexChars, onValidHex]
-  );
-
-  return (
-    <Flex className={className} align="center" gap={8}>
-      <Text type="tertiary" size="small">
-        HEX
-      </Text>
-      <CustomColorInput
-        maxLength={7}
-        value={value}
-        onChange={handleInputChange}
-      />
-    </Flex>
-  );
-};
-
-const Container = styled(Flex)`
-  height: 48px;
-  padding: 8px 12px;
-  border-bottom: 1px solid ${s("inputBorder")};
-`;
-
-const Selected = styled.span`
-  width: 10px;
-  height: 5px;
-  border-left: 2px solid white;
-  border-bottom: 2px solid white;
-  transform: translateY(-25%) rotate(-45deg);
-`;
-
-const ColorButton = styled(NudeButton)<{ $color: string; $active: boolean }>`
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  background-color: ${({ $color }) => $color};
-
-  &: ${hover} {
-    outline: 2px solid ${s("menuBackground")} !important;
-    box-shadow: ${({ $color }) => `0px 0px 3px 3px ${$color}`};
-  }
-
-  & ${Selected} {
-    display: ${({ $active }) => ($active ? "block" : "none")};
-  }
-`;
-
-const PanelSwitcher = styled(Flex)`
-  width: 40px;
-  border-right: 1px solid ${s("inputBorder")};
-`;
-
-const SwitcherButton = styled(NudeButton)<{ panel: Panel }>`
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 14px;
-  border: 1px solid ${s("inputBorder")};
-  transition: all 100ms ease-in-out;
-
-  &: ${hover} {
-    border-color: ${s("inputBorderFocused")};
-  }
-`;
-
-const LargeMobileBuiltinColors = styled(BuiltinColors)`
-  max-width: 380px;
-  padding-right: 8px;
-`;
-
-const LargeMobileCustomColor = styled(CustomColor)`
-  padding-left: 8px;
-  border-left: 1px solid ${s("inputBorder")};
-  width: 120px;
-`;
-
-const CustomColorInput = styled.input.attrs(() => ({
-  type: "text",
-  autocomplete: "off",
-}))`
-  font-size: 14px;
-  color: ${s("textSecondary")};
-  background: transparent;
-  border: 0;
-  outline: 0;
-`;
-
-export default ColorPicker;

app/components/IconPicker/components/EmojiPanel.tsx

@@ -1,243 +0,0 @@
-import concat from "lodash/concat";
-import React from "react";
-import { useTranslation } from "react-i18next";
-import styled from "styled-components";
-import { EmojiCategory, EmojiSkinTone, IconType } from "@shared/types";
-import { getEmojis, getEmojisWithCategory, search } from "@shared/utils/emoji";
-import Flex from "~/components/Flex";
-import InputSearch from "~/components/InputSearch";
-import usePersistedState from "~/hooks/usePersistedState";
-import {
-  FREQUENTLY_USED_COUNT,
-  DisplayCategory,
-  emojiSkinToneKey,
-  emojisFreqKey,
-  lastEmojiKey,
-  sortFrequencies,
-} from "../utils";
-import GridTemplate, { DataNode } from "./GridTemplate";
-import SkinTonePicker from "./SkinTonePicker";
-
-const GRID_HEIGHT = 410;
-
-const useEmojiState = () => {
-  const [emojiSkinTone, setEmojiSkinTone] = usePersistedState<EmojiSkinTone>(
-    emojiSkinToneKey,
-    EmojiSkinTone.Default
-  );
-  const [emojisFreq, setEmojisFreq] = usePersistedState<Record<string, number>>(
-    emojisFreqKey,
-    {}
-  );
-  const [lastEmoji, setLastEmoji] = usePersistedState<string | undefined>(
-    lastEmojiKey,
-    undefined
-  );
-
-  const incrementEmojiCount = React.useCallback(
-    (emoji: string) => {
-      emojisFreq[emoji] = (emojisFreq[emoji] ?? 0) + 1;
-      setEmojisFreq({ ...emojisFreq });
-      setLastEmoji(emoji);
-    },
-    [emojisFreq, setEmojisFreq, setLastEmoji]
-  );
-
-  const getFreqEmojis = React.useCallback(() => {
-    const freqs = Object.entries(emojisFreq);
-
-    if (freqs.length > FREQUENTLY_USED_COUNT.Track) {
-      sortFrequencies(freqs).splice(FREQUENTLY_USED_COUNT.Track);
-      setEmojisFreq(Object.fromEntries(freqs));
-    }
-
-    const emojis = sortFrequencies(freqs)
-      .slice(0, FREQUENTLY_USED_COUNT.Get)
-      .map(([emoji, _]) => emoji);
-
-    const isLastPresent = emojis.includes(lastEmoji ?? "");
-    if (lastEmoji && !isLastPresent) {
-      emojis.pop();
-      emojis.push(lastEmoji);
-    }
-
-    return emojis;
-  }, [emojisFreq, setEmojisFreq, lastEmoji]);
-
-  return {
-    emojiSkinTone,
-    setEmojiSkinTone,
-    incrementEmojiCount,
-    getFreqEmojis,
-  };
-};
-
-type Props = {
-  panelWidth: number;
-  query: string;
-  panelActive: boolean;
-  height?: number;
-  onEmojiChange: (emoji: string) => void;
-  onQueryChange: (query: string) => void;
-};
-
-const EmojiPanel = ({
-  panelWidth,
-  query,
-  panelActive,
-  onEmojiChange,
-  onQueryChange,
-  height = GRID_HEIGHT,
-}: Props) => {
-  const { t } = useTranslation();
-
-  const searchRef = React.useRef<HTMLInputElement | null>(null);
-  const scrollableRef = React.useRef<HTMLDivElement | null>(null);
-
-  const {
-    emojiSkinTone: skinTone,
-    setEmojiSkinTone,
-    incrementEmojiCount,
-    getFreqEmojis,
-  } = useEmojiState();
-
-  const freqEmojis = React.useMemo(() => getFreqEmojis(), [getFreqEmojis]);
-
-  const handleFilter = React.useCallback(
-    (event: React.ChangeEvent<HTMLInputElement>) => {
-      onQueryChange(event.target.value);
-    },
-    [onQueryChange]
-  );
-
-  const handleSkinChange = React.useCallback(
-    (emojiSkinTone: EmojiSkinTone) => {
-      setEmojiSkinTone(emojiSkinTone);
-    },
-    [setEmojiSkinTone]
-  );
-
-  const handleEmojiSelection = React.useCallback(
-    ({ id, value }: { id: string; value: string }) => {
-      onEmojiChange(value);
-      incrementEmojiCount(id);
-    },
-    [onEmojiChange, incrementEmojiCount]
-  );
-
-  const isSearch = query !== "";
-  const templateData: DataNode[] = isSearch
-    ? getSearchResults({
-        query,
-        skinTone,
-      })
-    : getAllEmojis({
-        skinTone,
-        freqEmojis,
-      });
-
-  React.useEffect(() => {
-    if (scrollableRef.current) {
-      scrollableRef.current.scrollTop = 0;
-    }
-    searchRef.current?.focus();
-  }, [panelActive]);
-
-  return (
-    <Flex column>
-      <UserInputContainer align="center" gap={12}>
-        <StyledInputSearch
-          ref={searchRef}
-          value={query}
-          placeholder={`${t("Search emoji")}…`}
-          onChange={handleFilter}
-        />
-        <SkinTonePicker skinTone={skinTone} onChange={handleSkinChange} />
-      </UserInputContainer>
-      <GridTemplate
-        ref={scrollableRef}
-        width={panelWidth}
-        height={height - 48}
-        data={templateData}
-        onIconSelect={handleEmojiSelection}
-      />
-    </Flex>
-  );
-};
-
-const getSearchResults = ({
-  query,
-  skinTone,
-}: {
-  query: string;
-  skinTone: EmojiSkinTone;
-}): DataNode[] => {
-  const emojis = search({ query, skinTone });
-  return [
-    {
-      category: DisplayCategory.Search,
-      icons: emojis.map((emoji) => ({
-        type: IconType.Emoji,
-        id: emoji.id,
-        value: emoji.value,
-      })),
-    },
-  ];
-};
-
-const getAllEmojis = ({
-  skinTone,
-  freqEmojis,
-}: {
-  skinTone: EmojiSkinTone;
-  freqEmojis: string[];
-}): DataNode[] => {
-  const emojisWithCategory = getEmojisWithCategory({ skinTone });
-
-  const getFrequentEmojis = (): DataNode => {
-    const emojis = getEmojis({ ids: freqEmojis, skinTone });
-    return {
-      category: DisplayCategory.Frequent,
-      icons: emojis.map((emoji) => ({
-        type: IconType.Emoji,
-        id: emoji.id,
-        value: emoji.value,
-      })),
-    };
-  };
-
-  const getCategoryData = (emojiCategory: EmojiCategory): DataNode => {
-    const emojis = emojisWithCategory[emojiCategory] ?? [];
-    return {
-      category: emojiCategory,
-      icons: emojis.map((emoji) => ({
-        type: IconType.Emoji,
-        id: emoji.id,
-        value: emoji.value,
-      })),
-    };
-  };
-
-  return concat(
-    getFrequentEmojis(),
-    getCategoryData(EmojiCategory.People),
-    getCategoryData(EmojiCategory.Nature),
-    getCategoryData(EmojiCategory.Foods),
-    getCategoryData(EmojiCategory.Activity),
-    getCategoryData(EmojiCategory.Places),
-    getCategoryData(EmojiCategory.Objects),
-    getCategoryData(EmojiCategory.Symbols),
-    getCategoryData(EmojiCategory.Flags)
-  );
-};
-
-const UserInputContainer = styled(Flex)`
-  height: 48px;
-  padding: 6px 12px 0px;
-`;
-
-const StyledInputSearch = styled(InputSearch)`
-  flex-grow: 1;
-`;
-
-export default EmojiPanel;

app/components/IconPicker/components/Grid.tsx

@@ -1,62 +0,0 @@
-import React from "react";
-import { FixedSizeList, ListChildComponentProps } from "react-window";
-import styled from "styled-components";
-
-type Props = {
-  width: number;
-  height: number;
-  data: React.ReactNode[][];
-  columns: number;
-  itemWidth: number;
-};
-
-const Grid = (
-  { width, height, data, columns, itemWidth }: Props,
-  ref: React.Ref<HTMLDivElement>
-) => (
-  <Container
-    outerRef={ref}
-    width={width}
-    height={height}
-    itemCount={data.length}
-    itemSize={itemWidth}
-    itemData={{ data, columns }}
-  >
-    {Row}
-  </Container>
-);
-
-type RowProps = {
-  data: React.ReactNode[][];
-  columns: number;
-};
-
-const Row = ({ index, style, data }: ListChildComponentProps<RowProps>) => {
-  const { data: rows, columns } = data;
-  const row = rows[index];
-
-  return (
-    <RowContainer style={style} columns={columns}>
-      {row}
-    </RowContainer>
-  );
-};
-
-const Container = styled(FixedSizeList<RowProps>)`
-  padding: 0px 12px;
-  overflow-x: hidden !important;
-
-  // Needed for the absolutely positioned children
-  // to respect the VirtualList's padding
-  & > div {
-    position: relative;
-  }
-`;
-
-const RowContainer = styled.div<{ columns: number }>`
-  display: grid;
-  grid-template-columns: ${({ columns }) => `repeat(${columns}, 1fr)`};
-  align-content: center;
-`;
-
-export default React.forwardRef(Grid);

app/components/IconPicker/components/GridTemplate.tsx

@@ -1,122 +0,0 @@
-import chunk from "lodash/chunk";
-import compact from "lodash/compact";
-import React from "react";
-import styled from "styled-components";
-import { IconType } from "@shared/types";
-import { IconLibrary } from "@shared/utils/IconLibrary";
-import { Emoji } from "~/components/Emoji";
-import Text from "~/components/Text";
-import { TRANSLATED_CATEGORIES } from "../utils";
-import Grid from "./Grid";
-import { IconButton } from "./IconButton";
-
-/**
- * icon/emoji size is 24px; and we add 4px padding on all sides,
- */
-const BUTTON_SIZE = 32;
-
-type OutlineNode = {
-  type: IconType.SVG;
-  name: string;
-  color: string;
-  initial: string;
-  delay: number;
-};
-
-type EmojiNode = {
-  type: IconType.Emoji;
-  id: string;
-  value: string;
-};
-
-export type DataNode = {
-  category: keyof typeof TRANSLATED_CATEGORIES;
-  icons: (OutlineNode | EmojiNode)[];
-};
-
-type Props = {
-  width: number;
-  height: number;
-  data: DataNode[];
-  onIconSelect: ({ id, value }: { id: string; value: string }) => void;
-};
-
-const GridTemplate = (
-  { width, height, data, onIconSelect }: Props,
-  ref: React.Ref<HTMLDivElement>
-) => {
-  // 24px padding for the Grid Container
-  const itemsPerRow = Math.floor((width - 24) / BUTTON_SIZE);
-
-  const gridItems = compact(
-    data.flatMap((node) => {
-      if (node.icons.length === 0) {
-        return [];
-      }
-
-      const category = (
-        <CategoryName
-          key={node.category}
-          type="tertiary"
-          size="xsmall"
-          weight="bold"
-        >
-          {TRANSLATED_CATEGORIES[node.category]}
-        </CategoryName>
-      );
-
-      const items = node.icons.map((item) => {
-        if (item.type === IconType.SVG) {
-          return (
-            <IconButton
-              key={item.name}
-              onClick={() => onIconSelect({ id: item.name, value: item.name })}
-              style={{ "--delay": `${item.delay}ms` } as React.CSSProperties}
-            >
-              <Icon as={IconLibrary.getComponent(item.name)} color={item.color}>
-                {item.initial}
-              </Icon>
-            </IconButton>
-          );
-        }
-
-        return (
-          <IconButton
-            key={item.id}
-            onClick={() => onIconSelect({ id: item.id, value: item.value })}
-          >
-            <Emoji width={24} height={24}>
-              {item.value}
-            </Emoji>
-          </IconButton>
-        );
-      });
-
-      const chunks = chunk(items, itemsPerRow);
-      return [[category], ...chunks];
-    })
-  );
-
-  return (
-    <Grid
-      ref={ref}
-      width={width}
-      height={height}
-      data={gridItems}
-      columns={itemsPerRow}
-      itemWidth={BUTTON_SIZE}
-    />
-  );
-};
-
-const CategoryName = styled(Text)`
-  grid-column: 1 / -1;
-  padding-left: 6px;
-`;
-
-const Icon = styled.svg`
-  transition: color 150ms ease-in-out, fill 150ms ease-in-out;
-  transition-delay: var(--delay);
-`;
-
-export default React.forwardRef(GridTemplate);

app/components/IconPicker/components/IconButton.tsx

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

app/components/IconPicker/components/IconPanel.tsx

@@ -1,200 +0,0 @@
-import React from "react";
-import { useTranslation } from "react-i18next";
-import styled from "styled-components";
-import { IconType } from "@shared/types";
-import { IconLibrary } from "@shared/utils/IconLibrary";
-import Flex from "~/components/Flex";
-import InputSearch from "~/components/InputSearch";
-import usePersistedState from "~/hooks/usePersistedState";
-import {
-  FREQUENTLY_USED_COUNT,
-  DisplayCategory,
-  iconsFreqKey,
-  lastIconKey,
-  sortFrequencies,
-} from "../utils";
-import ColorPicker from "./ColorPicker";
-import GridTemplate, { DataNode } from "./GridTemplate";
-
-const IconNames = Object.keys(IconLibrary.mapping);
-const TotalIcons = IconNames.length;
-
-/**
- * This is needed as a constant for react-window.
- * Calculated from the heights of TabPanel, ColorPicker and InputSearch.
- */
-const GRID_HEIGHT = 314;
-
-const useIconState = () => {
-  const [iconsFreq, setIconsFreq] = usePersistedState<Record<string, number>>(
-    iconsFreqKey,
-    {}
-  );
-  const [lastIcon, setLastIcon] = usePersistedState<string | undefined>(
-    lastIconKey,
-    undefined
-  );
-
-  const incrementIconCount = React.useCallback(
-    (icon: string) => {
-      iconsFreq[icon] = (iconsFreq[icon] ?? 0) + 1;
-      setIconsFreq({ ...iconsFreq });
-      setLastIcon(icon);
-    },
-    [iconsFreq, setIconsFreq, setLastIcon]
-  );
-
-  const getFreqIcons = React.useCallback(() => {
-    const freqs = Object.entries(iconsFreq);
-
-    if (freqs.length > FREQUENTLY_USED_COUNT.Track) {
-      sortFrequencies(freqs).splice(FREQUENTLY_USED_COUNT.Track);
-      setIconsFreq(Object.fromEntries(freqs));
-    }
-
-    const icons = sortFrequencies(freqs)
-      .slice(0, FREQUENTLY_USED_COUNT.Get)
-      .map(([icon, _]) => icon);
-
-    const isLastPresent = icons.includes(lastIcon ?? "");
-    if (lastIcon && !isLastPresent) {
-      icons.pop();
-      icons.push(lastIcon);
-    }
-
-    return icons;
-  }, [iconsFreq, setIconsFreq, lastIcon]);
-
-  return {
-    incrementIconCount,
-    getFreqIcons,
-  };
-};
-
-type Props = {
-  panelWidth: number;
-  initial: string;
-  color: string;
-  query: string;
-  panelActive: boolean;
-  onIconChange: (icon: string) => void;
-  onColorChange: (icon: string) => void;
-  onQueryChange: (query: string) => void;
-};
-
-const IconPanel = ({
-  panelWidth,
-  initial,
-  color,
-  query,
-  panelActive,
-  onIconChange,
-  onColorChange,
-  onQueryChange,
-}: Props) => {
-  const { t } = useTranslation();
-
-  const searchRef = React.useRef<HTMLInputElement | null>(null);
-  const scrollableRef = React.useRef<HTMLDivElement | null>(null);
-
-  const { incrementIconCount, getFreqIcons } = useIconState();
-
-  const freqIcons = React.useMemo(() => getFreqIcons(), [getFreqIcons]);
-  const totalFreqIcons = freqIcons.length;
-
-  const filteredIcons = React.useMemo(
-    () => IconLibrary.findIcons(query),
-    [query]
-  );
-
-  const isSearch = query !== "";
-  const category = isSearch ? DisplayCategory.Search : DisplayCategory.All;
-  const delayPerIcon = 250 / (TotalIcons + totalFreqIcons);
-
-  const handleFilter = React.useCallback(
-    (event: React.ChangeEvent<HTMLInputElement>) => {
-      onQueryChange(event.target.value);
-    },
-    [onQueryChange]
-  );
-
-  const handleIconSelection = React.useCallback(
-    ({ id, value }: { id: string; value: string }) => {
-      onIconChange(value);
-      incrementIconCount(id);
-    },
-    [onIconChange, incrementIconCount]
-  );
-
-  const baseIcons: DataNode = {
-    category,
-    icons: filteredIcons.map((name, index) => ({
-      type: IconType.SVG,
-      name,
-      color,
-      initial,
-      delay: Math.round((index + totalFreqIcons) * delayPerIcon),
-      onClick: handleIconSelection,
-    })),
-  };
-
-  const templateData: DataNode[] = isSearch
-    ? [baseIcons]
-    : [
-        {
-          category: DisplayCategory.Frequent,
-          icons: freqIcons.map((name, index) => ({
-            type: IconType.SVG,
-            name,
-            color,
-            initial,
-            delay: Math.round((index + totalFreqIcons) * delayPerIcon),
-            onClick: handleIconSelection,
-          })),
-        },
-        baseIcons,
-      ];
-
-  React.useEffect(() => {
-    if (scrollableRef.current) {
-      scrollableRef.current.scrollTop = 0;
-    }
-    searchRef.current?.focus();
-  }, [panelActive]);
-
-  return (
-    <Flex column>
-      <InputSearchContainer align="center">
-        <StyledInputSearch
-          ref={searchRef}
-          value={query}
-          placeholder={`${t("Search icons")}…`}
-          onChange={handleFilter}
-        />
-      </InputSearchContainer>
-      <ColorPicker
-        width={panelWidth}
-        activeColor={color}
-        onSelect={onColorChange}
-      />
-      <GridTemplate
-        ref={scrollableRef}
-        width={panelWidth}
-        height={GRID_HEIGHT}
-        data={templateData}
-        onIconSelect={handleIconSelection}
-      />
-    </Flex>
-  );
-};
-
-const InputSearchContainer = styled(Flex)`
-  height: 48px;
-  padding: 6px 12px 0px;
-`;
-
-const StyledInputSearch = styled(InputSearch)`
-  flex-grow: 1;
-`;
-
-export default IconPanel;

app/components/IconPicker/components/PopoverButton.tsx

@@ -1,19 +0,0 @@
-import styled, { css } from "styled-components";
-import { s, hover } from "@shared/styles";
-import NudeButton from "~/components/NudeButton";
-
-export const PopoverButton = styled(NudeButton)<{ $borderOnHover?: boolean }>`
-  &: ${hover},
-  &:active,
-  &[aria-expanded= "true"] {
-    opacity: 1 !important;
-
-    ${({ $borderOnHover }) =>
-      $borderOnHover &&
-      css`
-        background: ${s("buttonNeutralBackground")};
-        box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px,
-          ${s("buttonNeutralBorder")} 0 0 0 1px inset;
-      `};
-  }
-`;

app/components/IconPicker/components/SkinTonePicker.tsx

@@ -1,93 +0,0 @@
-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 { 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 { IconButton } from "./IconButton";
-
-const SkinTonePicker = ({
-  skinTone,
-  onChange,
-}: {
-  skinTone: EmojiSkinTone;
-  onChange: (skin: EmojiSkinTone) => void;
-}) => {
-  const { t } = useTranslation();
-
-  const handEmojiVariants = React.useMemo(
-    () => getEmojiVariants({ id: "hand" }),
-    []
-  );
-
-  const menu = useMenuState({
-    placement: "bottom-end",
-  });
-
-  const handleSkinClick = React.useCallback(
-    (emojiSkin) => {
-      menu.hide();
-      onChange(emojiSkin);
-    },
-    [menu, onChange]
-  );
-
-  const menuItems = React.useMemo(
-    () =>
-      Object.entries(handEmojiVariants).map(([eskin, emoji]) => (
-        <MenuItem {...menu} key={emoji.value}>
-          {(menuprops) => (
-            <IconButton {...menuprops} onClick={() => handleSkinClick(eskin)}>
-              <Emoji width={24} height={24}>
-                {emoji.value}
-              </Emoji>
-            </IconButton>
-          )}
-        </MenuItem>
-      )),
-    [menu, handEmojiVariants, handleSkinClick]
-  );
-
-  return (
-    <>
-      <MenuButton {...menu}>
-        {(props) => (
-          <StyledMenuButton
-            {...props}
-            aria-label={t("Choose default skin tone")}
-          >
-            {handEmojiVariants[skinTone]!.value}
-          </StyledMenuButton>
-        )}
-      </MenuButton>
-      <Menu {...menu} aria-label={t("Choose default skin tone")}>
-        {(props) => <MenuContainer {...props}>{menuItems}</MenuContainer>}
-      </Menu>
-    </>
-  );
-};
-
-const MenuContainer = styled(Flex)`
-  z-index: ${depths.menu};
-  padding: 4px;
-  border-radius: 4px;
-  background: ${s("menuBackground")};
-  box-shadow: ${s("menuShadow")};
-`;
-
-const StyledMenuButton = styled(NudeButton)`
-  width: 32px;
-  height: 32px;
-  border: 1px solid ${s("inputBorder")};
-  padding: 4px;
-
-  &: ${hover} {
-    border: 1px solid ${s("inputBorderFocused")};
-  }
-`;
-
-export default SkinTonePicker;

app/components/IconPicker/index.tsx

@@ -1,312 +0,0 @@
-import { SmileyIcon } from "outline-icons";
-import * as React from "react";
-import { useTranslation } from "react-i18next";
-import {
-  PopoverDisclosure,
-  Tab,
-  TabList,
-  TabPanel,
-  usePopoverState,
-  useTabState,
-} from "reakit";
-import styled, { css } from "styled-components";
-import Icon from "@shared/components/Icon";
-import { s, hover } 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 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 EmojiPanel from "./components/EmojiPanel";
-import IconPanel from "./components/IconPanel";
-import { PopoverButton } from "./components/PopoverButton";
-
-const TAB_NAMES = {
-  Icon: "icon",
-  Emoji: "emoji",
-} as const;
-
-const POPOVER_WIDTH = 408;
-
-type Props = {
-  icon: string | null;
-  color: string;
-  size?: number;
-  initial?: string;
-  className?: string;
-  popoverPosition: "bottom-start" | "right";
-  allowDelete?: boolean;
-  borderOnHover?: boolean;
-  onChange: (icon: string | null, color: string | null) => void;
-  onOpen?: () => void;
-  onClose?: () => void;
-};
-
-const IconPicker = ({
-  icon,
-  color,
-  size = 24,
-  initial,
-  className,
-  popoverPosition,
-  allowDelete,
-  onChange,
-  onOpen,
-  onClose,
-  borderOnHover,
-}: Props) => {
-  const { t } = useTranslation();
-
-  const { width: windowWidth } = useWindowSize();
-  const isMobile = useMobile();
-
-  const [query, setQuery] = React.useState("");
-  const [chosenColor, setChosenColor] = React.useState(color);
-  const contentRef = React.useRef<HTMLDivElement | null>(null);
-
-  const iconType = determineIconType(icon);
-  const defaultTab = React.useMemo(
-    () =>
-      iconType === IconType.Emoji ? TAB_NAMES["Emoji"] : TAB_NAMES["Icon"],
-    [iconType]
-  );
-
-  const popover = usePopoverState({
-    placement: popoverPosition,
-    modal: true,
-    unstable_offset: [0, 0],
-  });
-  const { hide, show, visible } = popover;
-  const tab = useTabState({ selectedId: defaultTab });
-  const previouslyVisible = usePrevious(popover.visible);
-
-  const popoverWidth = isMobile ? windowWidth : POPOVER_WIDTH;
-  // In mobile, popover is absolutely positioned to leave 8px on both sides.
-  const panelWidth = isMobile ? windowWidth - 16 : popoverWidth;
-
-  const resetDefaultTab = React.useCallback(() => {
-    tab.select(defaultTab);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [defaultTab]);
-
-  const handleIconChange = React.useCallback(
-    (ic: string) => {
-      hide();
-      const icType = determineIconType(ic);
-      const finalColor = icType === IconType.SVG ? chosenColor : null;
-      onChange(ic, finalColor);
-    },
-    [hide, onChange, chosenColor]
-  );
-
-  const handleIconColorChange = React.useCallback(
-    (c: string) => {
-      setChosenColor(c);
-
-      const icType = determineIconType(icon);
-      // Outline icon set; propagate color change
-      if (icType === IconType.SVG) {
-        onChange(icon, c);
-      }
-    },
-    [icon, onChange]
-  );
-
-  const handleIconRemove = React.useCallback(() => {
-    hide();
-    onChange(null, null);
-  }, [hide, onChange]);
-
-  const handlePopoverButtonClick = React.useCallback(
-    (ev: React.MouseEvent) => {
-      ev.stopPropagation();
-      if (visible) {
-        hide();
-      } else {
-        show();
-      }
-    },
-    [hide, show, visible]
-  );
-
-  // Popover open effect
-  React.useEffect(() => {
-    if (visible && !previouslyVisible) {
-      onOpen?.();
-    } else if (!visible && previouslyVisible) {
-      onClose?.();
-      setQuery("");
-      resetDefaultTab();
-    }
-  }, [visible, previouslyVisible, onOpen, onClose, resetDefaultTab]);
-
-  // 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) => (
-          <PopoverButton
-            {...props}
-            aria-label={t("Show menu")}
-            className={className}
-            size={size}
-            onClick={handlePopoverButtonClick}
-            $borderOnHover={borderOnHover}
-          >
-            {iconType && icon ? (
-              <Icon value={icon} color={color} size={size} initial={initial} />
-            ) : (
-              <StyledSmileyIcon color={theme.placeholder} size={size} />
-            )}
-          </PopoverButton>
-        )}
-      </PopoverDisclosure>
-      <Popover
-        {...popover}
-        ref={contentRef}
-        width={popoverWidth}
-        shrink
-        aria-label={t("Icon Picker")}
-        onClick={(e) => e.stopPropagation()}
-        hideOnClickOutside={false}
-      >
-        <>
-          <TabActionsWrapper justify="space-between" align="center">
-            <TabList {...tab}>
-              <StyledTab
-                {...tab}
-                id={TAB_NAMES["Icon"]}
-                aria-label={t("Icons")}
-                $active={tab.selectedId === TAB_NAMES["Icon"]}
-              >
-                {t("Icons")}
-              </StyledTab>
-              <StyledTab
-                {...tab}
-                id={TAB_NAMES["Emoji"]}
-                aria-label={t("Emojis")}
-                $active={tab.selectedId === TAB_NAMES["Emoji"]}
-              >
-                {t("Emojis")}
-              </StyledTab>
-            </TabList>
-            {allowDelete && icon && (
-              <RemoveButton onClick={handleIconRemove}>
-                {t("Remove")}
-              </RemoveButton>
-            )}
-          </TabActionsWrapper>
-          <StyledTabPanel {...tab}>
-            <IconPanel
-              panelWidth={panelWidth}
-              initial={initial ?? "?"}
-              color={chosenColor}
-              query={query}
-              panelActive={
-                popover.visible && tab.selectedId === TAB_NAMES["Icon"]
-              }
-              onIconChange={handleIconChange}
-              onColorChange={handleIconColorChange}
-              onQueryChange={setQuery}
-            />
-          </StyledTabPanel>
-          <StyledTabPanel {...tab}>
-            <EmojiPanel
-              panelWidth={panelWidth}
-              query={query}
-              panelActive={
-                popover.visible && tab.selectedId === TAB_NAMES["Emoji"]
-              }
-              onEmojiChange={handleIconChange}
-              onQueryChange={setQuery}
-            />
-          </StyledTabPanel>
-        </>
-      </Popover>
-    </>
-  );
-};
-
-const StyledSmileyIcon = styled(SmileyIcon)`
-  flex-shrink: 0;
-
-  @media print {
-    display: none;
-  }
-`;
-
-const RemoveButton = styled(NudeButton)`
-  width: auto;
-  font-weight: 500;
-  font-size: 14px;
-  color: ${s("textTertiary")};
-  padding: 8px 12px;
-  transition: color 100ms ease-in-out;
-  &: ${hover} {
-    color: ${s("textSecondary")};
-  }
-`;
-
-const TabActionsWrapper = styled(Flex)`
-  padding-left: 12px;
-  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;
-  padding: 8px 12px;
-  user-select: none;
-  color: ${({ $active }) => ($active ? s("textSecondary") : s("textTertiary"))};
-  transition: color 100ms ease-in-out;
-
-  &: ${hover} {
-    color: ${s("textSecondary")};
-  }
-
-  ${({ $active }) =>
-    $active &&
-    css`
-      &:after {
-        content: "";
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        height: 1px;
-        background: ${s("textSecondary")};
-      }
-    `}
-`;
-
-const StyledTabPanel = styled(TabPanel)`
-  height: 410px;
-  overflow-y: auto;
-`;
-
-export default React.memo(IconPicker);

app/components/IconPicker/utils.ts

@@ -1,50 +0,0 @@
-import i18next from "i18next";
-
-export enum DisplayCategory {
-  All = "All",
-  Frequent = "Frequent",
-  Search = "Search",
-}
-
-export const TRANSLATED_CATEGORIES = {
-  All: i18next.t("All"),
-  Frequent: i18next.t("Frequently Used"),
-  Search: i18next.t("Search Results"),
-  People: i18next.t("Smileys & People"),
-  Nature: i18next.t("Animals & Nature"),
-  Foods: i18next.t("Food & Drink"),
-  Activity: i18next.t("Activity"),
-  Places: i18next.t("Travel & Places"),
-  Objects: i18next.t("Objects"),
-  Symbols: i18next.t("Symbols"),
-  Flags: i18next.t("Flags"),
-};
-
-export const FREQUENTLY_USED_COUNT = {
-  Get: 24,
-  Track: 30,
-};
-
-const STORAGE_KEYS = {
-  Base: "icon-state",
-  EmojiSkinTone: "emoji-skintone",
-  IconsFrequency: "icons-freq",
-  EmojisFrequency: "emojis-freq",
-  LastIcon: "last-icon",
-  LastEmoji: "last-emoji",
-};
-
-const getStorageKey = (key: string) => `${STORAGE_KEYS.Base}.${key}`;
-
-export const emojiSkinToneKey = getStorageKey(STORAGE_KEYS.EmojiSkinTone);
-
-export const iconsFreqKey = getStorageKey(STORAGE_KEYS.IconsFrequency);
-
-export const emojisFreqKey = getStorageKey(STORAGE_KEYS.EmojisFrequency);
-
-export const lastIconKey = getStorageKey(STORAGE_KEYS.LastIcon);
-
-export const lastEmojiKey = getStorageKey(STORAGE_KEYS.LastEmoji);
-
-export const sortFrequencies = (freqs: [string, number][]) =>
-  freqs.sort((a, b) => (a[1] >= b[1] ? -1 : 1));

app/components/Icons/CircleIcon.tsx

@@ -1,31 +0,0 @@
-import * as React from "react";
-
-type Props = {
-  /** The size of the icon, 24px is default to match standard icons */
-  size?: number;
-  /** The color of the icon, defaults to the current text color */
-  color?: string;
-  /** If true, the icon will retain its color in selected menus and other places that attempt to override it */
-  retainColor?: boolean;
-};
-
-export default function CircleIcon({
-  size = 24,
-  color = "currentColor",
-  retainColor,
-  ...rest
-}: Props) {
-  return (
-    <svg
-      fill={color}
-      width={size}
-      height={size}
-      viewBox="0 0 24 24"
-      version="1.1"
-      style={retainColor ? { fill: color } : undefined}
-      {...rest}
-    >
-      <circle xmlns="http://www.w3.org/2000/svg" cx="12" cy="12" r="8" />
-    </svg>
-  );
-}

app/components/Icons/CollectionIcon.tsx

@@ -1,11 +1,11 @@
 import { observer } from "mobx-react";
-import { CollectionIcon, PrivateCollectionIcon } from "outline-icons";
+import { CollectionIcon } 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 { IconLibrary } from "@shared/utils/IconLibrary";
 import Collection from "~/models/Collection";
 import useStores from "~/hooks/useStores";
+import Logger from "~/utils/Logger";
 
 type Props = {
   /** The collection to show an icon for */
@@ -16,7 +16,6 @@ type Props = {
   size?: number;
   /** The color of the icon, defaults to the collection color */
   color?: string;
-  className?: string;
 };
 
 function ResolvedCollectionIcon({
@@ -24,45 +23,35 @@ function ResolvedCollectionIcon({
   color: inputColor,
   expanded,
   size,
-  className,
 }: Props) {
   const { ui } = useStores();
 
-  if (!collection.icon || collection.icon === "collection") {
-    // If the chosen icon color is very dark then we invert it in dark mode
-    // otherwise it will be impossible to see against the dark background.
-    const collectionColor = collection.color ?? colorPalette[0];
-    const color =
-      inputColor ||
-      (ui.resolvedTheme === "dark" && collectionColor !== "currentColor"
-        ? getLuminance(collectionColor) > 0.09
-          ? collectionColor
-          : "currentColor"
-        : collectionColor);
+  // If the chosen icon color is very dark then we invert it in dark mode
+  // otherwise it will be impossible to see against the dark background.
+  const color =
+    inputColor ||
+    (ui.resolvedTheme === "dark" && collection.color !== "currentColor"
+      ? getLuminance(collection.color) > 0.09
+        ? collection.color
+        : "currentColor"
+      : collection.color);
 
-    const Component = collection.isPrivate
-      ? PrivateCollectionIcon
-      : CollectionIcon;
-    return (
-      <Component
-        color={color}
-        expanded={expanded}
-        size={size}
-        className={className}
-      />
-    );
+  if (collection.icon && collection.icon !== "collection") {
+    try {
+      const Component = IconLibrary.getComponent(collection.icon);
+      return (
+        <Component color={color} size={size}>
+          {collection.initial}
+        </Component>
+      );
+    } catch (error) {
+      Logger.warn("Failed to render custom icon", {
+        icon: collection.icon,
+      });
+    }
   }
 
-  return (
-    <Icon
-      value={collection.icon}
-      color={inputColor ?? collection.color ?? undefined}
-      size={size}
-      initial={collection.initial}
-      className={className}
-      forceColor={inputColor ? true : false}
-    />
-  );
+  return <CollectionIcon color={color} expanded={expanded} size={size} />;
 }
 
 export default observer(ResolvedCollectionIcon);

app/components/Icons/EmojiIcon.tsx

@@ -1,13 +1,11 @@
 import * as React from "react";
 import styled from "styled-components";
-import { s } from "../styles";
 
 type Props = {
   /** The emoji to render */
   emoji: string;
   /** The size of the emoji, 24px is default to match standard icons */
   size?: number;
-  className?: string;
 };
 
 /**
@@ -17,28 +15,19 @@ type Props = {
 export default function EmojiIcon({ size = 24, emoji, ...rest }: Props) {
   return (
     <Span $size={size} {...rest}>
-      <SVG size={size} emoji={emoji} />
+      {emoji}
     </Span>
   );
 }
 
 const Span = styled.span<{ $size: number }>`
-  font-family: ${s("fontFamilyEmoji")};
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  flex-shrink: 0;
   width: ${(props) => props.$size}px;
   height: ${(props) => props.$size}px;
+  text-indent: -0.15em;
+  font-size: ${(props) => props.$size - 10}px;
 `;
-
-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%"}
-      dominantBaseline="middle"
-      textAnchor="middle"
-      fontSize={size * 0.7}
-    >
-      {emoji}
-    </text>
-  </svg>
-);

app/components/InputSearchPage.tsx

@@ -4,28 +4,20 @@ 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";
 
 type Props = {
-  /** A string representing where the search started, for tracking. */
   source: string;
-  /** Placeholder text for the input. */
   placeholder?: string;
-  /** Label for the input. */
   label?: string;
-  /** Whether the label should be hidden. */
   labelHidden?: boolean;
-  /** An optional ID of a collection to search within. */
   collectionId?: string;
-  /** The current value of the input. */
   value?: string;
-  /** Event handler for when the input value changes. */
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => unknown;
-  /** Event handler for when a key is pressed. */
   onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => unknown;
 };
 

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;
@@ -50,11 +50,6 @@ export type Props = Omit<ButtonProps<any>, "onChange"> & {
   note?: React.ReactNode;
   onChange?: (value: string | null) => void;
   style?: React.CSSProperties;
-  /**
-   * Set to true if this component is rendered inside a Modal.
-   * The Modal will take care of preventing body scroll behaviour.
-   */
-  skipBodyScroll?: boolean;
 };
 
 export interface InputSelectRef {
@@ -84,7 +79,6 @@ const InputSelect = (props: Props, ref: React.RefObject<InputSelectRef>) => {
     note,
     icon,
     nude,
-    skipBodyScroll,
     ...rest
   } = props;
 
@@ -97,7 +91,7 @@ const InputSelect = (props: Props, ref: React.RefObject<InputSelectRef>) => {
   const popover = useSelectPopover({
     ...select,
     hideOnClickOutside: false,
-    preventBodyScroll: skipBodyScroll ? false : true,
+    preventBodyScroll: true,
     disabled,
   });
 
@@ -226,12 +220,7 @@ const InputSelect = (props: Props, ref: React.RefObject<InputSelectRef>) => {
             </StyledButton>
           )}
         </Select>
-        <SelectPopover
-          {...select}
-          {...popover}
-          aria-label={ariaLabel}
-          preventBodyScroll={skipBodyScroll ? false : true}
-        >
+        <SelectPopover {...select} {...popover} aria-label={ariaLabel}>
           {(popoverProps: InnerProps) => {
             const topAnchor = popoverProps.style?.top === "0";
             const rightAnchor = popoverProps.placement === "bottom-end";
@@ -313,7 +302,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")};
@@ -352,9 +341,7 @@ const Wrapper = styled.label<{ short?: boolean }>`
 `;
 
 export const Positioner = styled(Position)`
-  pointer-events: all;
-
-  &:focus-visible {
+  &.focus-visible {
     ${StyledSelectOption} {
       &[aria-selected="true"] {
         color: ${(props) => props.theme.white};