test

.circleci/config.yml

@@ -88,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
@@ -108,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: |

Dockerfile

@@ -20,11 +20,6 @@ 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 && \
@@ -41,7 +36,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

@@ -6,6 +6,10 @@ WORKDIR $APP_PATH
 COPY ./package.json ./yarn.lock ./
 COPY ./patches ./patches
 
+RUN  apt-get update \
+  && apt-get install -y wget \
+  && rm -rf /var/lib/apt/lists/*
+
 RUN yarn install --no-optional --frozen-lockfile --network-timeout 1000000 && \
   yarn cache clean
 
@@ -19,3 +23,4 @@ RUN yarn install --production=true --frozen-lockfile --network-timeout 1000000 &
   yarn cache clean
 
 ENV PORT=3000
+HEALTHCHECK CMD wget -qO- http://localhost:${PORT}/_health | grep -q "OK" || exit 1

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

@@ -1,10 +1,8 @@
 import {
-  ArchiveIcon,
   CollectionIcon,
   EditIcon,
   PadlockIcon,
   PlusIcon,
-  RestoreIcon,
   SearchIcon,
   ShapesIcon,
   StarredIcon,
@@ -12,18 +10,16 @@ import {
   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";
@@ -74,7 +70,7 @@ export const editCollection = createAction({
   name: ({ t, isContextMenu }) =>
     isContextMenu ? `${t("Edit")}…` : t("Edit collection"),
   analyticsName: "Edit collection",
-  section: ActiveCollectionSection,
+  section: CollectionSection,
   icon: <EditIcon />,
   visible: ({ activeCollectionId }) =>
     !!activeCollectionId &&
@@ -100,7 +96,7 @@ export const editCollectionPermissions = createAction({
   name: ({ t, isContextMenu }) =>
     isContextMenu ? `${t("Permissions")}…` : t("Collection permissions"),
   analyticsName: "Collection permissions",
-  section: ActiveCollectionSection,
+  section: CollectionSection,
   icon: <PadlockIcon />,
   visible: ({ activeCollectionId }) =>
     !!activeCollectionId &&
@@ -131,22 +127,11 @@ 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 &&
+    stores.policies.abilities(activeCollectionId).readDocument,
   perform: ({ activeCollectionId }) => {
     history.push(searchPath(undefined, { collectionId: activeCollectionId }));
   },
@@ -155,7 +140,7 @@ 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 }) => {
@@ -182,7 +167,7 @@ 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 }) => {
@@ -205,76 +190,10 @@ 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 }) => {
@@ -308,7 +227,7 @@ export const deleteCollection = createAction({
 export const createTemplate = createAction({
   name: ({ t }) => t("New template"),
   analyticsName: "New template",
-  section: ActiveCollectionSection,
+  section: CollectionSection,
   icon: <ShapesIcon />,
   keywords: "new create template",
   visible: ({ activeCollectionId }) =>

app/actions/definitions/comments.tsx

@@ -1,10 +1,9 @@
-import { DoneIcon, SmileyIcon, TrashIcon } from "outline-icons";
+import { DoneIcon, TrashIcon } from "outline-icons";
 import * as React from "react";
 import { toast } from "sonner";
 import stores from "~/stores";
 import Comment from "~/models/Comment";
 import CommentDeleteDialog from "~/components/CommentDeleteDialog";
-import ViewReactionsDialog from "~/components/Reactions/ViewReactionsDialog";
 import history from "~/utils/history";
 import { createAction } from "..";
 import { DocumentSection } from "../sections";
@@ -89,27 +88,3 @@ export const unresolveCommentFactory = ({
       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 {
-  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 DuplicateDialog from "~/components/DuplicateDialog";
-import Icon from "~/components/Icon";
-import MarkdownIcon from "~/components/Icons/MarkdownIcon";
 import SharePopover from "~/components/Sharing/Document";
 import { getHeaderExpandedKey } from "~/components/Sidebar/components/Header";
 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";
@@ -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,
     }),
 });
 
@@ -136,11 +121,11 @@ export const createDocumentFromTemplate = createAction({
     !!activeDocumentId &&
     !!stores.documents.get(activeDocumentId)?.template &&
     stores.policies.abilities(currentTeamId).createDocument,
-  perform: ({ activeCollectionId, activeDocumentId, sidebarContext }) =>
+  perform: ({ activeCollectionId, activeDocumentId, inStarredSection }) =>
     history.push(
       newDocumentPath(activeCollectionId, { templateId: activeDocumentId }),
       {
-        sidebarContext,
+        starred: inStarredSection,
       }
     ),
 });
@@ -148,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 }) =>
@@ -156,16 +141,16 @@ export const createNestedDocument = createAction({
     !!activeDocumentId &&
     stores.policies.abilities(currentTeamId).createDocument &&
     stores.policies.abilities(activeDocumentId).createChildDocument,
-  perform: ({ activeDocumentId, sidebarContext }) =>
+  perform: ({ activeDocumentId, inStarredSection }) =>
     history.push(newNestedDocumentPath(activeDocumentId), {
-      sidebarContext,
+      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 }) => {
@@ -191,7 +176,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 }) => {
@@ -217,7 +202,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) {
@@ -259,7 +244,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) {
@@ -290,7 +275,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) {
@@ -318,7 +303,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) {
@@ -346,20 +331,18 @@ 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;
     }
@@ -370,6 +353,8 @@ export const shareDocument = createAction({
       content: (
         <SharePopover
           document={document}
+          share={share}
+          sharedParent={sharedParent}
           onRequestClose={stores.dialogs.closeAllModals}
           visible
         />
@@ -381,7 +366,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,
@@ -400,7 +385,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,
@@ -424,7 +409,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,
@@ -444,11 +429,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,
@@ -458,10 +441,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 }) => {
@@ -475,33 +456,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
@@ -517,17 +475,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 }) =>
@@ -571,7 +529,7 @@ export const pinDocumentToCollection = createAction({
     });
   },
   analyticsName: "Pin document to collection",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
   icon: <PinIcon />,
   iconInContextMenu: false,
   visible: ({ activeCollectionId, activeDocumentId, stores }) => {
@@ -607,7 +565,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 }) => {
@@ -639,7 +597,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],
 });
@@ -647,7 +605,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) {
@@ -665,7 +623,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: () => {
@@ -700,21 +658,15 @@ 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);
-        throw err;
-      }
+      const document = await documents.import(
+        file,
+        activeDocumentId,
+        activeCollectionId,
+        {
+          publish: true,
+        }
+      );
+      history.push(document.url);
     };
 
     input.click();
@@ -724,7 +676,7 @@ export const importDocument = createAction({
 export const createTemplateFromDocument = createAction({
   name: ({ t }) => t("Templatize"),
   analyticsName: "Templatize document",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
   icon: <ShapesIcon />,
   keywords: "new create template",
   visible: ({ activeCollectionId, activeDocumentId, stores }) => {
@@ -759,14 +711,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 randomPath =
+      documentPaths[Math.round(Math.random() * documentPaths.length)];
 
-    const random = nodes[Math.round(Math.random() * nodes.length)];
-
-    if (random) {
-      history.push(random.url);
+    if (randomPath) {
+      history.push(randomPath.url);
     }
   },
 });
@@ -824,7 +776,7 @@ export const moveDocumentToCollection = createAction({
       : t("Move");
   },
   analyticsName: "Move document",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
   icon: <MoveIcon />,
   iconInContextMenu: false,
   visible: ({ activeDocumentId, stores }) => {
@@ -853,7 +805,7 @@ export const moveDocumentToCollection = createAction({
 export const moveDocument = createAction({
   name: ({ t }) => t("Move"),
   analyticsName: "Move document",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
   icon: <MoveIcon />,
   visible: ({ activeDocumentId, stores }) => {
     if (!activeDocumentId) {
@@ -872,7 +824,7 @@ export const moveDocument = createAction({
 export const moveTemplate = createAction({
   name: ({ t }) => t("Move"),
   analyticsName: "Move document",
-  section: ActiveDocumentSection,
+  section: DocumentSection,
   icon: <MoveIcon />,
   visible: ({ activeDocumentId, stores }) => {
     if (!activeDocumentId) {
@@ -889,9 +841,9 @@ export const moveTemplate = createAction({
 });
 
 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) {
@@ -900,30 +852,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"));
     }
   },
 });
@@ -931,7 +867,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 }) => {
@@ -965,7 +901,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 }) => {
@@ -1020,7 +956,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 ?? "");
@@ -1042,7 +978,7 @@ export const openDocumentComments = createAction({
 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 ?? "");
@@ -1063,7 +999,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 ?? "");
@@ -1100,7 +1036,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 ?? "");
@@ -1121,42 +1057,6 @@ 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,
@@ -1166,7 +1066,6 @@ export const rootDocumentActions = [
   importDocument,
   downloadDocument,
   copyDocumentLink,
-  copyDocumentShareLink,
   copyDocumentAsMarkdown,
   starDocument,
   unstarDocument,
@@ -1175,7 +1074,6 @@ export const rootDocumentActions = [
   subscribeDocument,
   unsubscribeDocument,
   duplicateDocument,
-  leaveDocument,
   moveTemplateToWorkspace,
   moveDocumentToCollection,
   openRandomDocument,

app/actions/definitions/navigation.tsx

@@ -91,15 +91,6 @@ export const navigateToSettings = createAction({
   perform: () => history.push(settingsPath()),
 });
 
-export const navigateToWorkspaceSettings = createAction({
-  name: ({ t }) => t("Settings"),
-  analyticsName: "Navigate to workspace settings",
-  section: NavigationSection,
-  icon: <SettingsIcon />,
-  visible: () => stores.policies.abilities(stores.auth.team?.id || "").update,
-  perform: () => history.push(settingsPath("details")),
-});
-
 export const navigateToProfileSettings = createAction({
   name: ({ t }) => t("Profile"),
   analyticsName: "Navigate to profile settings",
@@ -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/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,28 +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 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");
@@ -39,6 +21,4 @@ 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/Analytics.tsx

@@ -106,24 +106,6 @@ const Analytics: React.FC = ({ children }: Props) => {
     });
   }, []);
 
-  // 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

@@ -19,7 +19,7 @@ function ArrowKeyNavigation(
           return;
         }
 
-        if (ev.key === "Escape" || ev.key === "Backspace") {
+        if (ev.key === "Escape") {
           ev.preventDefault();
           onEscape(ev);
         }

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) {
@@ -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/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/Button.tsx

@@ -1,5 +1,5 @@
 import { LocationDescriptor } from "history";
-import { DisclosureIcon } from "outline-icons";
+import { ExpandedIcon } from "outline-icons";
 import { darken, lighten, transparentize } from "polished";
 import * as React from "react";
 import styled from "styled-components";
@@ -189,14 +189,10 @@ const Button = <T extends React.ElementType = "button">(
       <Inner hasIcon={hasIcon} hasText={hasText} disclosure={disclosure}>
         {hasIcon && ic}
         {hasText && <Label hasIcon={hasIcon}>{children || value}</Label>}
-        {disclosure && <StyledDisclosureIcon />}
+        {disclosure && <ExpandedIcon />}
       </Inner>
     </RealButton>
   );
 };
 
-const StyledDisclosureIcon = styled(DisclosureIcon)`
-  opacity: 0.8;
-`;
-
 export default React.forwardRef(Button);

app/components/Collaborators.tsx

@@ -7,7 +7,7 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { usePopoverState, PopoverDisclosure } from "reakit/Popover";
 import Document from "~/models/Document";
-import { 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";

app/components/Collection/CollectionForm.tsx

@@ -19,6 +19,7 @@ import Text from "~/components/Text";
 import useBoolean from "~/hooks/useBoolean";
 import useCurrentTeam from "~/hooks/useCurrentTeam";
 import { EmptySelectValue } from "~/types";
+import { Feature, FeatureFlags } from "~/utils/FeatureFlags";
 
 const IconPicker = React.lazy(() => import("~/components/IconPicker"));
 
@@ -155,16 +156,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

@@ -226,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 "~/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/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;

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/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/ContextMenu/MenuItem.tsx

@@ -6,7 +6,6 @@ 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";
 
@@ -75,9 +74,9 @@ const MenuItem = (
           ])}
         >
           {selected !== undefined && (
-            <SelectedWrapper aria-hidden>
+            <MenuIconWrapper aria-hidden>
               {selected ? <CheckmarkIcon /> : <Spacer />}
-            </SelectedWrapper>
+            </MenuIconWrapper>
           )}
           {icon && <MenuIconWrapper aria-hidden>{icon}</MenuIconWrapper>}
           <Title>{children}</Title>
@@ -197,13 +196,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/index.tsx

@@ -51,8 +51,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 +135,6 @@ type InnerContextMenuProps = MenuStateReturn & {
   menuProps: { style?: React.CSSProperties; placement: string };
   children: React.ReactNode;
   maxWidth?: number;
-  minHeight?: number;
 };
 
 /**
@@ -223,7 +220,6 @@ const InnerContextMenu = (props: InnerContextMenuProps) => {
         <Background
           dir="auto"
           maxWidth={props.maxWidth}
-          minHeight={props.minHeight}
           topAnchor={topAnchor}
           rightAnchor={rightAnchor}
           ref={backgroundRef}
@@ -261,23 +257,6 @@ export const Position = styled.div`
     transition-delay: 250ms;
     transition-property: outline-width;
     transition-duration: 0;
-    outline: none;
-
-    &:after {
-      content: "";
-      position: absolute;
-      top: 1px;
-      left: 1px;
-      right: 1px;
-      bottom: 1px;
-      pointer-events: none;
-      border-radius: 4px;
-
-      outline-color: ${s("accent")};
-      outline-width: initial;
-      outline-offset: -1px;
-      outline-style: solid;
-    }
   }
 
   /*
@@ -298,7 +277,6 @@ type BackgroundProps = {
   topAnchor?: boolean;
   rightAnchor?: boolean;
   maxWidth?: number;
-  minHeight?: number;
   theme: DefaultTheme;
 };
 
@@ -310,7 +288,7 @@ 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;
   font-weight: normal;
 

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

@@ -8,7 +8,6 @@ import Document from "~/models/Document";
 import Breadcrumb from "~/components/Breadcrumb";
 import Icon from "~/components/Icon";
 import CollectionIcon from "~/components/Icons/CollectionIcon";
-import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
 import { MenuInternalLink } from "~/types";
 import {
@@ -68,15 +67,14 @@ const DocumentBreadcrumb: React.FC<Props> = ({
   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,

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

@@ -11,7 +11,7 @@ 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 { NavigationNode } from "@shared/types";

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

@@ -140,7 +140,7 @@ const DocumentMeta: React.FC<Props> = ({
   }
 
   const nestedDocumentsCount = collection
-    ? collection.getChildrenForDocument(document.id).length
+    ? collection.getDocumentChildren(document.id).length
     : 0;
   const canShowProgressBar = isTasks && !isTemplate;
 

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

@@ -9,6 +9,7 @@ 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";
@@ -42,14 +43,21 @@ 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 {
+    id,
+    shareId,
+    onChange,
+    onHeadingsChange,
+    onCreateCommentMark,
+    onDeleteCommentMark,
+  } = props;
   const userLocale = useUserLocale();
   const locale = dateLocale(userLocale);
   const { comments, documents } = useStores();
@@ -57,6 +65,7 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
   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(
@@ -98,7 +107,7 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
       }
 
       // default search for anything that doesn't look like a URL
-      const results = await documents.searchTitles({ query: term });
+      const results = await documents.searchTitles(term);
 
       return sortBy(
         results.map(({ document }) => ({
@@ -203,6 +212,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();
@@ -237,25 +261,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}
@@ -268,15 +293,14 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
           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/ErrorBoundary.tsx

@@ -138,7 +138,7 @@ class ErrorBoundary extends React.Component<Props> {
 }
 
 const Pre = styled.pre`
-  background: ${s("backgroundSecondary")};
+  background: ${s("secondaryBackground")};
   padding: 16px;
   border-radius: 4px;
   font-size: 12px;

app/components/EventListItem.tsx

@@ -16,7 +16,7 @@ import EventBoundary from "@shared/components/EventBoundary";
 import { s } from "@shared/styles";
 import Document from "~/models/Document";
 import Event from "~/models/Event";
-import { Avatar } from "~/components/Avatar";
+import Avatar from "~/components/Avatar";
 import Item, { Actions, Props as ItemProps } from "~/components/List/Item";
 import Time from "~/components/Time";
 import useStores from "~/hooks/useStores";
@@ -27,7 +27,7 @@ import { documentHistoryPath } from "~/utils/routeHelpers";
 
 type Props = {
   document: Document;
-  event: Event<Document>;
+  event: Event;
   latest?: boolean;
 };
 

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: 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("inputBorder")};
-    background: ${s("menuBackground")};
-  }
-
-  ${NativeInput} {
-    font-size: 14px;
-  }
-`;
-
 const Note = styled(Text)`
   display: block;
   margin: 2px 0;

app/components/GroupListItem.tsx

@@ -13,6 +13,7 @@ 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";
 
@@ -25,11 +26,15 @@ type Props = {
 };
 
 function GroupListItem({ group, showFacepile, renderActions }: Props) {
+  const { groupUsers } = useStores();
   const { t } = useTranslation();
   const [membersModalOpen, setMembersModalOpen, setMembersModalClosed] =
     useBoolean();
   const memberCount = group.memberCount;
-  const users = group.users.slice(0, MAX_AVATAR_DISPLAY);
+  const membershipsInGroup = groupUsers.inGroup(group.id);
+  const users = membershipsInGroup
+    .slice(0, MAX_AVATAR_DISPLAY)
+    .map((gm) => gm.user);
   const overflow = memberCount - users.length;
 
   return (
@@ -75,7 +80,7 @@ const Image = styled(Flex)`
   justify-content: center;
   width: 32px;
   height: 32px;
-  background: ${s("backgroundSecondary")};
+  background: ${s("secondaryBackground")};
   border-radius: 32px;
 `;
 

app/components/Header.tsx

@@ -16,8 +16,6 @@ import useStores from "~/hooks/useStores";
 import { draggableOnDesktop, fadeOnDesktopBackgrounded } from "~/styles";
 import Desktop from "~/utils/Desktop";
 
-export const HEADER_HEIGHT = 64;
-
 type Props = {
   left?: React.ReactNode;
   title: React.ReactNode;
@@ -132,7 +130,7 @@ 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()}
 

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

@@ -2,6 +2,8 @@ import { observer } from "mobx-react";
 import { getLuminance } from "polished";
 import * as React from "react";
 import styled from "styled-components";
+import breakpoint from "styled-components-breakpoint";
+import { randomElement } from "@shared/random";
 import { IconType } from "@shared/types";
 import { IconLibrary } from "@shared/utils/IconLibrary";
 import { colorPalette } from "@shared/utils/collections";
@@ -81,7 +83,7 @@ const SVGIcon = observer(
   }: Props) => {
     const { ui } = useStores();
 
-    let color = inputColor ?? colorPalette[0];
+    let color = inputColor ?? randomElement(colorPalette);
 
     // If the chosen icon color is very dark then we invert it in dark mode
     if (!forceColor) {
@@ -117,7 +119,12 @@ export const IconTitleWrapper = styled(Flex)<{ dir?: string }>`
   z-index: 1;
 
   ${(props: { dir?: string }) =>
-    props.dir === "rtl" ? "right: -44px" : "left: -44px"};
+    props.dir === "rtl" ? "right: -40px" : "left: -40px"};
+
+  ${breakpoint("desktop")`
+    ${(props: { dir?: string }) =>
+      props.dir === "rtl" ? "right: -44px" : "left: -44px"};
+  `}
 `;
 
 export default Icon;

app/components/IconPicker/components/ColorPicker.tsx

@@ -80,8 +80,8 @@ const BuiltinColors = ({
     {colorPalette.map((color) => (
       <ColorButton
         key={color}
-        $color={color}
-        $active={color === activeColor}
+        color={color}
+        active={color === activeColor}
         onClick={() => onClick(color)}
       >
         <Selected />
@@ -156,22 +156,22 @@ const Selected = styled.span`
   transform: translateY(-25%) rotate(-45deg);
 `;
 
-const ColorButton = styled(NudeButton)<{ $color: string; $active: boolean }>`
+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};
+  background-color: ${({ color }) => color};
 
   &: ${hover} {
     outline: 2px solid ${s("menuBackground")} !important;
-    box-shadow: ${({ $color }) => `0px 0px 3px 3px ${$color}`};
+    box-shadow: ${({ color }) => `0px 0px 3px 3px ${color}`};
   }
 
   & ${Selected} {
-    display: ${({ $active }) => ($active ? "block" : "none")};
+    display: ${({ active }) => (active ? "block" : "none")};
   }
 `;
 

app/components/IconPicker/components/Emoji.tsx

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

app/components/IconPicker/components/EmojiPanel.tsx

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

app/components/IconPicker/components/GridTemplate.tsx

@@ -4,9 +4,9 @@ import React from "react";
 import styled from "styled-components";
 import { IconType } from "@shared/types";
 import { IconLibrary } from "@shared/utils/IconLibrary";
-import { Emoji } from "~/components/Emoji";
 import Text from "~/components/Text";
 import { TRANSLATED_CATEGORIES } from "../utils";
+import { Emoji } from "./Emoji";
 import Grid from "./Grid";
 import { IconButton } from "./IconButton";
 
@@ -71,7 +71,7 @@ const GridTemplate = (
             <IconButton
               key={item.name}
               onClick={() => onIconSelect({ id: item.name, value: item.name })}
-              style={{ "--delay": `${item.delay}ms` } as React.CSSProperties}
+              delay={item.delay}
             >
               <Icon as={IconLibrary.getComponent(item.name)} color={item.color}>
                 {item.initial}
@@ -85,9 +85,7 @@ const GridTemplate = (
             key={item.id}
             onClick={() => onIconSelect({ id: item.id, value: item.value })}
           >
-            <Emoji width={24} height={24}>
-              {item.value}
-            </Emoji>
+            <Emoji>{item.value}</Emoji>
           </IconButton>
         );
       });

app/components/IconPicker/components/IconButton.tsx

@@ -7,6 +7,7 @@ export const IconButton = styled(NudeButton)<{ delay?: number }>`
   width: 32px;
   height: 32px;
   padding: 4px;
+  --delay: ${({ delay }) => delay && `${delay}ms`};
 
   &: ${hover} {
     background: ${s("listItemHoverBackground")};

app/components/IconPicker/components/SkinTonePicker.tsx

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

app/components/IconPicker/index.tsx

@@ -82,7 +82,6 @@ const IconPicker = ({
     modal: true,
     unstable_offset: [0, 0],
   });
-  const { hide, show, visible } = popover;
   const tab = useTabState({ selectedId: defaultTab });
   const previouslyVisible = usePrevious(popover.visible);
 
@@ -97,12 +96,12 @@ const IconPicker = ({
 
   const handleIconChange = React.useCallback(
     (ic: string) => {
-      hide();
+      popover.hide();
       const icType = determineIconType(ic);
       const finalColor = icType === IconType.SVG ? chosenColor : null;
       onChange(ic, finalColor);
     },
-    [hide, onChange, chosenColor]
+    [popover, onChange, chosenColor]
   );
 
   const handleIconColorChange = React.useCallback(
@@ -119,32 +118,32 @@ const IconPicker = ({
   );
 
   const handleIconRemove = React.useCallback(() => {
-    hide();
+    popover.hide();
     onChange(null, null);
-  }, [hide, onChange]);
+  }, [popover, onChange]);
 
   const handlePopoverButtonClick = React.useCallback(
     (ev: React.MouseEvent) => {
       ev.stopPropagation();
-      if (visible) {
-        hide();
+      if (popover.visible) {
+        popover.hide();
       } else {
-        show();
+        popover.show();
       }
     },
-    [hide, show, visible]
+    [popover]
   );
 
   // Popover open effect
   React.useEffect(() => {
-    if (visible && !previouslyVisible) {
+    if (popover.visible && !previouslyVisible) {
       onOpen?.();
-    } else if (!visible && previouslyVisible) {
+    } else if (!popover.visible && previouslyVisible) {
       onClose?.();
       setQuery("");
       resetDefaultTab();
     }
-  }, [visible, previouslyVisible, onOpen, onClose, resetDefaultTab]);
+  }, [popover.visible, previouslyVisible, onOpen, onClose, resetDefaultTab]);
 
   // Custom click outside handling rather than using `hideOnClickOutside` from reakit so that we can
   // prevent event bubbling.
@@ -199,7 +198,7 @@ const IconPicker = ({
                 {...tab}
                 id={TAB_NAMES["Icon"]}
                 aria-label={t("Icons")}
-                $active={tab.selectedId === TAB_NAMES["Icon"]}
+                active={tab.selectedId === TAB_NAMES["Icon"]}
               >
                 {t("Icons")}
               </StyledTab>
@@ -207,7 +206,7 @@ const IconPicker = ({
                 {...tab}
                 id={TAB_NAMES["Emoji"]}
                 aria-label={t("Emojis")}
-                $active={tab.selectedId === TAB_NAMES["Emoji"]}
+                active={tab.selectedId === TAB_NAMES["Emoji"]}
               >
                 {t("Emojis")}
               </StyledTab>
@@ -274,7 +273,7 @@ const TabActionsWrapper = styled(Flex)`
   border-bottom: 1px solid ${s("inputBorder")};
 `;
 
-const StyledTab = styled(Tab)<{ $active: boolean }>`
+const StyledTab = styled(Tab)<{ active: boolean }>`
   position: relative;
   font-weight: 500;
   font-size: 14px;
@@ -283,15 +282,15 @@ const StyledTab = styled(Tab)<{ $active: boolean }>`
   border: 0;
   padding: 8px 12px;
   user-select: none;
-  color: ${({ $active }) => ($active ? s("textSecondary") : s("textTertiary"))};
+  color: ${({ active }) => (active ? s("textSecondary") : s("textTertiary"))};
   transition: color 100ms ease-in-out;
 
   &: ${hover} {
     color: ${s("textSecondary")};
   }
 
-  ${({ $active }) =>
-    $active &&
+  ${({ active }) =>
+    active &&
     css`
       &:after {
         content: "";
@@ -310,4 +309,4 @@ const StyledTabPanel = styled(TabPanel)`
   overflow-y: auto;
 `;
 
-export default React.memo(IconPicker);
+export default IconPicker;

app/components/Icons/CollectionIcon.tsx

@@ -1,5 +1,5 @@
 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 { colorPalette } from "@shared/utils/collections";
@@ -40,11 +40,8 @@ function ResolvedCollectionIcon({
           : "currentColor"
         : collectionColor);
 
-    const Component = collection.isPrivate
-      ? PrivateCollectionIcon
-      : CollectionIcon;
     return (
-      <Component
+      <CollectionIcon
         color={color}
         expanded={expanded}
         size={size}

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;
@@ -313,7 +313,7 @@ const StyledButton = styled(Button)<{ $nude?: boolean }>`
   margin-bottom: 16px;
   display: block;
   width: 100%;
-  cursor: var(--pointer);
+  cursor: default;
 
   &:hover:not(:disabled) {
     background: ${s("buttonNeutralBackground")};

app/components/InputSelectPermission.tsx

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

app/components/Layout.tsx

@@ -41,6 +41,7 @@ const Layout = React.forwardRef(function Layout_(
     <Container column auto ref={ref}>
       <Helmet>
         <title>{title ? title : env.APP_NAME}</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       </Helmet>
 
       <SkipNavLink />

app/components/List/Item.tsx

@@ -4,7 +4,7 @@ import {
 } from "@getoutline/react-roving-tabindex";
 import { LocationDescriptor } from "history";
 import * as React from "react";
-import scrollIntoView from "scroll-into-view-if-needed";
+import scrollIntoView from "smooth-scroll-into-view-if-needed";
 import styled, { useTheme } from "styled-components";
 import { s, ellipsis } from "@shared/styles";
 import Flex from "~/components/Flex";
@@ -192,7 +192,7 @@ const Wrapper = styled.a<{
   &:focus,
   &:focus-within {
     background: ${(props) =>
-      props.$hover ? props.theme.backgroundSecondary : "inherit"};
+      props.$hover ? props.theme.secondaryBackground : "inherit"};
   }
 
   cursor: ${(props) =>

app/components/LocaleTime.tsx

@@ -39,15 +39,12 @@ const LocaleTime: React.FC<Props> = ({
   relative,
   tooltipDelay,
 }: Props) => {
-  const userLocale = useUserLocale();
-  const dateFormatLong: Record<string, string> = {
+  const userLocale: string = useUserLocale() || "";
+  const dateFormatLong = {
     en_US: "MMMM do, yyyy h:mm a",
     fr_FR: "'Le 'd MMMM yyyy 'à' H:mm",
   };
-  const formatLocaleLong =
-    (userLocale ? dateFormatLong[userLocale] : undefined) ??
-    "MMMM do, yyyy h:mm a";
-  // @ts-expect-error fallback to formatLocaleLong
+  const formatLocaleLong = dateFormatLong[userLocale] ?? "MMMM do, yyyy h:mm a";
   const formatLocale = format?.[userLocale] ?? formatLocaleLong;
   const [_, setMinutesMounted] = React.useState(0); // eslint-disable-line @typescript-eslint/no-unused-vars
   const callback = React.useRef<() => void>();

app/components/Notifications/NotificationListItem.tsx

@@ -9,7 +9,8 @@ import Notification from "~/models/Notification";
 import CommentEditor from "~/scenes/Document/components/CommentEditor";
 import useStores from "~/hooks/useStores";
 import { hover, truncateMultiline } from "~/styles";
-import { Avatar, AvatarSize } from "../Avatar";
+import Avatar from "../Avatar";
+import { AvatarSize } from "../Avatar/Avatar";
 import Flex from "../Flex";
 import Text from "../Text";
 import Time from "../Time";

app/components/Notifications/Notifications.tsx

@@ -24,15 +24,13 @@ import NotificationListItem from "./NotificationListItem";
 type Props = {
   /** Callback when the notification panel wants to close. */
   onRequestClose: () => void;
-  /** Whether the panel is open or not. */
-  isOpen: boolean;
 };
 
 /**
  * A panel containing a list of notifications and controls to manage them.
  */
 function Notifications(
-  { onRequestClose, isOpen }: Props,
+  { onRequestClose }: Props,
   ref: React.RefObject<HTMLDivElement>
 ) {
   const context = useActionContext();
@@ -74,7 +72,7 @@ function Notifications(
             <PaginatedList
               fetch={notifications.fetchPage}
               options={{ archived: false }}
-              items={isOpen ? notifications.orderedData : undefined}
+              items={notifications.orderedData}
               renderItem={(item: Notification) => (
                 <NotificationListItem
                   key={item.id}

app/components/Notifications/NotificationsPopover.tsx

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

app/components/PageTitle.tsx

@@ -29,6 +29,7 @@ const PageTitle = ({ title, favicon }: Props) => {
         href={favicon ?? originalShortcutHref}
         key={favicon ?? originalShortcutHref}
       />
+      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     </Helmet>
   );
 };

app/components/PaginatedEventList.tsx

@@ -6,11 +6,9 @@ import PaginatedList from "~/components/PaginatedList";
 import EventListItem from "./EventListItem";
 
 type Props = {
-  events: Event<Document>[];
+  events: Event[];
   document: Document;
-  fetch: (
-    options: Record<string, any> | undefined
-  ) => Promise<Event<Document>[]>;
+  fetch: (options: Record<string, any> | undefined) => Promise<Event[]>;
   options?: Record<string, any>;
   heading?: React.ReactNode;
   empty?: React.ReactNode;
@@ -32,7 +30,7 @@ const PaginatedEventList = React.memo<Props>(function PaginatedEventList({
       heading={heading}
       fetch={fetch}
       options={options}
-      renderItem={(item: Event<Document>, index) => (
+      renderItem={(item: Event, index) => (
         <EventListItem
           key={item.id}
           event={item}

app/components/PaginatedList.tsx

@@ -13,14 +13,13 @@ import withStores from "~/components/withStores";
 import { dateToHeading } from "~/utils/date";
 
 export interface PaginatedItem {
-  id?: string;
-  updatedAt?: string;
+  id: string;
   createdAt?: string;
+  updatedAt?: string;
 }
 
 type Props<T> = WithTranslation &
-  RootStore &
-  React.HTMLAttributes<HTMLDivElement> & {
+  RootStore & {
     fetch?: (
       options: Record<string, any> | undefined
     ) => Promise<T[] | undefined> | undefined;
@@ -37,7 +36,6 @@ type Props<T> = WithTranslation &
     }) => React.ReactNode;
     renderHeading?: (name: React.ReactElement<any> | string) => React.ReactNode;
     onEscape?: (ev: React.KeyboardEvent<HTMLDivElement>) => void;
-    listRef?: React.RefObject<HTMLDivElement>;
   };
 
 @observer
@@ -198,7 +196,6 @@ class PaginatedList<T extends PaginatedItem> extends React.PureComponent<
           onEscape={onEscape}
           className={this.props.className}
           items={this.itemsToRender}
-          ref={this.props.listRef}
         >
           {() => {
             let previousHeading = "";
@@ -214,11 +211,7 @@ class PaginatedList<T extends PaginatedItem> extends React.PureComponent<
               // Our models have standard date fields, updatedAt > createdAt.
               // Get what a heading would look like for this item
               const currentDate =
-                "updatedAt" in item && item.updatedAt
-                  ? item.updatedAt
-                  : "createdAt" in item && item.createdAt
-                  ? item.createdAt
-                  : previousHeading;
+                item.updatedAt || item.createdAt || previousHeading;
               const currentHeading = dateToHeading(
                 currentDate,
                 this.props.t,
@@ -234,9 +227,7 @@ class PaginatedList<T extends PaginatedItem> extends React.PureComponent<
               ) {
                 previousHeading = currentHeading;
                 return (
-                  <React.Fragment
-                    key={"id" in item && item.id ? item.id : index}
-                  >
+                  <React.Fragment key={item.id}>
                     {renderHeading(currentHeading)}
                     {children}
                   </React.Fragment>

app/components/PlaceholderText.tsx

@@ -5,9 +5,8 @@ import { s } from "@shared/styles";
 import Flex from "~/components/Flex";
 import { pulsate } from "~/styles/animations";
 
-export type Props = React.ComponentProps<typeof Flex> & {
+export type Props = {
   header?: boolean;
-  width?: number;
   height?: number;
   minWidth?: number;
   maxWidth?: number;
@@ -18,22 +17,16 @@ function PlaceholderText({ minWidth, maxWidth, ...restProps }: Props) {
   // We only want to compute the width once so we are storing it inside ref
   const widthRef = React.useRef(randomInteger(minWidth || 75, maxWidth || 100));
 
-  return (
-    <Mask
-      width={`${widthRef.current / (restProps.header ? 2 : 1)}%`}
-      {...restProps}
-    />
-  );
+  return <Mask width={widthRef.current} {...restProps} />;
 }
 
 const Mask = styled(Flex)<{
-  width: number | string;
+  width: number;
   height?: number;
   delay?: number;
   header?: boolean;
 }>`
-  width: ${(props) =>
-    typeof props.width === "number" ? `${props.width}px` : props.width};
+  width: ${(props) => (props.header ? props.width / 2 : props.width)}%;
   height: ${(props) =>
     props.height ? props.height : props.header ? 24 : 18}px;
   margin-bottom: 6px;

app/components/Reactions/Reaction.tsx

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

app/components/Reactions/ReactionList.tsx

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

app/components/Reactions/ReactionPicker.tsx

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

app/components/Reactions/ViewReactionsDialog.tsx

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

app/components/ResizingHeightContainer.tsx

@@ -1,6 +1,5 @@
 import { m, TargetAndTransition } from "framer-motion";
 import * as React from "react";
-import { mergeRefs } from "react-merge-refs";
 import useComponentSize from "~/hooks/useComponentSize";
 
 type Props = {
@@ -19,37 +18,35 @@ type Props = {
 /**
  * Automatically animates the height of a container based on it's contents.
  */
-export const ResizingHeightContainer = React.forwardRef<HTMLDivElement, Props>(
-  function ResizingHeightContainer_(props, forwardedRef) {
-    const {
-      hideOverflow,
-      children,
-      config = {
-        transition: {
-          duration: 0.1,
-          ease: "easeInOut",
-        },
+export function ResizingHeightContainer(props: Props) {
+  const {
+    hideOverflow,
+    children,
+    config = {
+      transition: {
+        duration: 0.1,
+        ease: "easeInOut",
       },
-      style,
-    } = props;
+    },
+    style,
+  } = props;
 
-    const ref = React.useRef<HTMLDivElement>(null);
-    const { height } = useComponentSize(ref);
+  const ref = React.useRef<HTMLDivElement>(null);
+  const { height } = useComponentSize(ref);
 
-    return (
-      <m.div
-        animate={{
-          ...config,
-          height: Math.round(height),
-        }}
-        style={{
-          ...style,
-          overflow: hideOverflow ? "hidden" : "inherit",
-          position: "relative",
-        }}
-      >
-        <div ref={mergeRefs([ref, forwardedRef])}>{children}</div>
-      </m.div>
-    );
-  }
-);
+  return (
+    <m.div
+      animate={{
+        ...config,
+        height: Math.round(height),
+      }}
+      style={{
+        ...style,
+        overflow: hideOverflow ? "hidden" : "inherit",
+        position: "relative",
+      }}
+    >
+      <div ref={ref}>{children}</div>
+    </m.div>
+  );
+}

app/components/SearchActions.ts

@@ -10,7 +10,7 @@ export default function SearchActions() {
   const { searches } = useStores();
 
   React.useEffect(() => {
-    if (!searches.isLoaded && !searches.isFetching) {
+    if (!searches.isLoaded) {
       void searches.fetchPage({
         source: "app",
       });

app/components/SearchPopover.tsx

@@ -9,7 +9,7 @@ import Empty from "~/components/Empty";
 import { Outline } from "~/components/Input";
 import InputSearch from "~/components/InputSearch";
 import Placeholder from "~/components/List/Placeholder";
-import PaginatedList from "~/components/PaginatedList";
+import PaginatedList, { PaginatedItem } from "~/components/PaginatedList";
 import Popover from "~/components/Popover";
 import { id as bodyContentId } from "~/components/SkipNavContent";
 import useKeyDown from "~/hooks/useKeyDown";
@@ -19,10 +19,9 @@ import SearchListItem from "./SearchListItem";
 
 interface Props extends React.HTMLAttributes<HTMLInputElement> {
   shareId: string;
-  className?: string;
 }
 
-function SearchPopover({ shareId, className }: Props) {
+function SearchPopover({ shareId }: Props) {
   const { t } = useTranslation();
   const { documents } = useStores();
   const focusRef = React.useRef<HTMLElement | null>(null);
@@ -37,11 +36,11 @@ function SearchPopover({ shareId, className }: Props) {
   const { show, hide } = popover;
 
   const [searchResults, setSearchResults] = React.useState<
-    SearchResult[] | undefined
+    PaginatedItem[] | undefined
   >();
   const [cachedQuery, setCachedQuery] = React.useState(query);
   const [cachedSearchResults, setCachedSearchResults] = React.useState<
-    SearchResult[] | undefined
+    PaginatedItem[] | undefined
   >(searchResults);
 
   React.useEffect(() => {
@@ -55,8 +54,7 @@ function SearchPopover({ shareId, className }: Props) {
   const performSearch = React.useCallback(
     async ({ query, ...options }) => {
       if (query?.length > 0) {
-        const response = await documents.search({
-          query,
+        const response: PaginatedItem[] = await documents.search(query, {
           shareId,
           ...options,
         });
@@ -188,7 +186,6 @@ function SearchPopover({ shareId, className }: Props) {
             onChange={handleSearchInputChange}
             onFocus={handleSearchInputFocus}
             onKeyDown={handleKeyDown}
-            className={className}
           />
         )}
       </PopoverDisclosure>

app/components/Sharing/Collection/AccessControlList.tsx

@@ -1,14 +1,15 @@
 import { observer } from "mobx-react";
-import { UserIcon } from "outline-icons";
+import { GroupIcon, UserIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled, { useTheme } from "styled-components";
 import Squircle from "@shared/components/Squircle";
 import { CollectionPermission } from "@shared/types";
 import Collection from "~/models/Collection";
-import { Avatar, GroupAvatar, AvatarSize } from "~/components/Avatar";
+import Avatar, { AvatarSize } from "~/components/Avatar/Avatar";
 import InputMemberPermissionSelect from "~/components/InputMemberPermissionSelect";
 import InputSelectPermission from "~/components/InputSelectPermission";
+import LoadingIndicator from "~/components/LoadingIndicator";
 import Scrollable from "~/components/Scrollable";
 import useMaxHeight from "~/hooks/useMaxHeight";
 import usePolicy from "~/hooks/usePolicy";
@@ -16,7 +17,6 @@ import useRequest from "~/hooks/useRequest";
 import useStores from "~/hooks/useStores";
 import { EmptySelectValue, Permission } from "~/types";
 import { ListItem } from "../components/ListItem";
-import { Placeholder } from "../components/Placeholder";
 
 type Props = {
   /** Collection to which team members are supposed to be invited */
@@ -35,31 +35,21 @@ export const AccessControlList = observer(
     const theme = useTheme();
     const collectionId = collection.id;
 
-    const { request: fetchMemberships, loading: membershipLoading } =
-      useRequest(
-        React.useCallback(
-          () => memberships.fetchAll({ id: collectionId }),
-          [memberships, collectionId]
-        )
-      );
+    const { request: fetchMemberships, data: membershipData } = useRequest(
+      React.useCallback(
+        () => memberships.fetchAll({ id: collectionId }),
+        [memberships, collectionId]
+      )
+    );
 
-    const { request: fetchGroupMemberships, loading: groupMembershipLoading } =
+    const { request: fetchGroupMemberships, data: groupMembershipData } =
       useRequest(
         React.useCallback(
-          () => groupMemberships.fetchAll({ collectionId }),
+          () => groupMemberships.fetchAll({ id: collectionId }),
           [groupMemberships, collectionId]
         )
       );
 
-    const groupMembershipsInCollection =
-      groupMemberships.inCollection(collectionId);
-    const membershipsInCollection = memberships.inCollection(collectionId);
-    const hasMemberships =
-      groupMembershipsInCollection.length > 0 ||
-      membershipsInCollection.length > 0;
-    const showLoading =
-      !hasMemberships && (membershipLoading || groupMembershipLoading);
-
     React.useEffect(() => {
       void fetchMemberships();
       void fetchGroupMemberships();
@@ -105,144 +95,132 @@ export const AccessControlList = observer(
         hiddenScrollbars
         style={{ maxHeight }}
       >
-        {showLoading ? (
-          <Placeholder count={2} />
-        ) : (
-          <>
+        {(!membershipData || !groupMembershipData) && <LoadingIndicator />}
+        <ListItem
+          image={
+            <Squircle color={theme.accent} size={AvatarSize.Medium}>
+              <UserIcon color={theme.accentText} size={16} />
+            </Squircle>
+          }
+          title={t("All members")}
+          subtitle={t("Everyone in the workspace")}
+          actions={
+            <div style={{ marginRight: -8 }}>
+              <InputSelectPermission
+                style={{ margin: 0 }}
+                onChange={(
+                  value: CollectionPermission | typeof EmptySelectValue
+                ) => {
+                  void collection.save({
+                    permission: value === EmptySelectValue ? null : value,
+                  });
+                }}
+                disabled={!can.update}
+                value={collection?.permission}
+                labelHidden
+                nude
+              />
+            </div>
+          }
+        />
+        {groupMemberships
+          .inCollection(collection.id)
+          .sort((a, b) =>
+            (
+              (invitedInSession.includes(a.group.id) ? "_" : "") + a.group.name
+            ).localeCompare(b.group.name)
+          )
+          .map((membership) => (
             <ListItem
+              key={membership.id}
               image={
-                <Squircle color={theme.accent} size={AvatarSize.Medium}>
-                  <UserIcon color={theme.accentText} size={16} />
+                <Squircle color={theme.text} size={AvatarSize.Medium}>
+                  <GroupIcon color={theme.background} size={16} />
                 </Squircle>
               }
-              title={t("All members")}
-              subtitle={t("Everyone in the workspace")}
+              title={membership.group.name}
+              subtitle={t("{{ count }} member", {
+                count: membership.group.memberCount,
+              })}
               actions={
                 <div style={{ marginRight: -8 }}>
-                  <InputSelectPermission
+                  <InputMemberPermissionSelect
                     style={{ margin: 0 }}
-                    onChange={(
-                      value: CollectionPermission | typeof EmptySelectValue
+                    permissions={permissions}
+                    onChange={async (
+                      permission: CollectionPermission | typeof EmptySelectValue
                     ) => {
-                      void collection.save({
-                        permission: value === EmptySelectValue ? null : value,
-                      });
+                      if (permission === EmptySelectValue) {
+                        await groupMemberships.delete({
+                          collectionId: collection.id,
+                          groupId: membership.groupId,
+                        });
+                      } else {
+                        await groupMemberships.create({
+                          collectionId: collection.id,
+                          groupId: membership.groupId,
+                          permission,
+                        });
+                      }
                     }}
                     disabled={!can.update}
-                    value={collection?.permission}
+                    value={membership.permission}
                     labelHidden
                     nude
                   />
                 </div>
               }
             />
-            {groupMembershipsInCollection
-              .filter((membership) => membership.group)
-              .sort((a, b) =>
-                (
-                  (invitedInSession.includes(a.group.id) ? "_" : "") +
-                  a.group.name
-                ).localeCompare(b.group.name)
-              )
-              .map((membership) => (
-                <ListItem
-                  key={membership.id}
-                  image={
-                    <GroupAvatar
-                      group={membership.group}
-                      backgroundColor={theme.modalBackground}
-                    />
-                  }
-                  title={membership.group.name}
-                  subtitle={t("{{ count }} member", {
-                    count: membership.group.memberCount,
-                  })}
-                  actions={
-                    <div style={{ marginRight: -8 }}>
-                      <InputMemberPermissionSelect
-                        style={{ margin: 0 }}
-                        permissions={permissions}
-                        onChange={async (
-                          permission:
-                            | CollectionPermission
-                            | typeof EmptySelectValue
-                        ) => {
-                          if (permission === EmptySelectValue) {
-                            await groupMemberships.delete({
-                              collectionId: collection.id,
-                              groupId: membership.groupId,
-                            });
-                          } else {
-                            await groupMemberships.create({
-                              collectionId: collection.id,
-                              groupId: membership.groupId,
-                              permission,
-                            });
-                          }
-                        }}
-                        disabled={!can.update}
-                        value={membership.permission}
-                        labelHidden
-                        nude
-                      />
-                    </div>
-                  }
+          ))}
+        {memberships
+          .inCollection(collection.id)
+          .sort((a, b) =>
+            (
+              (invitedInSession.includes(a.user.id) ? "_" : "") + a.user.name
+            ).localeCompare(b.user.name)
+          )
+          .map((membership) => (
+            <ListItem
+              key={membership.id}
+              image={
+                <Avatar
+                  model={membership.user}
+                  size={AvatarSize.Medium}
+                  showBorder={false}
                 />
-              ))}
-            {membershipsInCollection
-              .filter((membership) => membership.user)
-              .sort((a, b) =>
-                (
-                  (invitedInSession.includes(a.user.id) ? "_" : "") +
-                  a.user.name
-                ).localeCompare(b.user.name)
-              )
-              .map((membership) => (
-                <ListItem
-                  key={membership.id}
-                  image={
-                    <Avatar
-                      model={membership.user}
-                      size={AvatarSize.Medium}
-                      showBorder={false}
-                    />
-                  }
-                  title={membership.user.name}
-                  subtitle={membership.user.email}
-                  actions={
-                    <div style={{ marginRight: -8 }}>
-                      <InputMemberPermissionSelect
-                        style={{ margin: 0 }}
-                        permissions={permissions}
-                        onChange={async (
-                          permission:
-                            | CollectionPermission
-                            | typeof EmptySelectValue
-                        ) => {
-                          if (permission === EmptySelectValue) {
-                            await memberships.delete({
-                              collectionId: collection.id,
-                              userId: membership.userId,
-                            });
-                          } else {
-                            await memberships.create({
-                              collectionId: collection.id,
-                              userId: membership.userId,
-                              permission,
-                            });
-                          }
-                        }}
-                        disabled={!can.update}
-                        value={membership.permission}
-                        labelHidden
-                        nude
-                      />
-                    </div>
-                  }
-                />
-              ))}
-          </>
-        )}
+              }
+              title={membership.user.name}
+              subtitle={membership.user.email}
+              actions={
+                <div style={{ marginRight: -8 }}>
+                  <InputMemberPermissionSelect
+                    style={{ margin: 0 }}
+                    permissions={permissions}
+                    onChange={async (
+                      permission: CollectionPermission | typeof EmptySelectValue
+                    ) => {
+                      if (permission === EmptySelectValue) {
+                        await memberships.delete({
+                          collectionId: collection.id,
+                          userId: membership.userId,
+                        });
+                      } else {
+                        await memberships.create({
+                          collectionId: collection.id,
+                          userId: membership.userId,
+                          permission,
+                        });
+                      }
+                    }}
+                    disabled={!can.update}
+                    value={membership.permission}
+                    labelHidden
+                    nude
+                  />
+                </div>
+              }
+            />
+          ))}
       </ScrollableContainer>
     );
   }

app/components/Sharing/Collection/SharePopover.tsx

@@ -9,7 +9,7 @@ import { CollectionPermission } from "@shared/types";
 import Collection from "~/models/Collection";
 import Group from "~/models/Group";
 import User from "~/models/User";
-import { Avatar, AvatarSize } from "~/components/Avatar";
+import Avatar, { AvatarSize } from "~/components/Avatar/Avatar";
 import NudeButton from "~/components/NudeButton";
 import { createAction } from "~/actions";
 import { UserSection } from "~/actions/sections";
@@ -357,6 +357,7 @@ function SharePopover({ collection, visible, onRequestClose }: Props) {
           addPendingId={handleAddPendingId}
           removePendingId={handleRemovePendingId}
           onEscape={handleEscape}
+          showGroups
         />
       )}
 

app/components/Sharing/Document/AccessControlList.tsx

@@ -5,13 +5,13 @@ import { useTranslation } from "react-i18next";
 import styled, { useTheme } from "styled-components";
 import Squircle from "@shared/components/Squircle";
 import { Pagination } from "@shared/constants";
-import { s } from "@shared/styles";
 import { CollectionPermission, IconType } from "@shared/types";
 import { determineIconType } from "@shared/utils/icon";
 import type Collection from "~/models/Collection";
 import type Document from "~/models/Document";
 import Share from "~/models/Share";
 import Flex from "~/components/Flex";
+import LoadingIndicator from "~/components/LoadingIndicator";
 import Scrollable from "~/components/Scrollable";
 import Text from "~/components/Text";
 import useCurrentTeam from "~/hooks/useCurrentTeam";
@@ -20,12 +20,12 @@ import useMaxHeight from "~/hooks/useMaxHeight";
 import usePolicy from "~/hooks/usePolicy";
 import useRequest from "~/hooks/useRequest";
 import useStores from "~/hooks/useStores";
-import { Avatar, AvatarSize } from "../../Avatar";
+import Avatar from "../../Avatar";
+import { AvatarSize } from "../../Avatar/Avatar";
 import CollectionIcon from "../../Icons/CollectionIcon";
 import Tooltip from "../../Tooltip";
 import { Separator } from "../components";
 import { ListItem } from "../components/ListItem";
-import { Placeholder } from "../components/Placeholder";
 import DocumentMemberList from "./DocumentMemberList";
 import PublicAccess from "./PublicAccess";
 
@@ -58,50 +58,33 @@ export const AccessControlList = observer(
     const collection = document.collection;
     const usersInCollection = useUsersInCollection(collection);
     const user = useCurrentUser();
-    const { userMemberships, groupMemberships } = useStores();
+    const { userMemberships } = useStores();
     const collectionSharingDisabled = document.collection?.sharing === false;
     const team = useCurrentTeam();
     const can = usePolicy(document);
-    const canCollection = usePolicy(collection);
-    const documentId = document.id;
 
     const containerRef = React.useRef<HTMLDivElement | null>(null);
     const { maxHeight, calcMaxHeight } = useMaxHeight({
       elementRef: containerRef,
-      maxViewportPercentage: 65,
+      maxViewportPercentage: 70,
       margin: 24,
     });
 
-    const { loading: userMembershipLoading, request: fetchUserMemberships } =
+    const { loading: loadingDocumentMembers, request: fetchDocumentMembers } =
       useRequest(
         React.useCallback(
           () =>
             userMemberships.fetchDocumentMemberships({
-              id: documentId,
+              id: document.id,
               limit: Pagination.defaultLimit,
             }),
-          [userMemberships, documentId]
+          [userMemberships, document.id]
         )
       );
 
-    const { loading: groupMembershipLoading, request: fetchGroupMemberships } =
-      useRequest(
-        React.useCallback(
-          () => groupMemberships.fetchAll({ documentId }),
-          [groupMemberships, documentId]
-        )
-      );
-
-    const hasMemberships =
-      groupMemberships.inDocument(documentId)?.length > 0 ||
-      document.members.length > 0;
-    const showLoading =
-      !hasMemberships && (groupMembershipLoading || userMembershipLoading);
-
     React.useEffect(() => {
-      void fetchUserMemberships();
-      void fetchGroupMemberships();
-    }, [fetchUserMemberships, fetchGroupMemberships]);
+      void fetchDocumentMembers();
+    }, [fetchDocumentMembers]);
 
     React.useEffect(() => {
       calcMaxHeight();
@@ -113,96 +96,88 @@ export const AccessControlList = observer(
         hiddenScrollbars
         style={{ maxHeight }}
       >
-        {showLoading ? (
-          <Placeholder />
+        {loadingDocumentMembers && <LoadingIndicator />}
+        {collection ? (
+          <>
+            {collection.permission ? (
+              <ListItem
+                image={
+                  <Squircle color={theme.accent} size={AvatarSize.Medium}>
+                    <UserIcon color={theme.accentText} size={16} />
+                  </Squircle>
+                }
+                title={t("All members")}
+                subtitle={t("Everyone in the workspace")}
+                actions={
+                  <AccessTooltip>
+                    {collection?.permission === CollectionPermission.ReadWrite
+                      ? t("Can edit")
+                      : t("Can view")}
+                  </AccessTooltip>
+                }
+              />
+            ) : usersInCollection ? (
+              <ListItem
+                image={<CollectionSquircle collection={collection} />}
+                title={collection.name}
+                subtitle={t("Everyone in the collection")}
+                actions={<AccessTooltip>{t("Can view")}</AccessTooltip>}
+              />
+            ) : (
+              <ListItem
+                image={<Avatar model={user} showBorder={false} />}
+                title={user.name}
+                subtitle={t("You have full access")}
+                actions={<AccessTooltip>{t("Can edit")}</AccessTooltip>}
+              />
+            )}
+            <DocumentMemberList
+              document={document}
+              invitedInSession={invitedInSession}
+            />
+          </>
+        ) : document.isDraft ? (
+          <>
+            <ListItem
+              image={<Avatar model={document.createdBy} showBorder={false} />}
+              title={document.createdBy?.name}
+              actions={
+                <AccessTooltip content={t("Created the document")}>
+                  {t("Can edit")}
+                </AccessTooltip>
+              }
+            />
+            <DocumentMemberList
+              document={document}
+              invitedInSession={invitedInSession}
+            />
+          </>
         ) : (
           <>
-            {collection && canCollection.readDocument ? (
-              <>
-                {collection.permission ? (
-                  <ListItem
-                    image={
-                      <Squircle color={theme.accent} size={AvatarSize.Medium}>
-                        <UserIcon color={theme.accentText} size={16} />
-                      </Squircle>
-                    }
-                    title={t("All members")}
-                    subtitle={t("Everyone in the workspace")}
-                    actions={
-                      <AccessTooltip>
-                        {collection?.permission ===
-                        CollectionPermission.ReadWrite
-                          ? t("Can edit")
-                          : t("Can view")}
-                      </AccessTooltip>
-                    }
-                  />
-                ) : usersInCollection ? (
-                  <ListItem
-                    image={<CollectionSquircle collection={collection} />}
-                    title={collection.name}
-                    subtitle={t("Everyone in the collection")}
-                    actions={<AccessTooltip>{t("Can view")}</AccessTooltip>}
-                  />
-                ) : (
-                  <ListItem
-                    image={<Avatar model={user} showBorder={false} />}
-                    title={user.name}
-                    subtitle={t("You have full access")}
-                    actions={<AccessTooltip>{t("Can edit")}</AccessTooltip>}
-                  />
-                )}
-                <DocumentMemberList
-                  document={document}
-                  invitedInSession={invitedInSession}
+            <DocumentMemberList
+              document={document}
+              invitedInSession={invitedInSession}
+            />
+            <ListItem
+              image={
+                <Squircle color={theme.accent} size={AvatarSize.Medium}>
+                  <MoreIcon color={theme.accentText} size={16} />
+                </Squircle>
+              }
+              title={t("Other people")}
+              subtitle={t("Other workspace members may have access")}
+              actions={
+                <AccessTooltip
+                  content={t(
+                    "This document may be shared with more workspace members through a parent document or collection you do not have access to"
+                  )}
                 />
-              </>
-            ) : document.isDraft ? (
-              <>
-                <ListItem
-                  image={
-                    <Avatar model={document.createdBy} showBorder={false} />
-                  }
-                  title={document.createdBy?.name}
-                  actions={
-                    <AccessTooltip content={t("Created the document")}>
-                      {t("Can edit")}
-                    </AccessTooltip>
-                  }
-                />
-                <DocumentMemberList
-                  document={document}
-                  invitedInSession={invitedInSession}
-                />
-              </>
-            ) : (
-              <>
-                <DocumentMemberList
-                  document={document}
-                  invitedInSession={invitedInSession}
-                />
-                <ListItem
-                  image={
-                    <Squircle color={theme.accent} size={AvatarSize.Medium}>
-                      <MoreIcon color={theme.accentText} size={16} />
-                    </Squircle>
-                  }
-                  title={t("Other people")}
-                  subtitle={t("Other workspace members may have access")}
-                  actions={
-                    <AccessTooltip
-                      content={t(
-                        "This document may be shared with more workspace members through a parent document or collection you do not have access to"
-                      )}
-                    />
-                  }
-                />
-              </>
-            )}
+              }
+            />
           </>
         )}
         {team.sharing && can.share && !collectionSharingDisabled && visible && (
-          <Sticky>
+          <>
             {document.members.length ? <Separator /> : null}
             <PublicAccess
               document={document}
@@ -210,7 +185,7 @@ export const AccessControlList = observer(
               sharedParent={sharedParent}
               onRequestClose={onRequestClose}
             />
-          </Sticky>
+          </>
         )}
       </ScrollableContainer>
     );
@@ -275,12 +250,6 @@ function useUsersInCollection(collection?: Collection) {
     : false;
 }
 
-const Sticky = styled.div`
-  background: ${s("menuBackground")};
-  position: sticky;
-  bottom: -12px;
-`;
-
 const ScrollableContainer = styled(Scrollable)`
   padding: 12px 24px;
   margin: -12px -24px;

app/components/Sharing/Document/DocumentMemberList.tsx

@@ -1,23 +1,16 @@
 import orderBy from "lodash/orderBy";
 import { observer } from "mobx-react";
 import * as React from "react";
-import { useTranslation, Trans } from "react-i18next";
-import { Link, useHistory } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { useHistory } from "react-router-dom";
 import { toast } from "sonner";
-import styled, { useTheme } from "styled-components";
-import { s } from "@shared/styles";
-import { DocumentPermission } from "@shared/types";
 import Document from "~/models/Document";
 import UserMembership from "~/models/UserMembership";
-import { GroupAvatar } from "~/components/Avatar";
-import InputMemberPermissionSelect from "~/components/InputMemberPermissionSelect";
 import useCurrentUser from "~/hooks/useCurrentUser";
 import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
-import { EmptySelectValue, Permission } from "~/types";
 import { homePath } from "~/utils/routeHelpers";
-import { ListItem } from "../components/ListItem";
-import DocumentMemberListItem from "./DocumentMemberListItem";
+import MemberListItem from "./DocumentMemberListItem";
 
 type Props = {
   /** Document to which team members are supposed to be invited */
@@ -29,13 +22,12 @@ type Props = {
 };
 
 function DocumentMembersList({ document, invitedInSession }: Props) {
-  const { userMemberships, groupMemberships } = useStores();
+  const { userMemberships } = useStores();
 
   const user = useCurrentUser();
   const history = useHistory();
   const can = usePolicy(document);
   const { t } = useTranslation();
-  const theme = useTheme();
 
   const handleRemoveUser = React.useCallback(
     async (item) => {
@@ -58,7 +50,7 @@ function DocumentMembersList({ document, invitedInSession }: Props) {
         toast.error(t("Could not remove user"));
       }
     },
-    [t, history, userMemberships, user, document]
+    [history, userMemberships, user, document]
   );
 
   const handleUpdateUser = React.useCallback(
@@ -78,7 +70,7 @@ function DocumentMembersList({ document, invitedInSession }: Props) {
         toast.error(t("Could not update user"));
       }
     },
-    [t, userMemberships, document]
+    [userMemberships, document]
   );
 
   // Order newly added users first during the current editing session, on reload members are
@@ -95,101 +87,10 @@ function DocumentMembersList({ document, invitedInSession }: Props) {
     [document.members, invitedInSession]
   );
 
-  const permissions = React.useMemo(
-    () =>
-      [
-        {
-          label: t("View only"),
-          value: DocumentPermission.Read,
-        },
-        {
-          label: t("Can edit"),
-          value: DocumentPermission.ReadWrite,
-        },
-        {
-          label: t("Manage"),
-          value: DocumentPermission.Admin,
-        },
-        {
-          divider: true,
-          label: t("Remove"),
-          value: EmptySelectValue,
-        },
-      ] as Permission[],
-    [t]
-  );
-
   return (
     <>
-      {groupMemberships
-        .inDocument(document.id)
-        .sort((a, b) =>
-          (
-            (invitedInSession.includes(a.group.id) ? "_" : "") + a.group.name
-          ).localeCompare(b.group.name)
-        )
-        .map((membership) => {
-          const MaybeLink = membership?.source ? StyledLink : React.Fragment;
-          return (
-            <ListItem
-              key={membership.id}
-              image={
-                <GroupAvatar
-                  group={membership.group}
-                  backgroundColor={theme.modalBackground}
-                />
-              }
-              title={membership.group.name}
-              subtitle={
-                membership.sourceId ? (
-                  <Trans>
-                    Has access through{" "}
-                    <MaybeLink
-                      // @ts-expect-error to prop does not exist on React.Fragment
-                      to={membership.source?.document?.path ?? ""}
-                    >
-                      parent
-                    </MaybeLink>
-                  </Trans>
-                ) : (
-                  t("{{ count }} member", {
-                    count: membership.group.memberCount,
-                  })
-                )
-              }
-              actions={
-                <div style={{ marginRight: -8 }}>
-                  <InputMemberPermissionSelect
-                    style={{ margin: 0 }}
-                    permissions={permissions}
-                    onChange={async (
-                      permission: DocumentPermission | typeof EmptySelectValue
-                    ) => {
-                      if (permission === EmptySelectValue) {
-                        await groupMemberships.delete({
-                          documentId: document.id,
-                          groupId: membership.groupId,
-                        });
-                      } else {
-                        await groupMemberships.create({
-                          documentId: document.id,
-                          groupId: membership.groupId,
-                          permission,
-                        });
-                      }
-                    }}
-                    disabled={!can.manageUsers}
-                    value={membership.permission}
-                    labelHidden
-                    nude
-                  />
-                </div>
-              }
-            />
-          );
-        })}
       {members.map((item) => (
-        <DocumentMemberListItem
+        <MemberListItem
           key={item.id}
           user={item}
           membership={item.getMembership(document)}
@@ -208,9 +109,4 @@ function DocumentMembersList({ document, invitedInSession }: Props) {
   );
 }
 
-const StyledLink = styled(Link)`
-  color: ${s("textTertiary")};
-  text-decoration: underline;
-`;
-
 export default observer(DocumentMembersList);

app/components/Sharing/Document/DocumentMemberListItem.tsx

@@ -7,9 +7,9 @@ import { s } from "@shared/styles";
 import { DocumentPermission } from "@shared/types";
 import User from "~/models/User";
 import UserMembership from "~/models/UserMembership";
-import { Avatar, AvatarSize } from "~/components/Avatar";
+import Avatar from "~/components/Avatar";
+import { AvatarSize } from "~/components/Avatar/Avatar";
 import InputMemberPermissionSelect from "~/components/InputMemberPermissionSelect";
-import Time from "~/components/Time";
 import { EmptySelectValue, Permission } from "~/types";
 import { ListItem } from "../components/ListItem";
 
@@ -68,6 +68,7 @@ const DocumentMemberListItem = ({
   if (!currentPermission) {
     return null;
   }
+  const disabled = !onUpdate && !onLeave;
   const MaybeLink = membership?.source ? StyledLink : React.Fragment;
 
   return (
@@ -89,35 +90,36 @@ const DocumentMemberListItem = ({
           </Trans>
         ) : user.isSuspended ? (
           t("Suspended")
+        ) : user.email ? (
+          user.email
         ) : user.isInvited ? (
           t("Invited")
-        ) : user.lastActiveAt ? (
-          <Trans>
-            Active <Time dateTime={user.lastActiveAt} /> ago
-          </Trans>
+        ) : user.isViewer ? (
+          t("Viewer")
         ) : (
-          t("Never signed in")
+          t("Editor")
         )
       }
       actions={
-        <div style={{ marginRight: -8 }}>
-          <InputMemberPermissionSelect
-            permissions={
-              onLeave
-                ? [
-                    currentPermission,
-                    {
-                      label: `${t("Leave")}…`,
-                      value: EmptySelectValue,
-                    },
-                  ]
-                : permissions
-            }
-            value={membership?.permission}
-            onChange={handleChange}
-            disabled={!onUpdate && !onLeave}
-          />
-        </div>
+        disabled ? null : (
+          <div style={{ marginRight: -8 }}>
+            <InputMemberPermissionSelect
+              permissions={
+                onLeave
+                  ? [
+                      currentPermission,
+                      {
+                        label: `${t("Leave")}…`,
+                        value: EmptySelectValue,
+                      },
+                    ]
+                  : permissions
+              }
+              value={membership?.permission}
+              onChange={handleChange}
+            />
+          </div>
+        )
       }
     />
   );

app/components/Sharing/Document/PublicAccess.tsx

@@ -1,13 +1,13 @@
+import invariant from "invariant";
 import debounce from "lodash/debounce";
 import isEmpty from "lodash/isEmpty";
 import { observer } from "mobx-react";
-import { CopyIcon, GlobeIcon, InfoIcon, QuestionMarkIcon } from "outline-icons";
+import { CopyIcon, GlobeIcon, InfoIcon } from "outline-icons";
 import * as React from "react";
 import { Trans, useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import { toast } from "sonner";
 import styled, { useTheme } from "styled-components";
-import Flex from "@shared/components/Flex";
 import Squircle from "@shared/components/Squircle";
 import { s } from "@shared/styles";
 import { UrlHelper } from "@shared/utils/UrlHelper";
@@ -17,7 +17,8 @@ import Input, { NativeInput } from "~/components/Input";
 import Switch from "~/components/Switch";
 import env from "~/env";
 import usePolicy from "~/hooks/usePolicy";
-import { AvatarSize } from "../../Avatar";
+import useStores from "~/hooks/useStores";
+import { AvatarSize } from "../../Avatar/Avatar";
 import CopyToClipboard from "../../CopyToClipboard";
 import NudeButton from "../../NudeButton";
 import { ResizingHeightContainer } from "../../ResizingHeightContainer";
@@ -38,6 +39,7 @@ type Props = {
 };
 
 function PublicAccess({ document, share, sharedParent }: Props) {
+  const { shares } = useStores();
   const { t } = useTranslation();
   const theme = useTheme();
   const [validationError, setValidationError] = React.useState("");
@@ -51,30 +53,20 @@ function PublicAccess({ document, share, sharedParent }: Props) {
     setUrlId(share?.urlId);
   }, [share?.urlId]);
 
-  const handleIndexingChanged = React.useCallback(
-    async (event) => {
-      try {
-        await share?.save({
-          allowIndexing: event.currentTarget.checked,
-        });
-      } catch (err) {
-        toast.error(err.message);
-      }
-    },
-    [share]
-  );
-
   const handlePublishedChange = React.useCallback(
     async (event) => {
+      const share = shares.getByDocumentId(document.id);
+      invariant(share, "Share must exist");
+
       try {
-        await share?.save({
+        await share.save({
           published: event.currentTarget.checked,
         });
       } catch (err) {
         toast.error(err.message);
       }
     },
-    [share]
+    [document.id, shares]
   );
 
   const handleUrlChange = React.useMemo(
@@ -167,32 +159,6 @@ function PublicAccess({ document, share, sharedParent }: Props) {
       />
 
       <ResizingHeightContainer>
-        {share?.published && (
-          <ListItem
-            title={
-              <Text type="tertiary" as={Flex}>
-                {t("Search engine indexing")}&nbsp;
-                <Tooltip
-                  content={t(
-                    "Disable this setting to discourage search engines from indexing the page"
-                  )}
-                >
-                  <QuestionMarkIcon size={18} />
-                </Tooltip>
-              </Text>
-            }
-            actions={
-              <Switch
-                aria-label={t("Search engine indexing")}
-                checked={share?.allowIndexing ?? false}
-                onChange={handleIndexingChanged}
-                width={26}
-                height={14}
-              />
-            }
-          />
-        )}
-
         {sharedParent?.published ? (
           <ShareLinkInput type="text" disabled defaultValue={shareUrl}>
             {copyButton}
@@ -237,7 +203,7 @@ const StyledInfoIcon = styled(InfoIcon)`
 `;
 
 const Wrapper = styled.div`
-  padding-bottom: 8px;
+  margin-bottom: 8px;
 `;
 
 const DomainPrefix = styled.span`

app/components/Sharing/Document/SharePopover.tsx

@@ -7,9 +7,10 @@ import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
 import { DocumentPermission } from "@shared/types";
 import Document from "~/models/Document";
-import Group from "~/models/Group";
+import Share from "~/models/Share";
 import User from "~/models/User";
-import { Avatar, GroupAvatar, AvatarSize } from "~/components/Avatar";
+import Avatar from "~/components/Avatar";
+import { AvatarSize } from "~/components/Avatar/Avatar";
 import NudeButton from "~/components/NudeButton";
 import { createAction } from "~/actions";
 import { UserSection } from "~/actions/sections";
@@ -31,21 +32,28 @@ import { AccessControlList } from "./AccessControlList";
 type Props = {
   /** The document to share. */
   document: Document;
+  /** The existing share model, if any. */
+  share: Share | null | undefined;
+  /** The existing share parent model, if any. */
+  sharedParent: Share | null | undefined;
   /** Callback fired when the popover requests to be closed. */
   onRequestClose: () => void;
   /** Whether the popover is visible. */
   visible: boolean;
 };
 
-function SharePopover({ document, onRequestClose, visible }: Props) {
+function SharePopover({
+  document,
+  share,
+  sharedParent,
+  onRequestClose,
+  visible,
+}: Props) {
   const team = useCurrentTeam();
   const { t } = useTranslation();
   const can = usePolicy(document);
-  const { shares } = useStores();
-  const share = shares.getByDocumentId(document.id);
-  const sharedParent = shares.getByDocumentParents(document.id);
   const [hasRendered, setHasRendered] = React.useState(visible);
-  const { users, userMemberships, groups, groupMemberships } = useStores();
+  const { users, userMemberships } = useStores();
   const [query, setQuery] = React.useState("");
   const [picker, showPicker, hidePicker] = useBoolean();
   const [invitedInSession, setInvitedInSession] = React.useState<string[]>([]);
@@ -121,9 +129,9 @@ function SharePopover({ document, onRequestClose, visible }: Props) {
         name: t("Invite"),
         section: UserSection,
         perform: async () => {
-          const invited = await Promise.all(
+          const usersInvited = await Promise.all(
             pendingIds.map(async (idOrEmail) => {
-              let user, group;
+              let user;
 
               // convert email to user
               if (isEmail(idOrEmail)) {
@@ -137,77 +145,38 @@ function SharePopover({ document, onRequestClose, visible }: Props) {
                 user = response[0];
               } else {
                 user = users.get(idOrEmail);
-                group = groups.get(idOrEmail);
               }
 
-              if (user) {
-                await userMemberships.create({
-                  documentId: document.id,
-                  userId: user.id,
-                  permission,
-                });
-                return user;
+              if (!user) {
+                return;
               }
 
-              if (group) {
-                await groupMemberships.create({
-                  documentId: document.id,
-                  groupId: group.id,
-                  permission,
-                });
-                return group;
-              }
+              await userMemberships.create({
+                documentId: document.id,
+                userId: user.id,
+                permission,
+              });
 
-              return;
+              return user;
             })
           );
 
-          const invitedUsers = invited.filter(
-            (item) => item instanceof User
-          ) as User[];
-          const invitedGroups = invited.filter(
-            (item) => item instanceof Group
-          ) as Group[];
-
-          if (invitedUsers.length > 0) {
-            // Special case for the common action of adding a single user.
-            if (invitedUsers.length === 1) {
-              const user = invitedUsers[0];
-              toast.message(
-                t("{{ userName }} was added to the document", {
-                  userName: user.name,
-                }),
-                {
-                  icon: <Avatar model={user} size={AvatarSize.Toast} />,
-                }
-              );
-            } else {
-              toast.message(
-                t("{{ count }} people added to the document", {
-                  count: invitedUsers.length,
-                })
-              );
-            }
-          }
-          if (invitedGroups.length > 0) {
-            // Special case for the common action of adding a single group.
-            if (invitedGroups.length === 1) {
-              const group = invitedGroups[0];
-              toast.message(
-                t("{{ userName }} was added to the document", {
-                  userName: group.name,
-                }),
-                {
-                  icon: <GroupAvatar group={group} size={AvatarSize.Toast} />,
-                }
-              );
-            } else {
-              toast.message(
-                t("{{ count }} groups added to the document", {
-                  count: invitedGroups.length,
-                })
-              );
-            }
+          if (usersInvited.length === 1) {
+            const user = usersInvited[0] as User;
+            toast.message(
+              t("{{ userName }} was invited to the document", {
+                userName: user.name,
+              }),
+              {
+                icon: <Avatar model={user} size={AvatarSize.Toast} />,
+              }
+            );
+          } else {
+            toast.success(
+              t("{{ count }} people invited to the document", {
+                count: pendingIds.length,
+              })
+            );
           }
 
           setInvitedInSession((prev) => [...prev, ...pendingIds]);
@@ -216,16 +185,14 @@ function SharePopover({ document, onRequestClose, visible }: Props) {
         },
       }),
     [
-      document.id,
-      groupMemberships,
-      groups,
+      t,
+      pendingIds,
       hidePicker,
       userMemberships,
-      pendingIds,
+      document.id,
       permission,
-      t,
-      team.defaultUserRole,
       users,
+      team.defaultUserRole,
     ]
   );
 

app/components/Sharing/components/Placeholder.tsx

@@ -1,47 +0,0 @@
-import times from "lodash/times";
-import * as React from "react";
-import { AvatarSize } from "~/components/Avatar";
-import Fade from "~/components/Fade";
-import PlaceholderText from "~/components/PlaceholderText";
-import { ListItem } from "../components/ListItem";
-
-type Props = {
-  count?: number;
-};
-
-/**
- * Placeholder for a list item in the share popover.
- */
-export function Placeholder({ count = 1 }: Props) {
-  return (
-    <Fade>
-      {times(count, (index) => (
-        <ListItem
-          key={index}
-          image={
-            <PlaceholderText
-              width={AvatarSize.Medium}
-              height={AvatarSize.Medium}
-            />
-          }
-          title={
-            <PlaceholderText
-              maxWidth={50}
-              minWidth={30}
-              height={14}
-              style={{ marginTop: 4, marginBottom: 4 }}
-            />
-          }
-          subtitle={
-            <PlaceholderText
-              maxWidth={75}
-              minWidth={50}
-              height={12}
-              style={{ marginBottom: 4 }}
-            />
-          }
-        />
-      ))}
-    </Fade>
-  );
-}

app/components/Sharing/components/Suggestions.tsx

@@ -1,10 +1,11 @@
 import { isEmail } from "class-validator";
 import concat from "lodash/concat";
 import { observer } from "mobx-react";
-import { CheckmarkIcon, CloseIcon } from "outline-icons";
+import { CheckmarkIcon, CloseIcon, GroupIcon } 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 Squircle from "@shared/components/Squircle";
 import { s } from "@shared/styles";
 import { stringToColor } from "@shared/utils/color";
 import Collection from "~/models/Collection";
@@ -12,7 +13,8 @@ import Document from "~/models/Document";
 import Group from "~/models/Group";
 import User from "~/models/User";
 import ArrowKeyNavigation from "~/components/ArrowKeyNavigation";
-import { Avatar, GroupAvatar, AvatarSize, IAvatar } from "~/components/Avatar";
+import Avatar from "~/components/Avatar";
+import { AvatarSize, IAvatar } from "~/components/Avatar/Avatar";
 import Empty from "~/components/Empty";
 import Placeholder from "~/components/List/Placeholder";
 import Scrollable from "~/components/Scrollable";
@@ -40,6 +42,8 @@ type Props = {
   addPendingId: (id: string) => void;
   /** Callback to remove a user from the pending list. */
   removePendingId: (id: string) => void;
+  /** Show group suggestions. */
+  showGroups?: boolean;
   /** Handles escape from suggestions list */
   onEscape?: (ev: React.KeyboardEvent<HTMLDivElement>) => void;
 };
@@ -53,6 +57,7 @@ export const Suggestions = observer(
       pendingIds,
       addPendingId,
       removePendingId,
+      showGroups,
       onEscape,
     }: Props,
     ref: React.Ref<HTMLDivElement>
@@ -61,6 +66,7 @@ export const Suggestions = observer(
     const { users, groups } = useStores();
     const { t } = useTranslation();
     const user = useCurrentUser();
+    const theme = useTheme();
     const containerRef = React.useRef<HTMLDivElement | null>(null);
     const { maxHeight } = useMaxHeight({
       elementRef: containerRef,
@@ -70,7 +76,10 @@ export const Suggestions = observer(
     const fetchUsersByQuery = useThrottledCallback(
       (query: string) => {
         void users.fetchPage({ query });
-        void groups.fetchPage({ query });
+
+        if (showGroups) {
+          void groups.fetchPage({ query });
+        }
       },
       250,
       undefined,
@@ -98,20 +107,17 @@ export const Suggestions = observer(
           : collection
           ? users.notInCollection(collection.id, query)
           : users.orderedData
-      ).filter((u) => !u.isSuspended && u.id !== user.id);
+      ).filter((u) => !u.isSuspended);
 
       if (isEmail(query)) {
         filtered.push(getSuggestionForEmail(query));
       }
 
-      return [
-        ...(document
-          ? groups.notInDocument(document.id, query)
-          : collection
-          ? groups.notInCollection(collection.id, query)
-          : []),
-        ...filtered,
-      ];
+      if (collection?.id) {
+        return [...groups.notInCollection(collection.id, query), ...filtered];
+      }
+
+      return filtered;
     }, [
       getSuggestionForEmail,
       users,
@@ -135,7 +141,7 @@ export const Suggestions = observer(
               : users.get(id) ?? groups.get(id)
           )
           .filter(Boolean) as User[],
-      [users, groups, getSuggestionForEmail, pendingIds]
+      [users, getSuggestionForEmail, pendingIds]
     );
 
     React.useEffect(() => {
@@ -149,7 +155,11 @@ export const Suggestions = observer(
           subtitle: t("{{ count }} member", {
             count: suggestion.memberCount,
           }),
-          image: <GroupAvatar group={suggestion} />,
+          image: (
+            <Squircle color={theme.text} size={AvatarSize.Medium}>
+              <GroupIcon color={theme.background} size={16} />
+            </Squircle>
+          ),
         };
       }
       return {

app/components/Sharing/components/index.tsx

@@ -15,7 +15,7 @@ export const Wrapper = styled.div`
 
 export const Separator = styled.div`
   border-top: 1px dashed ${s("divider")};
-  margin: 8px 0;
+  margin: 12px 0;
 `;
 
 export const HeaderInput = styled(Flex)`

app/components/Sidebar/App.tsx

@@ -94,7 +94,7 @@ function AppSidebar() {
               </SidebarButton>
             )}
           </OrganizationMenu>
-          <Overflow>
+          <Scrollable flex shadow>
             <Section>
               <SidebarLink
                 to={homePath()}
@@ -117,9 +117,7 @@ function AppSidebar() {
                       {t("Drafts")}
                       {documents.totalDrafts > 0 ? (
                         <Drafts size="xsmall" type="tertiary">
-                          {documents.totalDrafts > 25
-                            ? "25+"
-                            : documents.totalDrafts}
+                          {documents.totalDrafts}
                         </Drafts>
                       ) : null}
                     </Flex>
@@ -127,24 +125,22 @@ function AppSidebar() {
                 />
               )}
             </Section>
-          </Overflow>
-          <Scrollable flex shadow>
             <Section>
               <Starred />
             </Section>
             <Section>
               <SharedWithMe />
             </Section>
-            <Section>
+            <Section auto>
               <Collections />
             </Section>
-            {can.createDocument && (
-              <Section auto>
-                <ArchiveLink />
-              </Section>
-            )}
             <Section>
-              {can.createDocument && <TrashLink />}
+              {can.createDocument && (
+                <>
+                  <ArchiveLink />
+                  <TrashLink />
+                </>
+              )}
               <SidebarAction action={inviteUser} />
             </Section>
           </Scrollable>
@@ -154,11 +150,6 @@ function AppSidebar() {
   );
 }
 
-const Overflow = styled.div`
-  overflow: hidden;
-  flex-shrink: 0;
-`;
-
 const Drafts = styled(Text)`
   margin: 0 4px;
 `;

app/components/Sidebar/Shared.tsx

@@ -1,18 +1,13 @@
 import { observer } from "mobx-react";
-import { SidebarIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import { NavigationNode } from "@shared/types";
-import Flex from "~/components/Flex";
 import Scrollable from "~/components/Scrollable";
 import SearchPopover from "~/components/SearchPopover";
-import Tooltip from "~/components/Tooltip";
 import useCurrentUser from "~/hooks/useCurrentUser";
 import useStores from "~/hooks/useStores";
-import { hover } from "~/styles";
 import history from "~/utils/history";
-import { metaDisplay } from "~/utils/keyboard";
 import { homePath, sharedDocumentPath } from "~/utils/routeHelpers";
 import { useTeamContext } from "../TeamContext";
 import TeamLogo from "../TeamLogo";
@@ -20,7 +15,6 @@ import Sidebar from "./Sidebar";
 import Section from "./components/Section";
 import DocumentLink from "./components/SharedDocumentLink";
 import SidebarButton from "./components/SidebarButton";
-import ToggleButton from "./components/ToggleButton";
 
 type Props = {
   rootNode: NavigationNode;
@@ -33,11 +27,9 @@ function SharedSidebar({ rootNode, shareId }: Props) {
   const { ui, documents } = useStores();
   const { t } = useTranslation();
 
-  const teamAvailable = !!team?.name;
-
   return (
-    <StyledSidebar $hoverTransition={!teamAvailable}>
-      {teamAvailable && (
+    <Sidebar>
+      {team?.name && (
         <SidebarButton
           title={team.name}
           image={<TeamLogo model={team} size={32} alt={t("Logo")} />}
@@ -46,20 +38,11 @@ function SharedSidebar({ rootNode, shareId }: Props) {
               user ? homePath() : sharedDocumentPath(shareId, rootNode.url)
             )
           }
-        >
-          <ToggleSidebar />
-        </SidebarButton>
+        />
       )}
       <ScrollContainer topShadow flex>
         <TopSection>
-          <SearchWrapper>
-            <StyledSearchPopover shareId={shareId} />
-          </SearchWrapper>
-          {!teamAvailable && (
-            <ToggleWrapper>
-              <ToggleSidebar />
-            </ToggleWrapper>
-          )}
+          <SearchPopover shareId={shareId} />
         </TopSection>
         <Section>
           <DocumentLink
@@ -72,74 +55,23 @@ function SharedSidebar({ rootNode, shareId }: Props) {
           />
         </Section>
       </ScrollContainer>
-    </StyledSidebar>
+    </Sidebar>
   );
 }
 
-const ToggleSidebar = () => {
-  const { t } = useTranslation();
-  const { ui } = useStores();
-
-  return (
-    <Tooltip
-      content={t("Toggle sidebar")}
-      shortcut={`${metaDisplay}+.`}
-      delay={500}
-    >
-      <ToggleButton
-        position="bottom"
-        image={<SidebarIcon />}
-        onClick={() => {
-          ui.toggleCollapsedSidebar();
-          (document.activeElement as HTMLElement)?.blur();
-        }}
-      />
-    </Tooltip>
-  );
-};
-
 const ScrollContainer = styled(Scrollable)`
   padding-bottom: 16px;
 `;
 
-const TopSection = styled(Flex)`
-  padding: 8px;
-  flex-shrink: 0;
-`;
+const TopSection = styled(Section)`
+  // this weird looking && increases the specificity of the style rule
+  &&:first-child {
+    margin-top: 16px;
+  }
 
-const SearchWrapper = styled.div`
-  width: 100%;
-`;
-
-const StyledSearchPopover = styled(SearchPopover)`
-  width: 100%;
-  transition: width 100ms ease-out;
-  margin: 8px 0;
-`;
-
-const ToggleWrapper = styled.div`
-  position: absolute;
-  right: 0;
-  opacity: 0;
-  transform: translateX(10px);
-  transition: opacity 100ms ease-out, transform 100ms ease-out;
-`;
-
-const StyledSidebar = styled(Sidebar)<{ $hoverTransition: boolean }>`
-  ${({ $hoverTransition }) =>
-    $hoverTransition &&
-    `
-      &: ${hover} {
-        ${StyledSearchPopover} {
-          width: 85%;
-        }
-
-        ${ToggleWrapper} {
-          opacity: 1;
-          transform: translateX(0);
-        }
-      }
-    `}
+  && {
+    margin-bottom: 16px;
+  }
 `;
 
 export default observer(SharedSidebar);

app/components/Sidebar/Sidebar.tsx

@@ -4,17 +4,16 @@ import { useLocation } from "react-router-dom";
 import styled, { css, useTheme } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import { depths, s } from "@shared/styles";
-import { Avatar } from "~/components/Avatar";
 import Flex from "~/components/Flex";
 import useCurrentUser from "~/hooks/useCurrentUser";
 import useMenuContext from "~/hooks/useMenuContext";
-import useMobile from "~/hooks/useMobile";
 import usePrevious from "~/hooks/usePrevious";
 import useStores from "~/hooks/useStores";
 import AccountMenu from "~/menus/AccountMenu";
 import { fadeOnDesktopBackgrounded } from "~/styles";
 import { fadeIn } from "~/styles/animations";
 import Desktop from "~/utils/Desktop";
+import Avatar from "../Avatar";
 import NotificationIcon from "../Notifications/NotificationIcon";
 import NotificationsPopover from "../Notifications/NotificationsPopover";
 import ResizeBorder from "./components/ResizeBorder";
@@ -40,7 +39,6 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(function _Sidebar(
   const previousLocation = usePrevious(location);
   const { isMenuOpen } = useMenuContext();
   const user = useCurrentUser({ rejectOnEmpty: false });
-  const isMobile = useMobile();
   const width = ui.sidebarWidth;
   const collapsed = ui.sidebarIsClosed && !isMenuOpen;
   const maxWidth = theme.sidebarMaxWidth;
@@ -94,17 +92,9 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(function _Sidebar(
     }
   }, [ui, isSmallerThanMinimum, minWidth, width, setWidth]);
 
-  const handleBlur = React.useCallback(() => {
-    setHovering(false);
-  }, []);
-
   const handleMouseDown = React.useCallback(
     (event) => {
       event.preventDefault();
-      if (!document.hasFocus()) {
-        return;
-      }
-
       setOffset(event.pageX - width);
       setResizing(true);
       setAnimating(false);
@@ -112,9 +102,9 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(function _Sidebar(
     [width]
   );
 
-  const handlePointerActivity = React.useCallback(() => {
+  const handlePointerMove = React.useCallback(() => {
     if (ui.sidebarIsClosed) {
-      setHovering(document.hasFocus());
+      setHovering(true);
       setPointerMoved(true);
     }
   }, [ui.sidebarIsClosed]);
@@ -123,10 +113,7 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(function _Sidebar(
     (ev) => {
       if (hasPointerMoved) {
         setHovering(
-          document.hasFocus() &&
-            ev.pageX < width &&
-            ev.pageY < window.innerHeight &&
-            ev.pageY > 0
+          ev.pageX < width && ev.pageY < window.innerHeight && ev.pageY > 0
         );
       }
     },
@@ -164,14 +151,11 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(function _Sidebar(
       document.body.style.cursor = "initial";
     }
 
-    window.addEventListener("blur", handleBlur);
-
     return () => {
-      window.removeEventListener("blur", handleBlur);
       document.removeEventListener("mousemove", handleDrag);
       document.removeEventListener("mouseup", handleStopDrag);
     };
-  }, [isResizing, handleDrag, handleBlur, handleStopDrag]);
+  }, [isResizing, handleDrag, handleStopDrag]);
 
   const handleReset = React.useCallback(() => {
     ui.setSidebarWidth(theme.sidebarWidth);
@@ -205,10 +189,8 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(function _Sidebar(
         $isSmallerThanMinimum={isSmallerThanMinimum}
         $mobileSidebarVisible={ui.mobileSidebarVisible}
         $collapsed={collapsed}
-        $isMobile={isMobile}
         className={className}
-        onPointerDown={handlePointerActivity}
-        onPointerMove={handlePointerActivity}
+        onPointerMove={handlePointerMove}
         onPointerLeave={handlePointerLeave}
         column
       >
@@ -232,7 +214,15 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(function _Sidebar(
                   />
                 }
               >
-                <Notifications />
+                <NotificationsPopover>
+                  {(rest: SidebarButtonProps) => (
+                    <SidebarButton
+                      {...rest}
+                      position="bottom"
+                      image={<NotificationIcon />}
+                    />
+                  )}
+                </NotificationsPopover>
               </SidebarButton>
             )}
           </AccountMenu>
@@ -247,14 +237,6 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(function _Sidebar(
   );
 });
 
-const Notifications = () => (
-  <NotificationsPopover>
-    {(rest: SidebarButtonProps) => (
-      <SidebarButton {...rest} position="bottom" image={<NotificationIcon />} />
-    )}
-  </NotificationsPopover>
-);
-
 const Backdrop = styled.a`
   animation: ${fadeIn} 250ms ease-in-out;
   position: fixed;
@@ -274,7 +256,6 @@ type ContainerProps = {
   $isHovering: boolean;
   $collapsed: boolean;
   $hidden: boolean;
-  $isMobile: boolean;
 };
 
 const hoverStyles = (props: ContainerProps) => `
@@ -317,19 +298,8 @@ const Container = styled(Flex)<ContainerProps>`
 
   & > div {
     transition: opacity 150ms ease-in-out;
-    opacity: ${(props) => {
-      if (props.$hidden) {
-        return "0";
-      }
-      if (props.$isHovering) {
-        return "1";
-      }
-      if (props.$isMobile) {
-        return props.$mobileSidebarVisible ? "1" : "0";
-      } else {
-        return props.$collapsed ? "0" : "1";
-      }
-    }};
+    opacity: ${(props) =>
+      props.$hidden || (props.$collapsed && !props.$isHovering) ? "0" : "1"};
   }
 
   ${breakpoint("tablet")`

app/components/Sidebar/components/ArchiveLink.tsx

@@ -1,101 +1,41 @@
-import isUndefined from "lodash/isUndefined";
 import { observer } from "mobx-react";
 import { ArchiveIcon } from "outline-icons";
 import * as React from "react";
+import { useDrop } from "react-dnd";
 import { useTranslation } from "react-i18next";
-import Flex from "@shared/components/Flex";
-import Collection from "~/models/Collection";
-import PaginatedList from "~/components/PaginatedList";
-import useRequest from "~/hooks/useRequest";
+import { toast } from "sonner";
 import useStores from "~/hooks/useStores";
 import { archivePath } from "~/utils/routeHelpers";
-import { useDropToArchive } from "../hooks/useDragAndDrop";
-import { ArchivedCollectionLink } from "./ArchivedCollectionLink";
-import { StyledError } from "./Collections";
-import PlaceholderCollections from "./PlaceholderCollections";
-import Relative from "./Relative";
-import SidebarLink from "./SidebarLink";
+import SidebarLink, { DragObject } from "./SidebarLink";
 
 function ArchiveLink() {
-  const { collections } = useStores();
+  const { policies, documents } = useStores();
   const { t } = useTranslation();
 
-  const [disclosure, setDisclosure] = React.useState<boolean>(false);
-  const [expanded, setExpanded] = React.useState<boolean | undefined>();
-
-  const { request, data, loading, error } = useRequest(
-    collections.fetchArchived,
-    true
-  );
-
-  React.useEffect(() => {
-    if (!isUndefined(data) && !loading && isUndefined(error)) {
-      setDisclosure(data.length > 0);
-    }
-  }, [data, loading, error]);
-
-  React.useEffect(() => {
-    setDisclosure(collections.archived.length > 0);
-  }, [collections.archived]);
-
-  React.useEffect(() => {
-    if (disclosure && isUndefined(expanded)) {
-      setExpanded(false);
-    }
-  }, [disclosure]);
-
-  React.useEffect(() => {
-    if (expanded) {
-      void request();
-    }
-  }, [expanded, request]);
-
-  const handleDisclosureClick = React.useCallback((ev) => {
-    ev.preventDefault();
-    ev.stopPropagation();
-    setExpanded((e) => !e);
-  }, []);
-
-  const handleClick = React.useCallback(() => {
-    setExpanded(true);
-  }, []);
-
-  const [{ isOverArchiveSection, isDragging }, dropToArchiveRef] =
-    useDropToArchive();
+  const [{ isDocumentDropping }, dropToArchiveDocument] = useDrop({
+    accept: "document",
+    drop: async (item: DragObject) => {
+      const document = documents.get(item.id);
+      await document?.archive();
+      toast.success(t("Document archived"));
+    },
+    canDrop: (item) => policies.abilities(item.id).archive,
+    collect: (monitor) => ({
+      isDocumentDropping: monitor.isOver(),
+    }),
+  });
 
   return (
-    <Flex column>
-      <div ref={dropToArchiveRef}>
-        <SidebarLink
-          to={archivePath()}
-          icon={<ArchiveIcon open={isOverArchiveSection && isDragging} />}
-          exact={false}
-          label={t("Archive")}
-          isActiveDrop={isOverArchiveSection && isDragging}
-          depth={0}
-          expanded={disclosure ? expanded : undefined}
-          onDisclosureClick={handleDisclosureClick}
-          onClick={handleClick}
-        />
-      </div>
-      {expanded === true ? (
-        <Relative>
-          <PaginatedList
-            aria-label={t("Archived collections")}
-            items={collections.archived}
-            loading={<PlaceholderCollections />}
-            renderError={(props) => <StyledError {...props} />}
-            renderItem={(item: Collection) => (
-              <ArchivedCollectionLink
-                key={item.id}
-                depth={1}
-                collection={item}
-              />
-            )}
-          />
-        </Relative>
-      ) : null}
-    </Flex>
+    <div ref={dropToArchiveDocument}>
+      <SidebarLink
+        to={archivePath()}
+        icon={<ArchiveIcon open={isDocumentDropping} />}
+        exact={false}
+        label={t("Archive")}
+        active={documents.active?.isArchived && !documents.active?.isDeleted}
+        isActiveDrop={isDocumentDropping}
+      />
+    </div>
   );
 }
 

app/components/Sidebar/components/ArchivedCollectionLink.tsx

@@ -1,47 +0,0 @@
-import * as React from "react";
-import Collection from "~/models/Collection";
-import useStores from "~/hooks/useStores";
-import CollectionLink from "./CollectionLink";
-import CollectionLinkChildren from "./CollectionLinkChildren";
-import Relative from "./Relative";
-
-type Props = {
-  collection: Collection;
-  depth?: number;
-};
-
-export function ArchivedCollectionLink({ collection, depth }: Props) {
-  const { documents } = useStores();
-
-  const [expanded, setExpanded] = React.useState(false);
-
-  const handleDisclosureClick = React.useCallback((ev) => {
-    ev.preventDefault();
-    ev.stopPropagation();
-    setExpanded((e) => !e);
-  }, []);
-
-  const handleClick = React.useCallback(() => {
-    setExpanded(true);
-  }, []);
-
-  return (
-    <>
-      <CollectionLink
-        depth={depth ? depth : 0}
-        collection={collection}
-        expanded={expanded}
-        activeDocument={documents.active}
-        onDisclosureClick={handleDisclosureClick}
-        onClick={handleClick}
-      />
-      <Relative>
-        <CollectionLinkChildren
-          collection={collection}
-          expanded={expanded}
-          prefetchDocument={documents.prefetchDocument}
-        />
-      </Relative>
-    </>
-  );
-}

app/components/Sidebar/components/CollectionLink.tsx

@@ -4,10 +4,12 @@ import { PlusIcon } from "outline-icons";
 import * as React from "react";
 import { useDrop } from "react-dnd";
 import { useTranslation } from "react-i18next";
+import { useHistory } from "react-router-dom";
+import { NavigationNode } from "@shared/types";
 import { CollectionValidation } from "@shared/validations";
 import Collection from "~/models/Collection";
 import Document from "~/models/Document";
-import ConfirmMoveDialog from "~/components/ConfirmMoveDialog";
+import DocumentReparent from "~/scenes/DocumentReparent";
 import Fade from "~/components/Fade";
 import CollectionIcon from "~/components/Icons/CollectionIcon";
 import NudeButton from "~/components/NudeButton";
@@ -20,8 +22,8 @@ import CollectionMenu from "~/menus/CollectionMenu";
 import DropToImport from "./DropToImport";
 import EditableTitle, { RefHandle } from "./EditableTitle";
 import Relative from "./Relative";
-import { SidebarContextType, useSidebarContext } from "./SidebarContext";
 import SidebarLink, { DragObject } from "./SidebarLink";
+import { useStarredContext } from "./StarredContext";
 
 type Props = {
   collection: Collection;
@@ -29,8 +31,6 @@ type Props = {
   onDisclosureClick: (ev?: React.MouseEvent<HTMLButtonElement>) => void;
   activeDocument: Document | undefined;
   isDraggingAnyCollection?: boolean;
-  depth?: number;
-  onClick?: () => void;
 };
 
 const CollectionLink: React.FC<Props> = ({
@@ -38,15 +38,17 @@ const CollectionLink: React.FC<Props> = ({
   expanded,
   onDisclosureClick,
   isDraggingAnyCollection,
-  depth,
-  onClick,
 }: Props) => {
+  const itemRef = React.useRef<
+    NavigationNode & { depth: number; active: boolean; collectionId: string }
+  >();
   const { dialogs, documents, collections } = useStores();
   const [menuOpen, handleMenuOpen, handleMenuClose] = useBoolean();
   const [isEditing, setIsEditing] = React.useState(false);
   const can = usePolicy(collection);
   const { t } = useTranslation();
-  const sidebarContext = useSidebarContext();
+  const history = useHistory();
+  const inStarredSection = useStarredContext();
   const editableTitleRef = React.useRef<RefHandle>(null);
 
   const handleTitleChange = React.useCallback(
@@ -54,8 +56,9 @@ const CollectionLink: React.FC<Props> = ({
       await collection.save({
         name,
       });
+      history.replace(collection.path, history.location.state);
     },
-    [collection]
+    [collection, history]
   );
 
   // Drop to re-parent document
@@ -79,12 +82,22 @@ const CollectionLink: React.FC<Props> = ({
 
       if (
         prevCollection &&
+        prevCollection.permission === null &&
         prevCollection.permission !== collection.permission &&
         !document?.isDraft
       ) {
+        itemRef.current = item;
+
         dialogs.openModal({
-          title: t("Change permissions?"),
-          content: <ConfirmMoveDialog item={item} collection={collection} />,
+          title: t("Move document"),
+          content: (
+            <DocumentReparent
+              item={item}
+              collection={collection}
+              onSubmit={dialogs.closeAllModals}
+              onCancel={dialogs.closeAllModals}
+            />
+          ),
         });
       } else {
         await documents.move({ documentId: id, collectionId: collection.id });
@@ -103,74 +116,78 @@ const CollectionLink: React.FC<Props> = ({
     }),
   });
 
+  const handleTitleEditing = React.useCallback((value: boolean) => {
+    setIsEditing(value);
+  }, []);
+
   const handlePrefetch = React.useCallback(() => {
     void collection.fetchDocuments();
   }, [collection]);
 
   const context = useActionContext({
     activeCollectionId: collection.id,
-    sidebarContext,
+    inStarredSection,
   });
 
-  const handleRename = React.useCallback(() => {
-    editableTitleRef.current?.setIsEditing(true);
-  }, [editableTitleRef]);
-
   return (
-    <Relative ref={drop}>
-      <DropToImport collectionId={collection.id}>
-        <SidebarLink
-          onClick={onClick}
-          to={{
-            pathname: collection.path,
-            state: { sidebarContext },
-          }}
-          expanded={expanded}
-          onDisclosureClick={onDisclosureClick}
-          onClickIntent={handlePrefetch}
-          icon={<CollectionIcon collection={collection} expanded={expanded} />}
-          showActions={menuOpen}
-          isActiveDrop={isOver && canDrop}
-          isActive={(
-            match,
-            location: Location<{ sidebarContext?: SidebarContextType }>
-          ) => !!match && location.state?.sidebarContext === sidebarContext}
-          label={
-            <EditableTitle
-              title={collection.name}
-              onSubmit={handleTitleChange}
-              onEditing={setIsEditing}
-              canUpdate={can.update}
-              maxLength={CollectionValidation.maxNameLength}
-              ref={editableTitleRef}
-            />
-          }
-          exact={false}
-          depth={depth ? depth : 0}
-          menu={
-            !isEditing &&
-            !isDraggingAnyCollection && (
-              <Fade>
-                <NudeButton
-                  tooltip={{ content: t("New doc"), delay: 500 }}
-                  action={createDocument}
-                  context={context}
-                  hideOnActionDisabled
-                >
-                  <PlusIcon />
-                </NudeButton>
-                <CollectionMenu
-                  collection={collection}
-                  onRename={handleRename}
-                  onOpen={handleMenuOpen}
-                  onClose={handleMenuClose}
-                />
-              </Fade>
-            )
-          }
-        />
-      </DropToImport>
-    </Relative>
+    <>
+      <Relative ref={drop}>
+        <DropToImport collectionId={collection.id}>
+          <SidebarLink
+            to={{
+              pathname: collection.path,
+              state: { starred: inStarredSection },
+            }}
+            expanded={expanded}
+            onDisclosureClick={onDisclosureClick}
+            onClickIntent={handlePrefetch}
+            icon={
+              <CollectionIcon collection={collection} expanded={expanded} />
+            }
+            showActions={menuOpen}
+            isActiveDrop={isOver && canDrop}
+            isActive={(match, location: Location<{ starred?: boolean }>) =>
+              !!match && location.state?.starred === inStarredSection
+            }
+            label={
+              <EditableTitle
+                title={collection.name}
+                onSubmit={handleTitleChange}
+                onEditing={handleTitleEditing}
+                canUpdate={can.update}
+                maxLength={CollectionValidation.maxNameLength}
+                ref={editableTitleRef}
+              />
+            }
+            exact={false}
+            depth={0}
+            menu={
+              !isEditing &&
+              !isDraggingAnyCollection && (
+                <Fade>
+                  <NudeButton
+                    tooltip={{ content: t("New doc"), delay: 500 }}
+                    action={createDocument}
+                    context={context}
+                    hideOnActionDisabled
+                  >
+                    <PlusIcon />
+                  </NudeButton>
+                  <CollectionMenu
+                    collection={collection}
+                    onRename={() =>
+                      editableTitleRef.current?.setIsEditing(true)
+                    }
+                    onOpen={handleMenuOpen}
+                    onClose={handleMenuClose}
+                  />
+                </Fade>
+              )
+            }
+          />
+        </DropToImport>
+      </Relative>
+    </>
   );
 };
 

app/components/Sidebar/components/CollectionLinkChildren.tsx

@@ -2,31 +2,25 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import { useDrop } from "react-dnd";
 import { useTranslation } from "react-i18next";
-import { Waypoint } from "react-waypoint";
 import { toast } from "sonner";
 import styled from "styled-components";
 import Collection from "~/models/Collection";
 import Document from "~/models/Document";
-import ConfirmMoveDialog from "~/components/ConfirmMoveDialog";
 import DocumentsLoader from "~/components/DocumentsLoader";
 import { ResizingHeightContainer } from "~/components/ResizingHeightContainer";
-import Text from "~/components/Text";
 import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
-import history from "~/utils/history";
-import useCollectionDocuments from "../hooks/useCollectionDocuments";
 import DocumentLink from "./DocumentLink";
 import DropCursor from "./DropCursor";
+import EmptyCollectionPlaceholder from "./EmptyCollectionPlaceholder";
 import Folder from "./Folder";
 import PlaceholderCollections from "./PlaceholderCollections";
-import SidebarLink, { DragObject } from "./SidebarLink";
+import { DragObject } from "./SidebarLink";
+import useCollectionDocuments from "./useCollectionDocuments";
 
 type Props = {
-  /** The collection to render the children of. */
   collection: Collection;
-  /** Whether the children are shown in an expanded state. */
   expanded: boolean;
-  /** Function to prefetch a document by ID. */
   prefetchDocument?: (documentId: string) => Promise<Document | void>;
 };
 
@@ -35,13 +29,12 @@ function CollectionLinkChildren({
   expanded,
   prefetchDocument,
 }: Props) {
-  const pageSize = 250;
   const can = usePolicy(collection);
   const manualSort = collection.sort.field === "index";
-  const { documents, dialogs, collections } = useStores();
+  const { documents } = useStores();
   const { t } = useTranslation();
+
   const childDocuments = useCollectionDocuments(collection, documents.active);
-  const [showing, setShowing] = React.useState(pageSize);
 
   // Drop to reorder document
   const [{ isOverReorder, isDraggingAnyDocument }, dropToReorder] = useDrop({
@@ -59,26 +52,11 @@ function CollectionLinkChildren({
       if (!collection) {
         return;
       }
-
-      const prevCollection = collections.get(item.collectionId);
-
-      if (
-        prevCollection &&
-        prevCollection.permission !== collection.permission
-      ) {
-        dialogs.openModal({
-          title: t("Change permissions?"),
-          content: (
-            <ConfirmMoveDialog item={item} collection={collection} index={0} />
-          ),
-        });
-      } else {
-        void documents.move({
-          documentId: item.id,
-          collectionId: collection.id,
-          index: 0,
-        });
-      }
+      void documents.move({
+        documentId: item.id,
+        collectionId: collection.id,
+        index: 0,
+      });
     },
     collect: (monitor) => ({
       isOverReorder: !!monitor.isOver(),
@@ -86,18 +64,6 @@ function CollectionLinkChildren({
     }),
   });
 
-  React.useEffect(() => {
-    if (!expanded) {
-      setShowing(pageSize);
-    }
-  }, [expanded]);
-
-  const showMore = React.useCallback(() => {
-    if (childDocuments && childDocuments.length > showing) {
-      setShowing((value) => value + pageSize);
-    }
-  }, [childDocuments, showing]);
-
   return (
     <Folder expanded={expanded}>
       {isDraggingAnyDocument && can.createDocument && manualSort && (
@@ -113,7 +79,7 @@ function CollectionLinkChildren({
             <Loading />
           </ResizingHeightContainer>
         )}
-        {childDocuments?.slice(0, showing).map((node, index) => (
+        {childDocuments?.map((node, index) => (
           <DocumentLink
             key={node.id}
             node={node}
@@ -125,18 +91,7 @@ function CollectionLinkChildren({
             index={index}
           />
         ))}
-        {childDocuments?.length === 0 && (
-          <SidebarLink
-            label={
-              <Text type="tertiary" size="small" italic>
-                {t("Empty")}
-              </Text>
-            }
-            onClick={() => history.push(collection.url)}
-            depth={2}
-          />
-        )}
-        <Waypoint key={showing} onEnter={showMore} fireOnRapidScroll />
+        {childDocuments?.length === 0 && <EmptyCollectionPlaceholder />}
       </DocumentsLoader>
     </Folder>
   );

app/components/Sidebar/components/Collections.tsx

@@ -55,7 +55,7 @@ function Collections() {
           <PaginatedList
             options={params}
             aria-label={t("Collections")}
-            items={collections.allActive}
+            items={collections.orderedData}
             loading={<PlaceholderCollections />}
             heading={
               isDraggingAnyCollection ? (
@@ -84,7 +84,7 @@ function Collections() {
   );
 }
 
-export const StyledError = styled(Error)`
+const StyledError = styled(Error)`
   font-size: 15px;
   padding: 0 8px;
 `;

app/components/Sidebar/components/Disclosure.tsx

@@ -42,7 +42,7 @@ const Button = styled(NudeButton)<{ $root?: boolean }>`
     props.$root &&
     css`
       opacity: 0;
-      left: -18px;
+      left: -16px;
 
       &:hover {
         opacity: 1;