test

.circleci/config.yml

@@ -82,7 +82,6 @@ jobs:
           command: yarn test:shared
   test-server:
     <<: *defaults
-    parallelism: 3
     steps:
       - checkout
       - restore_cache:
@@ -92,9 +91,7 @@ jobs:
           command: ./node_modules/.bin/sequelize db:migrate --url $DATABASE_URL_TEST
       - run:
           name: test
-          command: |
-            TESTFILES=$(circleci tests glob "server/**/*.test.ts" | circleci tests split)
-            yarn test --maxWorkers=2 $TESTFILES
+          command: yarn test:server --forceExit
   bundle-size:
     <<: *defaults
     environment:
@@ -145,12 +142,7 @@ jobs:
           command: docker push $BASE_IMAGE_NAME:latest
       - run:
           name: Build and push Docker image
-          command: |
-            if [[ "$CIRCLE_TAG" == *"-"* ]]; then
-              docker buildx build -t $IMAGE_NAME:${CIRCLE_TAG/v/''} --platform linux/amd64,linux/arm/v6,linux/arm/v7,linux/arm64/v8,linux/ppc64le,linux/s390x --push .
-            else
-              docker buildx build -t $IMAGE_NAME:latest -t $IMAGE_NAME:${CIRCLE_TAG/v/''} --platform linux/amd64,linux/arm/v6,linux/arm/v7,linux/arm64/v8,linux/ppc64le,linux/s390x --push .
-            fi
+          command: docker buildx build -t $IMAGE_NAME:latest -t $IMAGE_NAME:${CIRCLE_TAG/v/''} --platform linux/amd64,linux/arm/v6,linux/arm/v7,linux/arm64/v8,linux/ppc64le,linux/s390x --push .
 
 workflows:
   version: 2
@@ -174,8 +166,9 @@ workflows:
             - build
       - bundle-size:
           requires:
-            - build
-            - types
+            - test-app
+            - test-shared
+            - test-server
 
   build-docker:
     jobs:

.dockerignore

@@ -13,4 +13,5 @@ app.json
 crowdin.yml
 build
 docker-compose.yml
+fakes3
 node_modules

.env.sample

@@ -51,20 +51,10 @@ AWS_REGION=xx-xxxx-x
 AWS_S3_ACCELERATE_URL=
 AWS_S3_UPLOAD_BUCKET_URL=http://s3:4569
 AWS_S3_UPLOAD_BUCKET_NAME=bucket_name_here
+AWS_S3_UPLOAD_MAX_SIZE=26214400
 AWS_S3_FORCE_PATH_STYLE=true
 AWS_S3_ACL=private
 
-# Specify what storage system to use. Possible value is one of "s3" or "local".
-# For "local", the avatar images and document attachments will be saved on local disk. 
-FILE_STORAGE=local
-
-# If "local" is configured for FILE_STORAGE above, then this sets the parent directory under
-# which all attachments/images go. Make sure that the process has permissions to create
-# this path and also to write files to it.
-FILE_STORAGE_LOCAL_ROOT_DIR=/var/lib/outline/data
-
-# Maximum allowed size for the uploaded attachment.
-FILE_STORAGE_UPLOAD_MAX_SIZE=26214400
 
 # –––––––––––––– AUTHENTICATION ––––––––––––––
 
@@ -193,5 +183,5 @@ RATE_LIMITER_REQUESTS=1000
 RATE_LIMITER_DURATION_WINDOW=60
 
 # Iframely API config
-# IFRAMELY_URL=
-# IFRAMELY_API_KEY=
+IFRAMELY_URL=
+IFRAMELY_API_KEY=

.eslintrc

@@ -21,7 +21,7 @@
     "eslint-plugin-import",
     "eslint-plugin-node",
     "eslint-plugin-react",
-    "eslint-plugin-lodash"
+    "import"
   ],
   "rules": {
     "eqeqeq": 2,
@@ -55,7 +55,6 @@
     ],
     "padding-line-between-statements": ["error", { "blankLine": "always", "prev": "*", "next": "export" }],
     "lines-between-class-members": ["error", "always", { "exceptAfterSingleLine": true }],
-    "lodash/import-scope": ["warn", "method"],
     "import/no-named-as-default": "off",
     "import/no-named-as-default-member": "off",
     "import/newline-after-import": 2,

.gitignore

@@ -7,7 +7,7 @@ node_modules/*
 npm-debug.log
 stats.json
 .DS_Store
-data/*
+fakes3/*
 .idea
 *.pem
 *.key

.jestconfig.json

@@ -1,6 +1,5 @@
 {
   "workerIdleMemoryLimit": "0.75",
-  "maxWorkers": "50%",
   "projects": [
     {
       "displayName": "server",
@@ -9,11 +8,13 @@
         "^@server/(.*)$": "<rootDir>/server/$1",
         "^@shared/(.*)$": "<rootDir>/shared/$1"
       },
-      "setupFiles": ["<rootDir>/__mocks__/console.js", "<rootDir>/server/test/env.ts"],
+      "setupFiles": [
+        "<rootDir>/__mocks__/console.js",
+        "<rootDir>/server/test/env.ts"
+      ],
       "setupFilesAfterEnv": ["<rootDir>/server/test/setup.ts"],
-      "globalSetup": "<rootDir>/server/test/globalSetup.js",
-      "globalTeardown": "<rootDir>/server/test/globalTeardown.js",
-      "testEnvironment": "node"
+      "testEnvironment": "node",
+      "runner": "@getoutline/jest-runner-serial"
     },
     {
       "displayName": "app",

Dockerfile

@@ -24,16 +24,7 @@ COPY --from=base $APP_PATH/package.json ./package.json
 
 RUN addgroup -g 1001 -S nodejs && \
   adduser -S nodejs -u 1001 && \
-  chown -R nodejs:nodejs $APP_PATH/build && \
-  mkdir -p /var/lib/outline && \
-	chown -R nodejs:nodejs /var/lib/outline
-
-ENV FILE_STORAGE_LOCAL_ROOT_DIR /var/lib/outline/data
-RUN mkdir -p "$FILE_STORAGE_LOCAL_ROOT_DIR" && \
-  chown -R nodejs:nodejs "$FILE_STORAGE_LOCAL_ROOT_DIR" && \
-  chmod 1777 "$FILE_STORAGE_LOCAL_ROOT_DIR"
-
-VOLUME /var/lib/outline/data
+  chown -R nodejs:nodejs $APP_PATH/build
 
 USER nodejs
 

LICENSE

@@ -3,7 +3,7 @@ Business Source License 1.1
 Parameters
 
 Licensor:             General Outline, Inc.
-Licensed Work:        Outline 0.71.0
+Licensed Work:        Outline 0.64.0
                       The Licensed Work is (c) 2020 General Outline, Inc.
 Additional Use Grant: You may make use of the Licensed Work, provided that
                       you may not use the Licensed Work for a Document
@@ -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:          2027-08-18
+Change Date:          2026-05-23
 
 Change License:       Apache License, Version 2.0
 

Makefile

@@ -1,5 +1,5 @@
 up:
-	docker-compose up -d redis postgres
+	docker-compose up -d redis postgres s3
 	yarn install-local-ssl
 	yarn install --pure-lockfile
 	yarn dev:watch
@@ -8,17 +8,17 @@ build:
 	docker-compose build --pull outline
 
 test:
-	docker-compose up -d redis postgres
+	docker-compose up -d redis postgres s3
 	yarn sequelize db:drop --env=test
 	yarn sequelize db:create --env=test
-	NODE_ENV=test yarn sequelize db:migrate --env=test
+	yarn sequelize db:migrate --env=test
 	yarn test
 
 watch:
-	docker-compose up -d redis postgres
+	docker-compose up -d redis postgres s3
 	yarn sequelize db:drop --env=test
 	yarn sequelize db:create --env=test
-	NODE_ENV=test yarn sequelize db:migrate --env=test
+	yarn sequelize db:migrate --env=test
 	yarn test:watch
 
 destroy:

README.md

@@ -96,10 +96,6 @@ Or to run migrations on test database:
 yarn sequelize db:migrate --env test
 ```
 
-# Activity
-
-![Alt](https://repobeats.axiom.co/api/embed/ff2e4e6918afff1acf9deb72d1ba6b071d586178.svg "Repobeats analytics image")
-
-# License
+## License
 
 Outline is [BSL 1.1 licensed](LICENSE).

app.json

@@ -128,6 +128,11 @@
       "description": "Live web link to your bucket. For CNAMEs, https://yourbucket.example.com",
       "required": false
     },
+    "AWS_S3_UPLOAD_MAX_SIZE": {
+      "description": "Maximum file upload size in bytes",
+      "value": "26214400",
+      "required": false
+    },
     "AWS_S3_FORCE_PATH_STYLE": {
       "description": "Use path-style URL's for connecting to S3 instead of subdomain. This is useful for S3-compatible storage.",
       "value": "true",
@@ -143,11 +148,6 @@
       "description": "S3 canned ACL for document attachments",
       "required": false
     },
-    "FILE_STORAGE_UPLOAD_MAX_SIZE": {
-      "description": "Maximum file upload size in bytes",
-      "value": "26214400",
-      "required": false
-    },
     "SMTP_HOST": {
       "description": "smtp.example.com (optional)",
       "required": false

app/actions/definitions/developer.tsx

@@ -1,6 +1,6 @@
 import { ToolsIcon, TrashIcon, UserIcon } from "outline-icons";
 import * as React from "react";
-import { toast } from "sonner";
+import stores from "~/stores";
 import { createAction } from "~/actions";
 import { DeveloperSection } from "~/actions/sections";
 import env from "~/env";
@@ -15,7 +15,7 @@ export const clearIndexedDB = createAction({
   section: DeveloperSection,
   perform: async ({ t }) => {
     await deleteAllDatabases();
-    toast.message(t("IndexedDB cache deleted"));
+    stores.toasts.showToast(t("IndexedDB cache deleted"));
   },
 });
 
@@ -29,31 +29,20 @@ export const createTestUsers = createAction({
 
     try {
       await client.post("/developer.create_test_users", { count });
-      toast.message(`${count} test users created`);
+      stores.toasts.showToast(`${count} test users created`);
     } catch (err) {
-      toast.error(err.message);
+      stores.toasts.showToast(err.message, { type: "error" });
     }
   },
 });
 
-export const createToast = createAction({
-  name: "Create toast",
-  section: DeveloperSection,
-  visible: () => env.ENVIRONMENT === "development",
-  perform: async () => {
-    toast.message("Hello world", {
-      duration: 30000,
-    });
-  },
-});
-
 export const toggleDebugLogging = createAction({
   name: ({ t }) => t("Toggle debug logging"),
   icon: <ToolsIcon />,
   section: DeveloperSection,
   perform: async ({ t }) => {
     Logger.debugLoggingEnabled = !Logger.debugLoggingEnabled;
-    toast.message(
+    stores.toasts.showToast(
       Logger.debugLoggingEnabled
         ? t("Debug logging enabled")
         : t("Debug logging disabled")
@@ -67,7 +56,7 @@ export const developer = createAction({
   icon: <ToolsIcon />,
   iconInContextMenu: false,
   section: DeveloperSection,
-  children: [clearIndexedDB, toggleDebugLogging, createToast, createTestUsers],
+  children: [clearIndexedDB, toggleDebugLogging, createTestUsers],
 });
 
 export const rootDeveloperActions = [developer];

app/actions/definitions/documents.tsx

@@ -25,7 +25,6 @@ import {
   CommentIcon,
 } from "outline-icons";
 import * as React from "react";
-import { toast } from "sonner";
 import { ExportContentType, TeamPreference } from "@shared/types";
 import { getEventFiles } from "@shared/utils/files";
 import DocumentDelete from "~/scenes/DocumentDelete";
@@ -33,7 +32,6 @@ import DocumentMove from "~/scenes/DocumentMove";
 import DocumentPermanentDelete from "~/scenes/DocumentPermanentDelete";
 import DocumentPublish from "~/scenes/DocumentPublish";
 import DocumentTemplatizeDialog from "~/components/DocumentTemplatizeDialog";
-import DuplicateDialog from "~/components/DuplicateDialog";
 import { createAction } from "~/actions";
 import { DocumentSection } from "~/actions/sections";
 import env from "~/env";
@@ -44,7 +42,6 @@ import {
   homePath,
   newDocumentPath,
   searchPath,
-  documentPath,
 } from "~/utils/routeHelpers";
 
 export const openDocument = createAction({
@@ -89,48 +86,6 @@ export const createDocument = createAction({
     }),
 });
 
-export const createDocumentFromTemplate = createAction({
-  name: ({ t }) => t("New from template"),
-  analyticsName: "New document",
-  section: DocumentSection,
-  icon: <NewDocumentIcon />,
-  keywords: "create",
-  visible: ({ currentTeamId, activeDocumentId, stores }) =>
-    !!currentTeamId &&
-    !!activeDocumentId &&
-    !!stores.documents.get(activeDocumentId)?.template &&
-    stores.policies.abilities(currentTeamId).createDocument,
-  perform: ({ activeCollectionId, activeDocumentId, inStarredSection }) =>
-    history.push(
-      newDocumentPath(activeCollectionId, { templateId: activeDocumentId }),
-      {
-        starred: inStarredSection,
-      }
-    ),
-});
-
-export const createNestedDocument = createAction({
-  name: ({ t }) => t("New nested document"),
-  analyticsName: "New document",
-  section: DocumentSection,
-  icon: <NewDocumentIcon />,
-  keywords: "create",
-  visible: ({ currentTeamId, activeDocumentId, stores }) =>
-    !!currentTeamId &&
-    !!activeDocumentId &&
-    stores.policies.abilities(currentTeamId).createDocument &&
-    stores.policies.abilities(activeDocumentId).createChildDocument,
-  perform: ({ activeCollectionId, activeDocumentId, inStarredSection }) =>
-    history.push(
-      newDocumentPath(activeCollectionId, {
-        parentDocumentId: activeDocumentId,
-      }),
-      {
-        starred: inStarredSection,
-      }
-    ),
-});
-
 export const starDocument = createAction({
   name: ({ t }) => t("Star"),
   analyticsName: "Star document",
@@ -210,11 +165,9 @@ export const publishDocument = createAction({
       await document.save(undefined, {
         publish: true,
       });
-      toast.success(
-        t("Published {{ documentName }}", {
-          documentName: document.noun,
-        })
-      );
+      stores.toasts.showToast(t("Document published"), {
+        type: "success",
+      });
     } else if (document) {
       stores.dialogs.openModal({
         title: t("Publish document"),
@@ -242,21 +195,12 @@ export const unpublishDocument = createAction({
     }
 
     const document = stores.documents.get(activeDocumentId);
-    if (!document) {
-      return;
-    }
 
-    try {
-      await document.unpublish();
+    await document?.unpublish();
 
-      toast.success(
-        t("Unpublished {{ documentName }}", {
-          documentName: document.noun,
-        })
-      );
-    } catch (err) {
-      toast.error(err.message);
-    }
+    stores.toasts.showToast(t("Document unpublished"), {
+      type: "success",
+    });
   },
 });
 
@@ -286,7 +230,9 @@ export const subscribeDocument = createAction({
 
     await document?.subscribe();
 
-    toast.success(t("Subscribed to document notifications"));
+    stores.toasts.showToast(t("Subscribed to document notifications"), {
+      type: "success",
+    });
   },
 });
 
@@ -316,7 +262,9 @@ export const unsubscribeDocument = createAction({
 
     await document?.unsubscribe(currentUserId);
 
-    toast.success(t("Unsubscribed from document notifications"));
+    stores.toasts.showToast(t("Unsubscribed from document notifications"), {
+      type: "success",
+    });
   },
 });
 
@@ -355,11 +303,15 @@ export const downloadDocumentAsPDF = createAction({
       return;
     }
 
-    const id = toast.loading(`${t("Exporting")}…`);
+    const id = stores.toasts.showToast(`${t("Exporting")}…`, {
+      type: "loading",
+      timeout: 30 * 1000,
+    });
+
     const document = stores.documents.get(activeDocumentId);
     document
       ?.download(ExportContentType.Pdf)
-      .finally(() => id && toast.dismiss(id));
+      .finally(() => id && stores.toasts.hideToast(id));
   },
 });
 
@@ -412,19 +364,11 @@ export const duplicateDocument = createAction({
 
     const document = stores.documents.get(activeDocumentId);
     invariant(document, "Document must exist");
-
-    stores.dialogs.openModal({
-      title: t("Copy document"),
-      isCentered: true,
-      content: (
-        <DuplicateDialog
-          document={document}
-          onSubmit={(response) => {
-            stores.dialogs.closeAllModals();
-            history.push(documentPath(response[0]));
-          }}
-        />
-      ),
+    const duped = await document.duplicate();
+    // when duplicating, go straight to the duplicated document content
+    history.push(duped.url);
+    stores.toasts.showToast(t("Document duplicated"), {
+      type: "success",
     });
   },
 });
@@ -470,10 +414,12 @@ export const pinDocumentToCollection = createAction({
       const collection = stores.collections.get(activeCollectionId);
 
       if (!collection || !location.pathname.startsWith(collection?.url)) {
-        toast.success(t("Pinned to collection"));
+        stores.toasts.showToast(t("Pinned to collection"));
       }
     } catch (err) {
-      toast.error(err.message);
+      stores.toasts.showToast(err.message, {
+        type: "error",
+      });
     }
   },
 });
@@ -510,10 +456,12 @@ export const pinDocumentToHome = createAction({
       await document?.pin();
 
       if (location.pathname !== homePath()) {
-        toast.success(t("Pinned to home"));
+        stores.toasts.showToast(t("Pinned to team home"));
       }
     } catch (err) {
-      toast.error(err.message);
+      stores.toasts.showToast(err.message, {
+        type: "error",
+      });
     }
   },
 });
@@ -556,7 +504,7 @@ export const importDocument = createAction({
     return false;
   },
   perform: ({ activeCollectionId, activeDocumentId, stores }) => {
-    const { documents } = stores;
+    const { documents, toasts } = stores;
     const input = document.createElement("input");
     input.type = "file";
     input.accept = documents.importFileTypes.join(", ");
@@ -576,7 +524,9 @@ export const importDocument = createAction({
         );
         history.push(document.url);
       } catch (err) {
-        toast.error(err.message);
+        toasts.showToast(err.message, {
+          type: "error",
+        });
         throw err;
       }
     };
@@ -697,7 +647,9 @@ export const archiveDocument = createAction({
       }
 
       await document.archive();
-      toast.success(t("Document archived"));
+      stores.toasts.showToast(t("Document archived"), {
+        type: "success",
+      });
     }
   },
 });
@@ -823,16 +775,7 @@ export const openDocumentInsights = createAction({
   icon: <LightBulbIcon />,
   visible: ({ activeDocumentId, stores }) => {
     const can = stores.policies.abilities(activeDocumentId ?? "");
-    const document = activeDocumentId
-      ? stores.documents.get(activeDocumentId)
-      : undefined;
-
-    return (
-      !!activeDocumentId &&
-      can.read &&
-      !document?.isTemplate &&
-      !document?.isDeleted
-    );
+    return !!activeDocumentId && can.read;
   },
   perform: ({ activeDocumentId, stores }) => {
     if (!activeDocumentId) {

app/actions/definitions/navigation.tsx

@@ -6,15 +6,14 @@ import {
   EditIcon,
   OpenIcon,
   SettingsIcon,
+  ShapesIcon,
   KeyboardIcon,
   EmailIcon,
   LogoutIcon,
   ProfileIcon,
   BrowserIcon,
-  ShapesIcon,
 } from "outline-icons";
 import * as React from "react";
-import { isMac } from "@shared/utils/browser";
 import {
   developersUrl,
   changelogUrl,
@@ -27,12 +26,14 @@ import KeyboardShortcuts from "~/scenes/KeyboardShortcuts";
 import { createAction } from "~/actions";
 import { NavigationSection, RecentSearchesSection } from "~/actions/sections";
 import Desktop from "~/utils/Desktop";
+import { isMac } from "~/utils/browser";
 import history from "~/utils/history";
 import isCloudHosted from "~/utils/isCloudHosted";
 import {
   homePath,
   searchPath,
   draftsPath,
+  templatesPath,
   archivePath,
   trashPath,
   settingsPath,
@@ -66,6 +67,15 @@ export const navigateToDrafts = createAction({
   visible: ({ location }) => location.pathname !== draftsPath(),
 });
 
+export const navigateToTemplates = createAction({
+  name: ({ t }) => t("Templates"),
+  analyticsName: "Navigate to templates",
+  section: NavigationSection,
+  icon: <ShapesIcon />,
+  perform: () => history.push(templatesPath()),
+  visible: ({ location }) => location.pathname !== templatesPath(),
+});
+
 export const navigateToArchive = createAction({
   name: ({ t }) => t("Archive"),
   analyticsName: "Navigate to archive",
@@ -93,7 +103,7 @@ export const navigateToSettings = createAction({
   icon: <SettingsIcon />,
   visible: ({ stores }) =>
     stores.policies.abilities(stores.auth.team?.id || "").update,
-  perform: () => history.push(settingsPath()),
+  perform: () => history.push(settingsPath("details")),
 });
 
 export const navigateToProfileSettings = createAction({
@@ -105,15 +115,6 @@ export const navigateToProfileSettings = createAction({
   perform: () => history.push(settingsPath()),
 });
 
-export const navigateToTemplateSettings = createAction({
-  name: ({ t }) => t("Templates"),
-  analyticsName: "Navigate to template settings",
-  section: NavigationSection,
-  iconInContextMenu: false,
-  icon: <ShapesIcon />,
-  perform: () => history.push(settingsPath("templates")),
-});
-
 export const navigateToNotificationSettings = createAction({
   name: ({ t }) => t("Notifications"),
   analyticsName: "Navigate to notification settings",
@@ -215,6 +216,7 @@ export const logout = createAction({
 export const rootNavigationActions = [
   navigateToHome,
   navigateToDrafts,
+  navigateToTemplates,
   navigateToArchive,
   navigateToTrash,
   downloadApp,

app/actions/definitions/revisions.tsx

@@ -2,7 +2,6 @@ import copy from "copy-to-clipboard";
 import { LinkIcon, RestoreIcon } from "outline-icons";
 import * as React from "react";
 import { matchPath } from "react-router-dom";
-import { toast } from "sonner";
 import stores from "~/stores";
 import { createAction } from "~/actions";
 import { RevisionSection } from "~/actions/sections";
@@ -69,7 +68,9 @@ export const copyLinkToRevision = createAction({
     copy(url, {
       format: "text/plain",
       onCopy: () => {
-        toast.message(t("Link copied"));
+        stores.toasts.showToast(t("Link copied"), {
+          type: "info",
+        });
       },
     });
   },

app/actions/index.ts

@@ -1,6 +1,5 @@
-import flattenDeep from "lodash/flattenDeep";
+import { flattenDeep } from "lodash";
 import * as React from "react";
-import { toast } from "sonner";
 import { Optional } from "utility-types";
 import { v4 as uuidv4 } from "uuid";
 import {
@@ -78,7 +77,9 @@ export function actionToMenuItem(
       try {
         action.perform?.(context);
       } catch (err) {
-        toast.error(err.message);
+        context.stores.toasts.showToast(err.message, {
+          type: "error",
+        });
       }
     },
     selected: action.selected?.(context),

app/components/Analytics.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable prefer-rest-params */
 /* global ga */
-import escape from "lodash/escape";
+import { escape } from "lodash";
 import * as React from "react";
 import { IntegrationService } from "@shared/types";
 import env from "~/env";

app/components/AuthLogo/SlackLogo.tsx

@@ -0,0 +1,41 @@
+import * as React from "react";
+
+type Props = {
+  size?: number;
+  fill?: string;
+  className?: string;
+};
+
+function SlackLogo({ size = 34, fill = "#FFF", className }: Props) {
+  return (
+    <svg
+      fill={fill}
+      width={size}
+      height={size}
+      viewBox="0 0 34 34"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g stroke="none" strokeWidth="1" fillRule="evenodd">
+        <g transform="translate(0.000000, 17.822581)">
+          <path d="M7.23870968,3.61935484 C7.23870968,5.56612903 5.6483871,7.15645161 3.7016129,7.15645161 C1.75483871,7.15645161 0.164516129,5.56612903 0.164516129,3.61935484 C0.164516129,1.67258065 1.75483871,0.0822580645 3.7016129,0.0822580645 L7.23870968,0.0822580645 L7.23870968,3.61935484 Z" />
+          <path d="M9.02096774,3.61935484 C9.02096774,1.67258065 10.6112903,0.0822580645 12.5580645,0.0822580645 C14.5048387,0.0822580645 16.0951613,1.67258065 16.0951613,3.61935484 L16.0951613,12.4758065 C16.0951613,14.4225806 14.5048387,16.0129032 12.5580645,16.0129032 C10.6112903,16.0129032 9.02096774,14.4225806 9.02096774,12.4758065 C9.02096774,12.4758065 9.02096774,3.61935484 9.02096774,3.61935484 Z" />
+        </g>
+        <g>
+          <path d="M12.5580645,7.23870968 C10.6112903,7.23870968 9.02096774,5.6483871 9.02096774,3.7016129 C9.02096774,1.75483871 10.6112903,0.164516129 12.5580645,0.164516129 C14.5048387,0.164516129 16.0951613,1.75483871 16.0951613,3.7016129 L16.0951613,7.23870968 L12.5580645,7.23870968 Z" />
+          <path d="M12.5580645,9.02096774 C14.5048387,9.02096774 16.0951613,10.6112903 16.0951613,12.5580645 C16.0951613,14.5048387 14.5048387,16.0951613 12.5580645,16.0951613 L3.7016129,16.0951613 C1.75483871,16.0951613 0.164516129,14.5048387 0.164516129,12.5580645 C0.164516129,10.6112903 1.75483871,9.02096774 3.7016129,9.02096774 C3.7016129,9.02096774 12.5580645,9.02096774 12.5580645,9.02096774 Z" />
+        </g>
+        <g transform="translate(17.822581, 0.000000)">
+          <path d="M8.93870968,12.5580645 C8.93870968,10.6112903 10.5290323,9.02096774 12.4758065,9.02096774 C14.4225806,9.02096774 16.0129032,10.6112903 16.0129032,12.5580645 C16.0129032,14.5048387 14.4225806,16.0951613 12.4758065,16.0951613 L8.93870968,16.0951613 L8.93870968,12.5580645 Z" />
+          <path d="M7.15645161,12.5580645 C7.15645161,14.5048387 5.56612903,16.0951613 3.61935484,16.0951613 C1.67258065,16.0951613 0.0822580645,14.5048387 0.0822580645,12.5580645 L0.0822580645,3.7016129 C0.0822580645,1.75483871 1.67258065,0.164516129 3.61935484,0.164516129 C5.56612903,0.164516129 7.15645161,1.75483871 7.15645161,3.7016129 L7.15645161,12.5580645 Z" />
+        </g>
+        <g transform="translate(17.822581, 17.822581)">
+          <path d="M3.61935484,8.93870968 C5.56612903,8.93870968 7.15645161,10.5290323 7.15645161,12.4758065 C7.15645161,14.4225806 5.56612903,16.0129032 3.61935484,16.0129032 C1.67258065,16.0129032 0.0822580645,14.4225806 0.0822580645,12.4758065 L0.0822580645,8.93870968 L3.61935484,8.93870968 Z" />
+          <path d="M3.61935484,7.15645161 C1.67258065,7.15645161 0.0822580645,5.56612903 0.0822580645,3.61935484 C0.0822580645,1.67258065 1.67258065,0.0822580645 3.61935484,0.0822580645 L12.4758065,0.0822580645 C14.4225806,0.0822580645 16.0129032,1.67258065 16.0129032,3.61935484 C16.0129032,5.56612903 14.4225806,7.15645161 12.4758065,7.15645161 L3.61935484,7.15645161 Z" />
+        </g>
+      </g>
+    </svg>
+  );
+}
+
+export default SlackLogo;

app/components/Authenticated.tsx

@@ -2,7 +2,6 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { Redirect } from "react-router-dom";
-import useCurrentUser from "~/hooks/useCurrentUser";
 import useStores from "~/hooks/useStores";
 import { changeLanguage } from "~/utils/language";
 import LoadingIndicator from "./LoadingIndicator";
@@ -14,11 +13,10 @@ type Props = {
 const Authenticated = ({ children }: Props) => {
   const { auth } = useStores();
   const { i18n } = useTranslation();
-  const user = useCurrentUser({ rejectOnEmpty: false });
-  const language = user?.language;
+  const language = auth.user?.language;
 
-  // Watching for language changes here as this is the earliest point we might have the user
-  // available and means we can start loading translations faster
+  // Watching for language changes here as this is the earliest point we have
+  // the user available and means we can start loading translations faster
   React.useEffect(() => {
     void changeLanguage(language, i18n);
   }, [i18n, language]);

app/components/AuthenticatedLayout.tsx

@@ -12,7 +12,6 @@ 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";
 import history from "~/utils/history";
@@ -46,7 +45,7 @@ const AuthenticatedLayout: React.FC = ({ children }: Props) => {
   const { ui, auth } = useStores();
   const location = useLocation();
   const can = usePolicy(ui.activeCollectionId);
-  const team = useCurrentTeam();
+  const { user, team } = auth;
   const documentContext = useLocalStore<DocumentContextValue>(() => ({
     editor: null,
     setEditor: (editor: TEditor) => {
@@ -77,14 +76,16 @@ const AuthenticatedLayout: React.FC = ({ children }: Props) => {
     return <ErrorSuspended />;
   }
 
-  const sidebar = (
+  const showSidebar = auth.authenticated && user && team;
+
+  const sidebar = showSidebar ? (
     <Fade>
       <Switch>
         <Route path={settingsPath()} component={SettingsSidebar} />
         <Route component={Sidebar} />
       </Switch>
     </Fade>
-  );
+  ) : undefined;
 
   const showHistory = !!matchPath(location.pathname, {
     path: matchDocumentHistory,
@@ -97,7 +98,7 @@ const AuthenticatedLayout: React.FC = ({ children }: Props) => {
     !showHistory &&
     ui.activeDocumentId &&
     ui.commentsExpanded.includes(ui.activeDocumentId) &&
-    team.getPreference(TeamPreference.Commenting);
+    team?.getPreference(TeamPreference.Commenting);
 
   const sidebarRight = (
     <AnimatePresence
@@ -120,7 +121,7 @@ const AuthenticatedLayout: React.FC = ({ children }: Props) => {
 
   return (
     <DocumentContext.Provider value={documentContext}>
-      <Layout title={team.name} sidebar={sidebar} sidebarRight={sidebarRight}>
+      <Layout title={team?.name} sidebar={sidebar} sidebarRight={sidebarRight}>
         <RegisterKeyDown trigger="n" handler={goToNewDocument} />
         <RegisterKeyDown trigger="t" handler={goToSearch} />
         <RegisterKeyDown trigger="/" handler={goToSearch} />

app/components/Avatar/Avatar.tsx

@@ -5,7 +5,6 @@ import Initials from "./Initials";
 
 export enum AvatarSize {
   Small = 16,
-  Toast = 18,
   Medium = 24,
   Large = 32,
   XLarge = 48,

app/components/ChangeLanguage.tsx

@@ -1,17 +0,0 @@
-import * as React from "react";
-import { useTranslation } from "react-i18next";
-import { changeLanguage } from "~/utils/language";
-
-type Props = {
-  locale: string;
-};
-
-export default function ChangeLanguage({ locale }: Props) {
-  const { i18n } = useTranslation();
-
-  React.useEffect(() => {
-    void changeLanguage(locale, i18n);
-  }, [locale, i18n]);
-
-  return null;
-}

app/components/Collaborators.tsx

@@ -1,7 +1,4 @@
-import filter from "lodash/filter";
-import isEqual from "lodash/isEqual";
-import sortBy from "lodash/sortBy";
-import uniq from "lodash/uniq";
+import { sortBy, filter, uniq, isEqual } from "lodash";
 import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";

app/components/CollectionDeleteDialog.tsx

@@ -2,7 +2,6 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation, Trans } from "react-i18next";
 import { useHistory } from "react-router-dom";
-import { toast } from "sonner";
 import Collection from "~/models/Collection";
 import ConfirmationDialog from "~/components/ConfirmationDialog";
 import Text from "~/components/Text";
@@ -23,14 +22,11 @@ function CollectionDeleteDialog({ collection, onSubmit }: Props) {
 
   const handleSubmit = async () => {
     const redirect = collection.id === ui.activeCollectionId;
-
+    await collection.delete();
+    onSubmit();
     if (redirect) {
       history.push(homePath());
     }
-
-    await collection.delete();
-    onSubmit();
-    toast.success(t("Collection deleted"));
   };
 
   return (

app/components/CollectionDescription.tsx

@@ -3,7 +3,6 @@ import { observer } from "mobx-react";
 import { transparentize } from "polished";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
-import { toast } from "sonner";
 import styled from "styled-components";
 import { s } from "@shared/styles";
 import Collection from "~/models/Collection";
@@ -14,6 +13,7 @@ import LoadingIndicator from "~/components/LoadingIndicator";
 import NudeButton from "~/components/NudeButton";
 import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
+import useToasts from "~/hooks/useToasts";
 
 type Props = {
   collection: Collection;
@@ -21,6 +21,7 @@ type Props = {
 
 function CollectionDescription({ collection }: Props) {
   const { collections } = useStores();
+  const { showToast } = useToasts();
   const { t } = useTranslation();
   const [isExpanded, setExpanded] = React.useState(false);
   const [isEditing, setEditing] = React.useState(false);
@@ -58,11 +59,15 @@ function CollectionDescription({ collection }: Props) {
           });
           setDirty(false);
         } catch (err) {
-          toast.error(t("Sorry, an error occurred saving the collection"));
+          showToast(
+            t("Sorry, an error occurred saving the collection", {
+              type: "error",
+            })
+          );
           throw err;
         }
       }, 1000),
-    [collection, t]
+    [collection, showToast, t]
   );
 
   const handleChange = React.useCallback(

app/components/CommandBar.tsx

@@ -11,26 +11,39 @@ import SearchActions from "~/components/SearchActions";
 import rootActions from "~/actions/root";
 import useCommandBarActions from "~/hooks/useCommandBarActions";
 import useSettingsActions from "~/hooks/useSettingsActions";
-import useTemplateActions from "~/hooks/useTemplateActions";
+import { CommandBarAction } from "~/types";
 
 function CommandBar() {
   const { t } = useTranslation();
   const settingsActions = useSettingsActions();
-  const templateActions = useTemplateActions();
   const commandBarActions = React.useMemo(
-    () => [...rootActions, templateActions, settingsActions],
-    [settingsActions, templateActions]
+    () => [...rootActions, settingsActions],
+    [settingsActions]
   );
 
   useCommandBarActions(commandBarActions);
 
+  const { rootAction } = useKBar((state) => ({
+    rootAction: state.currentRootActionId
+      ? (state.actions[
+          state.currentRootActionId
+        ] as unknown as CommandBarAction)
+      : undefined,
+  }));
+
   return (
     <>
       <KBarPortal>
         <Positioner>
           <Animator>
             <SearchActions />
-            <SearchInput defaultPlaceholder={t("Type a command or search")} />
+            <SearchInput
+              placeholder={`${
+                rootAction?.placeholder ||
+                rootAction?.name ||
+                t("Type a command or search")
+              }…`}
+            />
             <CommandBarResults />
           </Animator>
         </Positioner>

app/components/CommentDeleteDialog.tsx

@@ -1,11 +1,11 @@
 import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation, Trans } from "react-i18next";
-import { toast } from "sonner";
 import Comment from "~/models/Comment";
 import ConfirmationDialog from "~/components/ConfirmationDialog";
 import Text from "~/components/Text";
 import useStores from "~/hooks/useStores";
+import useToasts from "~/hooks/useToasts";
 
 type Props = {
   comment: Comment;
@@ -14,6 +14,7 @@ type Props = {
 
 function CommentDeleteDialog({ comment, onSubmit }: Props) {
   const { comments } = useStores();
+  const { showToast } = useToasts();
   const { t } = useTranslation();
   const hasChildComments = comments.inThread(comment.id).length > 1;
 
@@ -22,7 +23,7 @@ function CommentDeleteDialog({ comment, onSubmit }: Props) {
       await comment.delete();
       onSubmit?.();
     } catch (err) {
-      toast.error(err.message);
+      showToast(err.message, { type: "error" });
     }
   };
 

app/components/ConfirmationDialog.tsx

@@ -1,10 +1,10 @@
 import { observer } from "mobx-react";
 import * as React from "react";
-import { toast } from "sonner";
 import Button from "~/components/Button";
 import Flex from "~/components/Flex";
 import Text from "~/components/Text";
 import useStores from "~/hooks/useStores";
+import useToasts from "~/hooks/useToasts";
 
 type Props = {
   /** Callback when the dialog is submitted */
@@ -30,6 +30,7 @@ const ConfirmationDialog: React.FC<Props> = ({
 }: Props) => {
   const [isSaving, setIsSaving] = React.useState(false);
   const { dialogs } = useStores();
+  const { showToast } = useToasts();
 
   const handleSubmit = React.useCallback(
     async (ev: React.SyntheticEvent) => {
@@ -39,12 +40,14 @@ const ConfirmationDialog: React.FC<Props> = ({
         await onSubmit();
         dialogs.closeAllModals();
       } catch (err) {
-        toast.error(err.message);
+        showToast(err.message, {
+          type: "error",
+        });
       } finally {
         setIsSaving(false);
       }
     },
-    [onSubmit, dialogs]
+    [onSubmit, dialogs, showToast]
   );
 
   return (

app/components/ConnectionStatus.tsx

@@ -14,48 +14,15 @@ function ConnectionStatus() {
   const theme = useTheme();
   const { t } = useTranslation();
 
-  const codeToMessage = {
-    1009: {
-      title: t("Document is too large"),
-      body: t(
-        "This document has reached the maximum size and can no longer be edited"
-      ),
-    },
-    4401: {
-      title: t("Authentication failed"),
-      body: t("Please try logging out and back in again"),
-    },
-    4403: {
-      title: t("Authorization failed"),
-      body: t("You may have lost access to this document, try reloading"),
-    },
-    4503: {
-      title: t("Too many users connected to document"),
-      body: t("Your edits will sync once other users leave the document"),
-    },
-  };
-
-  const message = ui.multiplayerErrorCode
-    ? codeToMessage[ui.multiplayerErrorCode]
-    : undefined;
-
   return ui.multiplayerStatus === "connecting" ||
     ui.multiplayerStatus === "disconnected" ? (
     <Tooltip
       tooltip={
-        message ? (
-          <Centered>
-            <strong>{message.title}</strong>
-            <br />
-            {message.body}
-          </Centered>
-        ) : (
-          <Centered>
-            <strong>{t("Server connection lost")}</strong>
-            <br />
-            {t("Edits you make will sync once you’re online")}
-          </Centered>
-        )
+        <Centered>
+          <strong>{t("Server connection lost")}</strong>
+          <br />
+          {t("Edits you make will sync once you’re online")}
+        </Centered>
       }
       placement="bottom"
     >

app/components/ContentEditable.tsx

@@ -9,7 +9,6 @@ type Props = Omit<React.HTMLAttributes<HTMLSpanElement>, "ref" | "onChange"> & {
   readOnly?: boolean;
   onClick?: React.MouseEventHandler<HTMLDivElement>;
   onChange?: (text: string) => void;
-  onFocus?: React.FocusEventHandler<HTMLSpanElement> | undefined;
   onBlur?: React.FocusEventHandler<HTMLSpanElement> | undefined;
   onInput?: React.FormEventHandler<HTMLSpanElement> | undefined;
   onKeyDown?: React.KeyboardEventHandler<HTMLSpanElement> | undefined;
@@ -36,7 +35,6 @@ const ContentEditable = React.forwardRef(function _ContentEditable(
     disabled,
     onChange,
     onInput,
-    onFocus,
     onBlur,
     onKeyDown,
     value,
@@ -145,13 +143,11 @@ const ContentEditable = React.forwardRef(function _ContentEditable(
   );
 
   return (
-    <div className={className} dir={dir} onClick={onClick} tabIndex={-1}>
-      {children}
+    <div className={className} dir={dir} onClick={onClick}>
       <Content
         ref={contentRef}
         contentEditable={!disabled && !readOnly}
         onInput={wrappedEvent(onInput)}
-        onFocus={wrappedEvent(onFocus)}
         onBlur={wrappedEvent(onBlur)}
         onKeyDown={wrappedEvent(onKeyDown)}
         onPaste={handlePaste}
@@ -162,6 +158,7 @@ const ContentEditable = React.forwardRef(function _ContentEditable(
       >
         {innerValue}
       </Content>
+      {children}
     </div>
   );
 });

app/components/ContextMenu/MenuItem.tsx

@@ -5,7 +5,7 @@ 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 MenuIconWrapper from "./MenuIconWrapper";
+import MenuIconWrapper from "../MenuIconWrapper";
 
 type Props = {
   id?: string;

app/components/ContextMenu/MouseSafeArea.tsx

@@ -2,17 +2,17 @@ import * as React from "react";
 import { useMousePosition } from "~/hooks/useMousePosition";
 
 type Positions = {
-  /** Sub-menu x */
+  /* Sub-menu x */
   x: number;
-  /** Sub-menu y */
+  /* Sub-menu y */
   y: number;
-  /** Sub-menu height */
+  /* Sub-menu height */
   h: number;
-  /** Sub-menu width */
+  /* Sub-menu width */
   w: number;
-  /** Mouse x */
+  /* Mouse x */
   mouseX: number;
-  /** Mouse y */
+  /* Mouse y */
   mouseY: number;
 };
 

app/components/ContextMenu/Template.tsx

@@ -9,8 +9,8 @@ import {
   MenuStateReturn,
 } from "reakit/Menu";
 import styled, { useTheme } from "styled-components";
-import MenuIconWrapper from "~/components/ContextMenu/MenuIconWrapper";
 import Flex from "~/components/Flex";
+import MenuIconWrapper from "~/components/MenuIconWrapper";
 import { actionToMenuItem } from "~/actions";
 import useActionContext from "~/hooks/useActionContext";
 import {

app/components/ContextMenu/index.tsx

@@ -46,8 +46,6 @@ type Props = MenuStateReturn & {
   onClose?: () => void;
   /** Called when the context menu is clicked. */
   onClick?: (ev: React.MouseEvent) => void;
-  /** The maximum width of the context menu. */
-  maxWidth?: number;
   children?: React.ReactNode;
 };
 
@@ -59,6 +57,11 @@ const ContextMenu: React.FC<Props> = ({
   ...rest
 }: Props) => {
   const previousVisible = usePrevious(rest.visible);
+  const maxHeight = useMenuHeight({
+    visible: rest.visible,
+    elementRef: rest.unstable_disclosureRef,
+  });
+  const backgroundRef = React.useRef<HTMLDivElement>(null);
   const { ui } = useStores();
   const { t } = useTranslation();
   const { setIsMenuOpen } = useMenuContext();
@@ -96,6 +99,21 @@ const ContextMenu: React.FC<Props> = ({
     t,
   ]);
 
+  // We must manually manage scroll lock for iOS support so that the scrollable
+  // element can be passed into body-scroll-lock. See:
+  // https://github.com/ariakit/ariakit/issues/469
+  React.useEffect(() => {
+    const scrollElement = backgroundRef.current;
+    if (rest.visible && scrollElement && !isSubMenu) {
+      disableBodyScroll(scrollElement, {
+        reserveScrollBarGap: true,
+      });
+    }
+    return () => {
+      scrollElement && !isSubMenu && enableBodyScroll(scrollElement);
+    };
+  }, [isSubMenu, rest.visible]);
+
   // Perf win – don't render anything until the menu has been opened
   if (!rest.visible && !previousVisible) {
     return null;
@@ -106,98 +124,51 @@ const ContextMenu: React.FC<Props> = ({
   return (
     <>
       <Menu hideOnClickOutside={!isMobile} preventBodyScroll={false} {...rest}>
-        {(props) => (
-          <InnerContextMenu
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            menuProps={props as any}
-            {...rest}
-            isSubMenu={isSubMenu}
-          >
-            {children}
-          </InnerContextMenu>
-        )}
+        {(props) => {
+          // kind of hacky, but this is an effective way of telling which way
+          // the menu will _actually_ be placed when taking into account screen
+          // positioning.
+          const topAnchor = props.style?.top === "0";
+          // @ts-expect-error ts-migrate(2339) FIXME: Property 'placement' does not exist on type 'Extra... Remove this comment to see the full error message
+          const rightAnchor = props.placement === "bottom-end";
+
+          return (
+            <>
+              {isMobile && (
+                <Backdrop
+                  onClick={(ev) => {
+                    ev.preventDefault();
+                    ev.stopPropagation();
+                    rest.hide?.();
+                  }}
+                />
+              )}
+              <Position {...props}>
+                <Background
+                  dir="auto"
+                  topAnchor={topAnchor}
+                  rightAnchor={rightAnchor}
+                  ref={backgroundRef}
+                  hiddenScrollbars
+                  style={
+                    topAnchor
+                      ? {
+                          maxHeight,
+                        }
+                      : undefined
+                  }
+                >
+                  {rest.visible || rest.animating ? children : null}
+                </Background>
+              </Position>
+            </>
+          );
+        }}
       </Menu>
     </>
   );
 };
 
-type InnerContextMenuProps = MenuStateReturn & {
-  isSubMenu: boolean;
-  menuProps: { style?: React.CSSProperties; placement: string };
-  children: React.ReactNode;
-  maxWidth?: number;
-};
-
-/**
- * Inner context menu allows deferring expensive window measurement hooks etc
- * until the menu is actually opened.
- */
-const InnerContextMenu = (props: InnerContextMenuProps) => {
-  const { menuProps } = props;
-  // kind of hacky, but this is an effective way of telling which way
-  // the menu will _actually_ be placed when taking into account screen
-  // positioning.
-  const topAnchor =
-    menuProps.style?.top === "0" || menuProps.style?.position === "fixed";
-  const rightAnchor = menuProps.placement === "bottom-end";
-  const backgroundRef = React.useRef<HTMLDivElement>(null);
-  const isMobile = useMobile();
-
-  const maxHeight = useMenuHeight({
-    visible: props.visible,
-    elementRef: props.unstable_disclosureRef,
-  });
-
-  // We must manually manage scroll lock for iOS support so that the scrollable
-  // element can be passed into body-scroll-lock. See:
-  // https://github.com/ariakit/ariakit/issues/469
-  React.useEffect(() => {
-    const scrollElement = backgroundRef.current;
-    if (props.visible && scrollElement && !props.isSubMenu) {
-      disableBodyScroll(scrollElement, {
-        reserveScrollBarGap: true,
-      });
-    }
-    return () => {
-      scrollElement && !props.isSubMenu && enableBodyScroll(scrollElement);
-    };
-  }, [props.isSubMenu, props.visible]);
-
-  const style =
-    topAnchor && !isMobile
-      ? {
-          maxHeight,
-        }
-      : undefined;
-
-  return (
-    <>
-      {isMobile && (
-        <Backdrop
-          onClick={(ev) => {
-            ev.preventDefault();
-            ev.stopPropagation();
-            props.hide?.();
-          }}
-        />
-      )}
-      <Position {...menuProps}>
-        <Background
-          dir="auto"
-          maxWidth={props.maxWidth}
-          topAnchor={topAnchor}
-          rightAnchor={rightAnchor}
-          ref={backgroundRef}
-          hiddenScrollbars
-          style={style}
-        >
-          {props.visible || props.animating ? props.children : null}
-        </Background>
-      </Position>
-    </>
-  );
-};
-
 export default ContextMenu;
 
 export const Backdrop = styled.div`
@@ -232,7 +203,6 @@ export const Position = styled.div`
 type BackgroundProps = {
   topAnchor?: boolean;
   rightAnchor?: boolean;
-  maxWidth?: number;
   theme: DefaultTheme;
 };
 
@@ -258,8 +228,7 @@ export const Background = styled(Scrollable)<BackgroundProps>`
       props.topAnchor ? fadeAndSlideDown : fadeAndSlideUp} 200ms ease;
     transform-origin: ${(props: BackgroundProps) =>
       props.rightAnchor ? "75%" : "25%"} 0;
-    max-width: ${(props: BackgroundProps) => props.maxWidth ?? 276}px;
-    max-height: 100vh;
+    max-width: 276px;
     background: ${(props: BackgroundProps) => props.theme.menuBackground};
     box-shadow: ${(props: BackgroundProps) => props.theme.menuShadow};
   `};

app/components/DefaultCollectionInputSelect.tsx

@@ -1,13 +1,13 @@
 import { HomeIcon } from "outline-icons";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { toast } from "sonner";
 import { Optional } from "utility-types";
 import Flex from "~/components/Flex";
 import CollectionIcon from "~/components/Icons/CollectionIcon";
 import InputSelect from "~/components/InputSelect";
 import { IconWrapper } from "~/components/Sidebar/components/SidebarLink";
 import useStores from "~/hooks/useStores";
+import useToasts from "~/hooks/useToasts";
 
 type DefaultCollectionInputSelectProps = Optional<
   React.ComponentProps<typeof InputSelect>
@@ -25,6 +25,7 @@ const DefaultCollectionInputSelect = ({
   const { collections } = useStores();
   const [fetching, setFetching] = useState(false);
   const [fetchError, setFetchError] = useState();
+  const { showToast } = useToasts();
 
   React.useEffect(() => {
     async function fetchData() {
@@ -35,8 +36,11 @@ const DefaultCollectionInputSelect = ({
             limit: 100,
           });
         } catch (error) {
-          toast.error(
-            t("Collections could not be loaded, please reload the app")
+          showToast(
+            t("Collections could not be loaded, please reload the app"),
+            {
+              type: "error",
+            }
           );
           setFetchError(error);
         } finally {
@@ -45,7 +49,7 @@ const DefaultCollectionInputSelect = ({
       }
     }
     void fetchData();
-  }, [fetchError, t, fetching, collections]);
+  }, [showToast, fetchError, t, fetching, collections]);
 
   const options = React.useMemo(
     () =>

app/components/DesktopEventHandler.tsx

@@ -1,10 +1,10 @@
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { useHistory } from "react-router-dom";
-import { toast } from "sonner";
 import KeyboardShortcuts from "~/scenes/KeyboardShortcuts";
 import { useDesktopTitlebar } from "~/hooks/useDesktopTitlebar";
 import useStores from "~/hooks/useStores";
+import useToasts from "~/hooks/useToasts";
 import Desktop from "~/utils/Desktop";
 
 export default function DesktopEventHandler() {
@@ -12,6 +12,7 @@ export default function DesktopEventHandler() {
   const { t } = useTranslation();
   const history = useHistory();
   const { dialogs } = useStores();
+  const { showToast } = useToasts();
 
   React.useEffect(() => {
     Desktop.bridge?.redirect((path: string, replace = false) => {
@@ -23,11 +24,11 @@ export default function DesktopEventHandler() {
     });
 
     Desktop.bridge?.updateDownloaded(() => {
-      toast.message("An update is ready to install.", {
-        duration: Infinity,
-        dismissible: true,
+      showToast("An update is ready to install.", {
+        type: "info",
+        timeout: Infinity,
         action: {
-          label: t("Install now"),
+          text: "Install now",
           onClick: () => {
             void Desktop.bridge?.restartAndInstall();
           },
@@ -49,7 +50,7 @@ export default function DesktopEventHandler() {
         content: <KeyboardShortcuts />,
       });
     });
-  }, [t, history, dialogs]);
+  }, [t, history, dialogs, showToast]);
 
   return null;
 }

app/components/DocumentBreadcrumb.tsx

@@ -12,10 +12,9 @@ import { MenuInternalLink } from "~/types";
 import {
   archivePath,
   collectionPath,
-  settingsPath,
+  templatesPath,
   trashPath,
 } from "~/utils/routeHelpers";
-import EmojiIcon from "./Icons/EmojiIcon";
 
 type Props = {
   children?: React.ReactNode;
@@ -44,12 +43,12 @@ function useCategory(document: Document): MenuInternalLink | null {
     };
   }
 
-  if (document.template) {
+  if (document.isTemplate) {
     return {
       type: "route",
       icon: <ShapesIcon />,
       title: t("Templates"),
-      to: settingsPath("templates"),
+      to: templatesPath(),
     };
   }
 
@@ -106,13 +105,7 @@ const DocumentBreadcrumb: React.FC<Props> = ({
     path.forEach((node: NavigationNode) => {
       output.push({
         type: "route",
-        title: node.emoji ? (
-          <>
-            <EmojiIcon emoji={node.emoji} /> {node.title}
-          </>
-        ) : (
-          node.title
-        ),
+        title: node.title,
         to: node.url,
       });
     });

app/components/DocumentCard.tsx

@@ -111,12 +111,11 @@ function DocumentCard(props: Props) {
 
             {document.emoji ? (
               <Squircle color={theme.slateLight}>
-                <EmojiIcon emoji={document.emoji} size={24} />
+                <EmojiIcon emoji={document.emoji} size={26} />
               </Squircle>
             ) : (
               <Squircle color={collection?.color}>
                 {collection?.icon &&
-                collection?.icon !== "letter" &&
                 collection?.icon !== "collection" &&
                 !pin?.collectionId ? (
                   <CollectionIcon collection={collection} color="white" />
@@ -280,8 +279,8 @@ const Heading = styled.h3`
   overflow: hidden;
 
   color: ${s("text")};
-  font-family: ${s("fontFamily")};
-  font-weight: 500;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 `;
 
 export default observer(DocumentCard);

app/components/DocumentContext.ts

@@ -1,6 +1,5 @@
 import * as React from "react";
 import { Editor } from "~/editor";
-import useIdle from "~/hooks/useIdle";
 
 export type DocumentContextValue = {
   /** The current editor instance for this document. */
@@ -17,21 +16,4 @@ const DocumentContext = React.createContext<DocumentContextValue>({
 
 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/DocumentExplorer.tsx

@@ -1,10 +1,5 @@
 import FuzzySearch from "fuzzy-search";
-import concat from "lodash/concat";
-import difference from "lodash/difference";
-import fill from "lodash/fill";
-import filter from "lodash/filter";
-import includes from "lodash/includes";
-import map from "lodash/map";
+import { includes, difference, concat, filter, map, fill } from "lodash";
 import { observer } from "mobx-react";
 import { StarredIcon, DocumentIcon } from "outline-icons";
 import * as React from "react";
@@ -15,6 +10,7 @@ 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";
+import parseTitle from "@shared/utils/parseTitle";
 import DocumentExplorerNode from "~/components/DocumentExplorerNode";
 import DocumentExplorerSearchResult from "~/components/DocumentExplorerSearchResult";
 import Flex from "~/components/Flex";
@@ -204,86 +200,84 @@ function DocumentExplorer({ onSubmit, onSelect, items }: Props) {
     }
   };
 
-  const ListItem = observer(
-    ({
-      index,
-      data,
-      style,
-    }: {
-      index: number;
-      data: NavigationNode[];
-      style: React.CSSProperties;
-    }) => {
-      const node = data[index];
-      const isCollection = node.type === "collection";
-      let icon, title: string, emoji: string | undefined, path;
+  const ListItem = ({
+    index,
+    data,
+    style,
+  }: {
+    index: number;
+    data: NavigationNode[];
+    style: React.CSSProperties;
+  }) => {
+    const node = data[index];
+    const isCollection = node.type === "collection";
+    let icon, title, path;
 
-      if (isCollection) {
-        const col = collections.get(node.collectionId as string);
-        icon = col && (
-          <CollectionIcon collection={col} expanded={isExpanded(index)} />
-        );
-        title = node.title;
+    if (isCollection) {
+      const col = collections.get(node.collectionId as string);
+      icon = col && (
+        <CollectionIcon collection={col} expanded={isExpanded(index)} />
+      );
+      title = node.title;
+    } else {
+      const doc = documents.get(node.id);
+      const { strippedTitle, emoji } = parseTitle(node.title);
+      title = strippedTitle;
+
+      if (emoji) {
+        icon = <EmojiIcon emoji={emoji} />;
+      } else if (doc?.isStarred) {
+        icon = <StarredIcon color={theme.yellow} />;
       } else {
-        const doc = documents.get(node.id);
-        emoji = doc?.emoji ?? node.emoji;
-        title = doc?.title ?? node.title;
-
-        if (emoji) {
-          icon = <EmojiIcon emoji={emoji} />;
-        } else if (doc?.isStarred) {
-          icon = <StarredIcon color={theme.yellow} />;
-        } else {
-          icon = <DocumentIcon color={theme.textSecondary} />;
-        }
-
-        path = ancestors(node)
-          .map((a) => a.title)
-          .join(" / ");
+        icon = <DocumentIcon color={theme.textSecondary} />;
       }
 
-      return searchTerm ? (
-        <DocumentExplorerSearchResult
-          selected={isSelected(index)}
-          active={activeNode === index}
-          style={{
-            ...style,
-            top: (style.top as number) + VERTICAL_PADDING,
-            left: (style.left as number) + HORIZONTAL_PADDING,
-            width: `calc(${style.width} - ${HORIZONTAL_PADDING * 2}px)`,
-          }}
-          onPointerMove={() => setActiveNode(index)}
-          onClick={() => toggleSelect(index)}
-          icon={icon}
-          title={title}
-          path={path}
-        />
-      ) : (
-        <DocumentExplorerNode
-          style={{
-            ...style,
-            top: (style.top as number) + VERTICAL_PADDING,
-            left: (style.left as number) + HORIZONTAL_PADDING,
-            width: `calc(${style.width} - ${HORIZONTAL_PADDING * 2}px)`,
-          }}
-          onPointerMove={() => setActiveNode(index)}
-          onClick={() => toggleSelect(index)}
-          onDisclosureClick={(ev) => {
-            ev.stopPropagation();
-            toggleCollapse(index);
-          }}
-          selected={isSelected(index)}
-          active={activeNode === index}
-          expanded={isExpanded(index)}
-          icon={icon}
-          title={title}
-          depth={node.depth as number}
-          hasChildren={hasChildren(index)}
-          ref={itemRefs[index]}
-        />
-      );
+      path = ancestors(node)
+        .map((a) => parseTitle(a.title).strippedTitle)
+        .join(" / ");
     }
-  );
+
+    return searchTerm ? (
+      <DocumentExplorerSearchResult
+        selected={isSelected(index)}
+        active={activeNode === index}
+        style={{
+          ...style,
+          top: (style.top as number) + VERTICAL_PADDING,
+          left: (style.left as number) + HORIZONTAL_PADDING,
+          width: `calc(${style.width} - ${HORIZONTAL_PADDING * 2}px)`,
+        }}
+        onPointerMove={() => setActiveNode(index)}
+        onClick={() => toggleSelect(index)}
+        icon={icon}
+        title={title}
+        path={path}
+      />
+    ) : (
+      <DocumentExplorerNode
+        style={{
+          ...style,
+          top: (style.top as number) + VERTICAL_PADDING,
+          left: (style.left as number) + HORIZONTAL_PADDING,
+          width: `calc(${style.width} - ${HORIZONTAL_PADDING * 2}px)`,
+        }}
+        onPointerMove={() => setActiveNode(index)}
+        onClick={() => toggleSelect(index)}
+        onDisclosureClick={(ev) => {
+          ev.stopPropagation();
+          toggleCollapse(index);
+        }}
+        selected={isSelected(index)}
+        active={activeNode === index}
+        expanded={isExpanded(index)}
+        icon={icon}
+        title={title}
+        depth={node.depth as number}
+        hasChildren={hasChildren(index)}
+        ref={itemRefs[index]}
+      />
+    );
+  };
 
   const focusSearchInput = () => {
     inputSearchRef.current?.focus();

app/components/DocumentListItem.tsx

@@ -1,4 +1,5 @@
 import { observer } from "mobx-react";
+import { PlusIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
@@ -8,6 +9,7 @@ import breakpoint from "styled-components-breakpoint";
 import { s } from "@shared/styles";
 import Document from "~/models/Document";
 import Badge from "~/components/Badge";
+import Button from "~/components/Button";
 import DocumentMeta from "~/components/DocumentMeta";
 import EventBoundary from "~/components/EventBoundary";
 import Flex from "~/components/Flex";
@@ -16,11 +18,12 @@ import NudeButton from "~/components/NudeButton";
 import StarButton, { AnimatedStar } from "~/components/Star";
 import Tooltip from "~/components/Tooltip";
 import useBoolean from "~/hooks/useBoolean";
+import useCurrentTeam from "~/hooks/useCurrentTeam";
 import useCurrentUser from "~/hooks/useCurrentUser";
+import usePolicy from "~/hooks/usePolicy";
 import DocumentMenu from "~/menus/DocumentMenu";
 import { hover } from "~/styles";
-import { documentPath } from "~/utils/routeHelpers";
-import EmojiIcon from "./Icons/EmojiIcon";
+import { newDocumentPath } from "~/utils/routeHelpers";
 
 type Props = {
   document: Document;
@@ -48,6 +51,7 @@ function DocumentListItem(
 ) {
   const { t } = useTranslation();
   const user = useCurrentUser();
+  const team = useCurrentTeam();
   const [menuOpen, handleMenuOpen, handleMenuClose] = useBoolean();
 
   const {
@@ -67,6 +71,8 @@ function DocumentListItem(
     !!document.title.toLowerCase().includes(highlight.toLowerCase());
   const canStar =
     !document.isDraft && !document.isArchived && !document.isTemplate;
+  const can = usePolicy(team);
+  const canCollection = usePolicy(document.collectionId);
 
   return (
     <CompositeItem
@@ -77,7 +83,7 @@ function DocumentListItem(
       $isStarred={document.isStarred}
       $menuOpen={menuOpen}
       to={{
-        pathname: documentPath(document),
+        pathname: document.url,
         state: {
           title: document.titleWithDefault,
         },
@@ -86,12 +92,6 @@ function DocumentListItem(
     >
       <Content>
         <Heading dir={document.dir}>
-          {document.emoji && (
-            <>
-              <EmojiIcon emoji={document.emoji} size={24} />
-              &nbsp;
-            </>
-          )}
           <Title
             text={document.titleWithDefault}
             highlight={highlight}
@@ -135,6 +135,25 @@ function DocumentListItem(
         />
       </Content>
       <Actions>
+        {document.isTemplate &&
+          !document.isArchived &&
+          !document.isDeleted &&
+          can.createDocument &&
+          canCollection.update && (
+            <>
+              <Button
+                as={Link}
+                to={newDocumentPath(document.collectionId, {
+                  templateId: document.id,
+                })}
+                icon={<PlusIcon />}
+                neutral
+              >
+                {t("New doc")}
+              </Button>
+              &nbsp;
+            </>
+          )}
         <DocumentMenu
           document={document}
           showPin={showPin}
@@ -243,8 +262,8 @@ const Heading = styled.h3<{ rtl?: boolean }>`
   margin-bottom: 0.25em;
   white-space: nowrap;
   color: ${s("text")};
-  font-family: ${s("fontFamily")};
-  font-weight: 500;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 `;
 
 const StarPositioner = styled(Flex)`

app/components/DocumentTemplatizeDialog.tsx

@@ -3,9 +3,9 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation, Trans } from "react-i18next";
 import { useHistory } from "react-router-dom";
-import { toast } from "sonner";
 import ConfirmationDialog from "~/components/ConfirmationDialog";
 import useStores from "~/hooks/useStores";
+import useToasts from "~/hooks/useToasts";
 import { documentPath } from "~/utils/routeHelpers";
 
 type Props = {
@@ -14,6 +14,7 @@ type Props = {
 
 function DocumentTemplatizeDialog({ documentId }: Props) {
   const history = useHistory();
+  const { showToast } = useToasts();
   const { t } = useTranslation();
   const { documents } = useStores();
   const document = documents.get(documentId);
@@ -23,9 +24,11 @@ function DocumentTemplatizeDialog({ documentId }: Props) {
     const template = await document?.templatize();
     if (template) {
       history.push(documentPath(template));
-      toast.success(t("Template created, go ahead and customize it"));
+      showToast(t("Template created, go ahead and customize it"), {
+        type: "info",
+      });
     }
-  }, [document, history, t]);
+  }, [document, showToast, history, t]);
 
   return (
     <ConfirmationDialog

app/components/DocumentViews.tsx

@@ -1,15 +1,13 @@
-import compact from "lodash/compact";
-import sortBy from "lodash/sortBy";
+import { sortBy } from "lodash";
 import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
-import { dateLocale, dateToRelative } from "@shared/utils/date";
+import { dateToRelative } from "@shared/utils/date";
 import Document from "~/models/Document";
 import User from "~/models/User";
 import Avatar from "~/components/Avatar";
 import ListItem from "~/components/List/Item";
 import PaginatedList from "~/components/PaginatedList";
-import useCurrentUser from "~/hooks/useCurrentUser";
 import useStores from "~/hooks/useStores";
 
 type Props = {
@@ -20,9 +18,6 @@ type Props = {
 function DocumentViews({ document, isOpen }: Props) {
   const { t } = useTranslation();
   const { views, presence } = useStores();
-  const user = useCurrentUser();
-  const locale = dateLocale(user.language);
-
   const documentPresence = presence.get(document.id);
   const documentPresenceArray = documentPresence
     ? Array.from(documentPresence.values())
@@ -36,10 +31,10 @@ function DocumentViews({ document, isOpen }: Props) {
   const documentViews = views.inDocument(document.id);
   const sortedViews = sortBy(
     documentViews,
-    (view) => !presentIds.includes(view.userId)
+    (view) => !presentIds.includes(view.user.id)
   );
   const users = React.useMemo(
-    () => compact(sortedViews.map((v) => v.user)),
+    () => sortedViews.map((v) => v.user),
     [sortedViews]
   );
 
@@ -50,20 +45,16 @@ function DocumentViews({ document, isOpen }: Props) {
           aria-label={t("Viewers")}
           items={users}
           renderItem={(model: User) => {
-            const view = documentViews.find((v) => v.userId === model.id);
+            const view = documentViews.find((v) => v.user.id === model.id);
             const isPresent = presentIds.includes(model.id);
             const isEditing = editingIds.includes(model.id);
             const subtitle = isPresent
               ? isEditing
                 ? t("Currently editing")
                 : t("Currently viewing")
-              : t("Viewed {{ timeAgo }}", {
+              : t("Viewed {{ timeAgo }} ago", {
                   timeAgo: dateToRelative(
-                    view ? Date.parse(view.lastViewedAt) : new Date(),
-                    {
-                      addSuffix: true,
-                      locale,
-                    }
+                    view ? Date.parse(view.lastViewedAt) : new Date()
                   ),
                 });
             return (

app/components/DuplicateDialog.tsx

@@ -1,74 +0,0 @@
-import { observer } from "mobx-react";
-import * as React from "react";
-import { useTranslation } from "react-i18next";
-import { DocumentValidation } from "@shared/validations";
-import Document from "~/models/Document";
-import ConfirmationDialog from "~/components/ConfirmationDialog";
-import Input from "./Input";
-import Text from "./Text";
-
-type Props = {
-  /** The original document to duplicate */
-  document: Document;
-  onSubmit: (documents: Document[]) => void;
-};
-
-function DuplicateDialog({ document, onSubmit }: Props) {
-  const { t } = useTranslation();
-  const defaultTitle = t(`Copy of {{ documentName }}`, {
-    documentName: document.title,
-  });
-  const [recursive, setRecursive] = React.useState<boolean>(true);
-  const [title, setTitle] = React.useState<string>(defaultTitle);
-
-  const handleRecursiveChange = React.useCallback(
-    (ev: React.ChangeEvent<HTMLInputElement>) => {
-      setRecursive(ev.target.checked);
-    },
-    []
-  );
-
-  const handleTitleChange = React.useCallback(
-    (ev: React.ChangeEvent<HTMLInputElement>) => {
-      setTitle(ev.target.value);
-    },
-    []
-  );
-
-  const handleSubmit = async () => {
-    const result = await document.duplicate({
-      recursive,
-      title,
-    });
-    onSubmit(result);
-  };
-
-  return (
-    <ConfirmationDialog onSubmit={handleSubmit} submitText={t("Duplicate")}>
-      <Input
-        autoFocus
-        autoSelect
-        name="title"
-        label={t("Title")}
-        onChange={handleTitleChange}
-        maxLength={DocumentValidation.maxTitleLength}
-        defaultValue={defaultTitle}
-      />
-      {document.publishedAt && !document.isTemplate && (
-        <label>
-          <Text size="small">
-            <input
-              type="checkbox"
-              name="recursive"
-              checked={recursive}
-              onChange={handleRecursiveChange}
-            />{" "}
-            {t("Include nested documents")}
-          </Text>
-        </label>
-      )}
-    </ConfirmationDialog>
-  );
-}
-
-export default observer(DuplicateDialog);

app/components/Editor.tsx

@@ -1,6 +1,4 @@
-import deburr from "lodash/deburr";
-import difference from "lodash/difference";
-import sortBy from "lodash/sortBy";
+import { deburr, difference, sortBy } from "lodash";
 import { observer } from "mobx-react";
 import { DOMParser as ProsemirrorDOMParser } from "prosemirror-model";
 import { TextSelection } from "prosemirror-state";
@@ -21,10 +19,10 @@ import ClickablePadding from "~/components/ClickablePadding";
 import ErrorBoundary from "~/components/ErrorBoundary";
 import HoverPreview from "~/components/HoverPreview";
 import type { Props as EditorProps, Editor as SharedEditor } from "~/editor";
-import useCurrentUser from "~/hooks/useCurrentUser";
 import useDictionary from "~/hooks/useDictionary";
 import useEmbeds from "~/hooks/useEmbeds";
 import useStores from "~/hooks/useStores";
+import useToasts from "~/hooks/useToasts";
 import useUserLocale from "~/hooks/useUserLocale";
 import { NotFoundError } from "~/utils/errors";
 import { uploadFile } from "~/utils/files";
@@ -43,11 +41,11 @@ export type Props = Optional<
   | "onClickLink"
   | "embeds"
   | "dictionary"
+  | "onShowToast"
   | "extensions"
 > & {
   shareId?: string | undefined;
   embedsDisabled?: boolean;
-  previewsDisabled?: boolean;
   onHeadingsChange?: (headings: Heading[]) => void;
   onSynced?: () => Promise<void>;
   onPublish?: (event: React.MouseEvent) => any;
@@ -62,16 +60,16 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
     onHeadingsChange,
     onCreateCommentMark,
     onDeleteCommentMark,
-    previewsDisabled,
   } = props;
   const userLocale = useUserLocale();
   const locale = dateLocale(userLocale);
-  const { comments, documents } = useStores();
+  const { auth, comments, documents } = useStores();
+  const { showToast } = useToasts();
   const dictionary = useDictionary();
   const embeds = useEmbeds(!shareId);
   const history = useHistory();
   const localRef = React.useRef<SharedEditor>();
-  const preferences = useCurrentUser({ rejectOnEmpty: false })?.preferences;
+  const preferences = auth.user?.preferences;
   const previousHeadings = React.useRef<Heading[] | null>(null);
   const [activeLinkElement, setActiveLink] =
     React.useState<HTMLAnchorElement | null>(null);
@@ -239,6 +237,7 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
         uploadFile: handleUploadFile,
         onFileUploadStart: props.onFileUploadStart,
         onFileUploadStop: props.onFileUploadStop,
+        onShowToast: showToast,
         dictionary,
         isAttachment,
       });
@@ -249,6 +248,7 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
       props.onFileUploadStop,
       dictionary,
       handleUploadFile,
+      showToast,
     ]
   );
 
@@ -332,11 +332,12 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
         <LazyLoadedEditor
           ref={mergeRefs([ref, localRef, handleRefChanged])}
           uploadFile={handleUploadFile}
+          onShowToast={showToast}
           embeds={embeds}
           userPreferences={preferences}
           dictionary={dictionary}
           {...props}
-          onHoverLink={previewsDisabled ? undefined : handleLinkActive}
+          onHoverLink={handleLinkActive}
           onClickLink={handleClickLink}
           onSearchLink={handleSearchLink}
           onChange={handleChange}

app/components/EmojiPicker/components.tsx

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

app/components/EmojiPicker/index.tsx

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

app/components/ErrorBoundary.tsx

@@ -121,11 +121,11 @@ class ErrorBoundary extends React.Component<Props> {
             <Button onClick={this.handleReload}>{t("Reload")}</Button>{" "}
             {this.showDetails ? (
               <Button onClick={this.handleReportBug} neutral>
-                <Trans>Report a bug</Trans>…
+                <Trans>Report a Bug</Trans>…
               </Button>
             ) : (
               <Button onClick={this.handleShowDetails} neutral>
-                <Trans>Show detail</Trans>…
+                <Trans>Show Detail</Trans>…
               </Button>
             )}
           </p>

app/components/ExportDialog.tsx

@@ -1,7 +1,6 @@
 import { observer } from "mobx-react";
 import * as React from "react";
 import { Trans, useTranslation } from "react-i18next";
-import { toast } from "sonner";
 import styled from "styled-components";
 import { FileOperationFormat, NotificationEventType } from "@shared/types";
 import Collection from "~/models/Collection";
@@ -11,8 +10,7 @@ import Text from "~/components/Text";
 import env from "~/env";
 import useCurrentUser from "~/hooks/useCurrentUser";
 import useStores from "~/hooks/useStores";
-import history from "~/utils/history";
-import { settingsPath } from "~/utils/routeHelpers";
+import useToasts from "~/hooks/useToasts";
 
 type Props = {
   collection?: Collection;
@@ -26,6 +24,7 @@ function ExportDialog({ collection, onSubmit }: Props) {
   const [includeAttachments, setIncludeAttachments] =
     React.useState<boolean>(true);
   const user = useCurrentUser();
+  const { showToast } = useToasts();
   const { collections } = useStores();
   const { t } = useTranslation();
   const appName = env.APP_NAME;
@@ -47,22 +46,11 @@ function ExportDialog({ collection, onSubmit }: Props) {
   const handleSubmit = async () => {
     if (collection) {
       await collection.export(format, includeAttachments);
-      toast.success(t("Export started"), {
-        description: t(`Your file will be available in {{ location }} soon`, {
-          location: `"${t("Settings")} > ${t("Export")}"`,
-        }),
-        action: {
-          label: t("View"),
-          onClick: () => {
-            history.push(settingsPath("export"));
-          },
-        },
-      });
     } else {
       await collections.export(format, includeAttachments);
-      toast.success(t("Export started"));
     }
     onSubmit();
+    showToast(t("Export started"), { type: "success" });
   };
 
   const items = [

app/components/Facepile.tsx

@@ -32,12 +32,9 @@ function Facepile({
           </span>
         </More>
       )}
-      {users
-        .filter(Boolean)
-        .slice(0, limit)
-        .map((user) => (
-          <AvatarWrapper key={user.id}>{renderAvatar(user)}</AvatarWrapper>
-        ))}
+      {users.slice(0, limit).map((user) => (
+        <AvatarWrapper key={user.id}>{renderAvatar(user)}</AvatarWrapper>
+      ))}
     </Avatars>
   );
 }

app/components/FilterOptions.tsx

@@ -80,7 +80,7 @@ const Note = styled(Text)`
   margin-bottom: 0;
   line-height: 1.2em;
   font-size: 14px;
-  font-weight: 500;
+  font-weight: 400;
   color: ${s("textTertiary")};
 `;
 

app/components/Header.tsx

@@ -1,4 +1,4 @@
-import throttle from "lodash/throttle";
+import { throttle } from "lodash";
 import { observer } from "mobx-react";
 import { MenuIcon } from "outline-icons";
 import { transparentize } from "polished";
@@ -6,7 +6,6 @@ import * as React from "react";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import { depths, s } from "@shared/styles";
-import { supportsPassiveListener } from "@shared/utils/browser";
 import Button from "~/components/Button";
 import Fade from "~/components/Fade";
 import Flex from "~/components/Flex";
@@ -15,16 +14,16 @@ import useMobile from "~/hooks/useMobile";
 import useStores from "~/hooks/useStores";
 import { draggableOnDesktop, fadeOnDesktopBackgrounded } from "~/styles";
 import Desktop from "~/utils/Desktop";
+import { supportsPassiveListener } from "~/utils/browser";
 
 type Props = {
   left?: React.ReactNode;
   title: React.ReactNode;
   actions?: React.ReactNode;
   hasSidebar?: boolean;
-  className?: string;
 };
 
-function Header({ left, title, actions, hasSidebar, className }: Props) {
+function Header({ left, title, actions, hasSidebar }: Props) {
   const { ui } = useStores();
   const isMobile = useMobile();
   const hasMobileSidebar = hasSidebar && isMobile;
@@ -55,7 +54,6 @@ function Header({ left, title, actions, hasSidebar, className }: Props) {
     <Wrapper
       align="center"
       shrink={false}
-      className={className}
       $passThrough={passThrough}
       $insetTitleAdjust={ui.sidebarIsClosed && Desktop.hasInsetTitlebar()}
     >

app/components/Highlight.tsx

@@ -1,4 +1,4 @@
-import escapeRegExp from "lodash/escapeRegExp";
+import { escapeRegExp } from "lodash";
 import * as React from "react";
 import replace from "string-replace-to-array";
 import styled from "styled-components";

app/components/HoverPreview/Components.tsx

@@ -4,7 +4,7 @@ import styled, { css } from "styled-components";
 import { s } from "@shared/styles";
 import Text from "~/components/Text";
 
-export const CARD_MARGIN = 10;
+export const CARD_MARGIN = 16;
 
 const NUMBER_OF_LINES = 10;
 

app/components/HoverPreview/HoverPreview.tsx

@@ -2,7 +2,7 @@ import { m } from "framer-motion";
 import * as React from "react";
 import { Portal } from "react-portal";
 import styled from "styled-components";
-import { depths } from "@shared/styles";
+import { depths, s } from "@shared/styles";
 import { UnfurlType } from "@shared/types";
 import LoadingIndicator from "~/components/LoadingIndicator";
 import useEventListener from "~/hooks/useEventListener";
@@ -17,24 +17,16 @@ import HoverPreviewDocument from "./HoverPreviewDocument";
 import HoverPreviewLink from "./HoverPreviewLink";
 import HoverPreviewMention from "./HoverPreviewMention";
 
-const DELAY_OPEN = 500;
+const DELAY_OPEN = 300;
 const DELAY_CLOSE = 600;
 
 type Props = {
-  /** The HTML element that is being hovered over */
+  /* The HTML element that is being hovered over */
   element: HTMLAnchorElement;
-  /** A callback on close of the hover preview */
+  /* A callback on close of the hover preview */
   onClose: () => void;
 };
 
-enum Direction {
-  UP,
-  DOWN,
-}
-
-const POINTER_HEIGHT = 22;
-const POINTER_WIDTH = 22;
-
 function HoverPreviewInternal({ element, onClose }: Props) {
   const url = element.href || element.dataset.url;
   const [isVisible, setVisible] = React.useState(false);
@@ -44,46 +36,31 @@ function HoverPreviewInternal({ element, onClose }: Props) {
   const stores = useStores();
   const [cardLeft, setCardLeft] = React.useState(0);
   const [cardTop, setCardTop] = React.useState(0);
-  const [pointerLeft, setPointerLeft] = React.useState(0);
-  const [pointerTop, setPointerTop] = React.useState(0);
-  const [pointerDir, setPointerDir] = React.useState(Direction.UP);
+  const [pointerOffset, setPointerOffset] = React.useState(0);
 
   React.useLayoutEffect(() => {
     if (isVisible && cardRef.current) {
       const elem = element.getBoundingClientRect();
       const card = cardRef.current.getBoundingClientRect();
 
-      let cTop = elem.bottom + window.scrollY + CARD_MARGIN;
-      let pTop = -POINTER_HEIGHT;
-      let pDir = Direction.UP;
-      if (cTop + card.height > window.innerHeight + window.scrollY) {
-        // shift card upwards if it goes out of screen
-        const bottom = elem.top + window.scrollY;
-        cTop = bottom - card.height;
-        // shift a little further to leave some margin between card and element boundary
-        cTop -= CARD_MARGIN;
-        // pointer should be shifted downwards to align with card's bottom
-        pTop = card.height;
-        pDir = Direction.DOWN;
-      }
-      setCardTop(cTop);
-      setPointerTop(pTop);
-      setPointerDir(pDir);
+      const top = elem.bottom + window.scrollY;
+      setCardTop(top);
 
-      let cLeft = elem.left;
-      let pLeft = elem.width / 2;
-      if (cLeft + card.width > window.innerWidth) {
+      let left = elem.left;
+      let pointerOffset = elem.width / 2;
+      if (left + card.width > window.innerWidth) {
         // shift card leftwards by the amount it went out of screen
-        let shiftBy = cLeft + card.width - window.innerWidth;
-        // shift a little further to leave some margin between card and window boundary
+        let shiftBy = left + card.width - window.innerWidth;
+        // shift a littler further to leave some margin between card and window boundary
         shiftBy += CARD_MARGIN;
-        cLeft -= shiftBy;
+        left -= shiftBy;
 
         // shift pointer rightwards by same amount so as to position it back correctly
-        pLeft += shiftBy;
+        pointerOffset += shiftBy;
       }
-      setCardLeft(cLeft);
-      setPointerLeft(pLeft);
+      setCardLeft(left);
+
+      setPointerOffset(pointerOffset);
     }
   }, [isVisible, element]);
 
@@ -126,18 +103,18 @@ function HoverPreviewInternal({ element, onClose }: Props) {
   useKeyDown("Escape", closePreview);
   useEventListener("scroll", closePreview, window, { capture: true });
 
-  const stopCloseTimer = React.useCallback(() => {
+  const stopCloseTimer = () => {
     if (timerClose.current) {
       clearTimeout(timerClose.current);
       timerClose.current = undefined;
     }
-  }, []);
+  };
 
-  const startOpenTimer = React.useCallback(() => {
+  const startOpenTimer = () => {
     if (!timerOpen.current) {
       timerOpen.current = setTimeout(() => setVisible(true), DELAY_OPEN);
     }
-  }, []);
+  };
 
   const startCloseTimer = React.useCallback(() => {
     stopOpenTimer();
@@ -172,7 +149,7 @@ function HoverPreviewInternal({ element, onClose }: Props) {
 
       stopCloseTimer();
     };
-  }, [element, startCloseTimer, data, startOpenTimer, stopCloseTimer]);
+  }, [element, startCloseTimer, data]);
 
   if (loading) {
     return <LoadingIndicator />;
@@ -216,11 +193,7 @@ function HoverPreviewInternal({ element, onClose }: Props) {
                 description={data.description}
               />
             )}
-            <Pointer
-              top={pointerTop}
-              left={pointerLeft}
-              direction={pointerDir}
-            />
+            <Pointer offset={pointerOffset} />
           </Animate>
         ) : null}
       </Position>
@@ -244,6 +217,7 @@ const Animate = styled(m.div)`
 `;
 
 const Position = styled.div<{ fixed?: boolean; top?: number; left?: number }>`
+  margin-top: 10px;
   position: ${({ fixed }) => (fixed ? "fixed" : "absolute")};
   z-index: ${depths.hoverPreview};
   display: flex;
@@ -253,11 +227,11 @@ const Position = styled.div<{ fixed?: boolean; top?: number; left?: number }>`
   ${({ left }) => (left !== undefined ? `left: ${left}px` : "")};
 `;
 
-const Pointer = styled.div<{ top: number; left: number; direction: Direction }>`
-  top: ${(props) => props.top}px;
-  left: ${(props) => props.left}px;
-  width: ${POINTER_WIDTH}px;
-  height: ${POINTER_HEIGHT}px;
+const Pointer = styled.div<{ offset: number }>`
+  top: -22px;
+  left: ${(props) => props.offset}px;
+  width: 22px;
+  height: 22px;
   position: absolute;
   transform: translateX(-50%);
   pointer-events: none;
@@ -267,26 +241,20 @@ const Pointer = styled.div<{ top: number; left: number; direction: Direction }>`
     content: "";
     display: inline-block;
     position: absolute;
-    ${({ direction }) => (direction === Direction.UP ? "bottom: 0" : "top: 0")};
-    ${({ direction }) => (direction === Direction.UP ? "right: 0" : "left: 0")};
+    bottom: 0;
+    right: 0;
   }
 
   &:before {
     border: 8px solid transparent;
-    ${({ direction, theme }) =>
-      direction === Direction.UP
-        ? `border-bottom-color: ${theme.menuBorder || "rgba(0, 0, 0, 0.1)"}`
-        : `border-top-color: ${theme.menuBorder || "rgba(0, 0, 0, 0.1)"}`};
-    ${({ direction }) =>
-      direction === Direction.UP ? "right: -1px" : "left: -1px"};
+    border-bottom-color: ${(props) =>
+      props.theme.menuBorder || "rgba(0, 0, 0, 0.1)"};
+    right: -1px;
   }
 
   &:after {
     border: 7px solid transparent;
-    ${({ direction, theme }) =>
-      direction === Direction.UP
-        ? `border-bottom-color: ${theme.menuBackground}`
-        : `border-top-color: ${theme.menuBackground}`};
+    border-bottom-color: ${s("menuBackground")};
   }
 `;
 

app/components/HoverPreview/HoverPreviewLink.tsx

@@ -26,9 +26,9 @@ const HoverPreviewLink = React.forwardRef(function _HoverPreviewLink(
 ) {
   return (
     <Preview as="a" href={url} target="_blank" rel="noopener noreferrer">
-      <Flex column ref={ref}>
+      <Flex column>
         {thumbnailUrl ? <Thumbnail src={thumbnailUrl} alt={""} /> : null}
-        <Card>
+        <Card ref={ref}>
           <CardContent>
             <Flex column>
               <Title>{title}</Title>

app/components/IconPicker.tsx

@@ -49,7 +49,11 @@ import NudeButton from "~/components/NudeButton";
 import Text from "~/components/Text";
 import lazyWithRetry from "~/utils/lazyWithRetry";
 import DelayedMount from "./DelayedMount";
-import LetterIcon from "./Icons/LetterIcon";
+
+const style = {
+  width: 30,
+  height: 30,
+};
 
 const TwitterPicker = lazyWithRetry(
   () => import("react-color/lib/components/twitter/Twitter")
@@ -132,10 +136,6 @@ export const icons = {
     component: LightningIcon,
     keywords: "lightning fast zap",
   },
-  letter: {
-    component: LetterIcon,
-    keywords: "letter",
-  },
   math: {
     component: MathIcon,
     keywords: "math formula",
@@ -206,19 +206,11 @@ type Props = {
   onOpen?: () => void;
   onClose?: () => void;
   onChange: (color: string, icon: string) => void;
-  initial: string;
   icon: string;
   color: string;
 };
 
-function IconPicker({
-  onOpen,
-  onClose,
-  icon,
-  initial,
-  color,
-  onChange,
-}: Props) {
+function IconPicker({ onOpen, onClose, icon, color, onChange }: Props) {
   const { t } = useTranslation();
   const theme = useTheme();
   const menu = useMenuState({
@@ -238,9 +230,7 @@ function IconPicker({
               as={icons[icon || "collection"].component}
               color={color}
               size={30}
-            >
-              {initial}
-            </Icon>
+            />
           </Button>
         )}
       </MenuButton>
@@ -248,7 +238,6 @@ function IconPicker({
         {...menu}
         onOpen={onOpen}
         onClose={onClose}
-        maxWidth={308}
         aria-label={t("Choose icon")}
       >
         <Icons>
@@ -262,14 +251,13 @@ function IconPicker({
                 <IconButton
                   style={
                     {
+                      ...style,
                       "--delay": `${index * 8}ms`,
                     } as React.CSSProperties
                   }
                   {...props}
                 >
-                  <Icon as={icons[name].component} color={color} size={30}>
-                    {initial}
-                  </Icon>
+                  <Icon as={icons[name].component} color={color} size={30} />
                 </IconButton>
               )}
             </MenuItem>
@@ -330,7 +318,7 @@ const Icons = styled.div`
   padding: 8px;
 
   ${breakpoint("tablet")`
-    width: 304px;
+    width: 276px;
   `};
 `;
 
@@ -341,7 +329,6 @@ const Button = styled(NudeButton)`
 `;
 
 const IconButton = styled(NudeButton)`
-  vertical-align: top;
   border-radius: 4px;
   margin: 0px 6px 6px 0px;
   width: 30px;

app/components/Icons/CollectionIcon.tsx

@@ -39,11 +39,7 @@ function ResolvedCollectionIcon({
   if (collection.icon && collection.icon !== "collection") {
     try {
       const Component = icons[collection.icon].component;
-      return (
-        <Component color={color} size={size}>
-          {collection.initial}
-        </Component>
-      );
+      return <Component color={color} size={size} />;
     } catch (error) {
       Logger.warn("Failed to render custom icon", {
         icon: collection.icon,

app/components/Icons/EmojiIcon.tsx

@@ -2,9 +2,9 @@ import * as React from "react";
 import styled from "styled-components";
 
 type Props = {
-  /** The emoji to render */
+  /* The emoji to render */
   emoji: string;
-  /** The size of the emoji, 24px is default to match standard icons */
+  /* The size of the emoji, 24px is default to match standard icons */
   size?: number;
 };
 
@@ -29,5 +29,5 @@ const Span = styled.span<{ $size: number }>`
   width: ${(props) => props.$size}px;
   height: ${(props) => props.$size}px;
   text-indent: -0.15em;
-  font-size: ${(props) => props.$size - 10}px;
+  font-size: 14px;
 `;

app/components/Icons/LetterIcon.tsx

@@ -1,35 +0,0 @@
-import * as React from "react";
-import styled from "styled-components";
-import { s } from "@shared/styles";
-import Squircle from "../Squircle";
-
-type Props = {
-  /** The width and height of the icon, including standard padding. */
-  size?: number;
-  children: React.ReactNode;
-};
-
-/**
- * A squircle shaped icon with a letter inside, used for collections.
- */
-const LetterIcon = ({ children, size = 24, ...rest }: Props) => (
-  <LetterIconWrapper $size={size}>
-    <Squircle size={Math.round(size * 0.66)} {...rest}>
-      {children}
-    </Squircle>
-  </LetterIconWrapper>
-);
-
-const LetterIconWrapper = styled.div<{ $size: number }>`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: ${({ $size }) => $size}px;
-  height: ${({ $size }) => $size}px;
-
-  font-weight: 700;
-  font-size: ${({ $size }) => $size / 2}px;
-  color: ${s("background")};
-`;
-
-export default LetterIcon;

app/components/Icons/OutlineIcon.tsx

@@ -5,7 +5,7 @@ type Props = {
   size?: number;
   /** The color of the icon, defaults to the current text color */
   color?: string;
-  /** Whether the safe area should be removed and have graphic across full size */
+  /* Whether the safe area should be removed and have graphic across full size */
   cover?: boolean;
 };
 

app/components/Input.tsx

@@ -1,5 +1,4 @@
 import * as React from "react";
-import { mergeRefs } from "react-merge-refs";
 import { VisuallyHidden } from "reakit/VisuallyHidden";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
@@ -122,9 +121,7 @@ export type Props = React.InputHTMLAttributes<
   margin?: string | number;
   error?: string;
   icon?: React.ReactNode;
-  /** Like autoFocus, but also select any text in the input */
-  autoSelect?: boolean;
-  /** Callback is triggered with the CMD+Enter keyboard combo */
+  /* Callback is triggered with the CMD+Enter keyboard combo */
   onRequestSubmit?: (
     ev: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>
   ) => unknown;
@@ -136,7 +133,6 @@ function Input(
   props: Props,
   ref: React.RefObject<HTMLInputElement | HTMLTextAreaElement>
 ) {
-  const internalRef = React.useRef<HTMLInputElement | HTMLTextAreaElement>();
   const [focused, setFocused] = React.useState(false);
 
   const handleBlur = (ev: React.SyntheticEvent) => {
@@ -169,12 +165,6 @@ function Input(
     }
   };
 
-  React.useEffect(() => {
-    if (props.autoSelect && internalRef.current) {
-      internalRef.current.select();
-    }
-  }, [props.autoSelect, internalRef]);
-
   const {
     type = "text",
     icon,
@@ -207,10 +197,7 @@ function Input(
           {icon && <IconWrapper>{icon}</IconWrapper>}
           {type === "textarea" ? (
             <RealTextarea
-              ref={mergeRefs([
-                internalRef,
-                ref as React.RefObject<HTMLTextAreaElement>,
-              ])}
+              ref={ref as React.RefObject<HTMLTextAreaElement>}
               onBlur={handleBlur}
               onFocus={handleFocus}
               onKeyDown={handleKeyDown}
@@ -219,10 +206,7 @@ function Input(
             />
           ) : (
             <RealInput
-              ref={mergeRefs([
-                internalRef,
-                ref as React.RefObject<HTMLInputElement>,
-              ])}
+              ref={ref as React.RefObject<HTMLInputElement>}
               onBlur={handleBlur}
               onFocus={handleFocus}
               onKeyDown={handleKeyDown}

app/components/InputSelectPermission.tsx

@@ -18,7 +18,7 @@ export default function InputSelectPermission(
   const handleChange = React.useCallback(
     (value) => {
       if (value === "no_access") {
-        value = null;
+        value = "";
       }
 
       onChange?.(value);

app/components/Key.ts

@@ -1,7 +1,7 @@
 import styled from "styled-components";
 
 type Props = {
-  /** Set to true if displaying a single symbol character to disable monospace */
+  /* Set to true if displaying a single symbol character to disable monospace */
   symbol?: boolean;
 };
 

app/components/LanguagePrompt.tsx

@@ -1,4 +1,4 @@
-import find from "lodash/find";
+import { find } from "lodash";
 import * as React from "react";
 import { Trans, useTranslation } from "react-i18next";
 import styled from "styled-components";
@@ -42,7 +42,7 @@ function Icon({ className }: { className?: string }) {
 }
 
 export default function LanguagePrompt() {
-  const { ui } = useStores();
+  const { auth, ui } = useStores();
   const { t } = useTranslation();
   const user = useCurrentUser();
   const language = detectLanguage();
@@ -75,7 +75,9 @@ export default function LanguagePrompt() {
           <Link
             onClick={async () => {
               ui.setLanguagePromptDismissed();
-              await user.save({ language });
+              await auth.updateUser({
+                language,
+              });
             }}
           >
             {t("Change Language")}

app/components/List/Item.tsx

@@ -126,7 +126,6 @@ const Subtitle = styled.p<{ $small?: boolean; $selected?: boolean }>`
 export const Actions = styled(Flex)<{ $selected?: boolean }>`
   align-self: center;
   justify-content: center;
-  flex-shrink: 0;
   color: ${(props) =>
     props.$selected ? props.theme.white : props.theme.textSecondary};
 `;

app/components/List/Placeholder.tsx

@@ -1,4 +1,4 @@
-import times from "lodash/times";
+import { times } from "lodash";
 import * as React from "react";
 import styled from "styled-components";
 import Fade from "~/components/Fade";

app/components/MenuIconWrapper.ts

@@ -1,13 +1,11 @@
 import styled from "styled-components";
-import { s } from "@shared/styles";
 
 const MenuIconWrapper = styled.span`
   width: 24px;
   height: 24px;
   margin-right: 6px;
   margin-left: -4px;
-  color: ${s("textSecondary")};
-  flex-shrink: 0;
+  color: ${({ theme }) => theme.textSecondary};
 `;
 
 export default MenuIconWrapper;

app/components/Modal.tsx

@@ -94,9 +94,11 @@ const Modal: React.FC<Props> = ({
                           {title}
                         </Text>
                       )}
-                      <NudeButton onClick={onRequestClose}>
-                        <CloseIcon />
-                      </NudeButton>
+                      <Text as="span" size="large">
+                        <NudeButton onClick={onRequestClose}>
+                          <CloseIcon />
+                        </NudeButton>
+                      </Text>
                     </Header>
                   </Centered>
                 </Small>
@@ -257,7 +259,7 @@ const Small = styled.div`
   margin: auto auto;
   width: 30vw;
   min-width: 350px;
-  max-width: 450px;
+  max-width: 500px;
   z-index: ${depths.modal};
   display: flex;
   justify-content: center;

app/components/NavLink.tsx

@@ -1,4 +1,4 @@
-import { LocationDescriptor, LocationDescriptorObject } from "history";
+import { LocationDescriptor } from "history";
 import * as React from "react";
 import { match, NavLink, Route } from "react-router-dom";
 
@@ -9,20 +9,10 @@ type Props = React.ComponentProps<typeof NavLink> & {
           [x: string]: string | undefined;
         }>
       | boolean
-      | null,
-    location: LocationDescriptorObject
+      | null
   ) => React.ReactNode;
-  /**
-   * If true, the tab will only be active if the path matches exactly.
-   */
   exact?: boolean;
-  /**
-   * CSS properties to apply to the link when it is active.
-   */
   activeStyle?: React.CSSProperties;
-  /**
-   * The path to match against the current location.
-   */
   to: LocationDescriptor;
 };
 
@@ -35,10 +25,7 @@ function NavLinkWithChildrenFunc(
       {({ match, location }) => (
         <NavLink {...rest} to={to} exact={exact} ref={ref}>
           {children
-            ? children(
-                rest.isActive ? rest.isActive(match, location) : match,
-                location
-              )
+            ? children(rest.isActive ? rest.isActive(match, location) : match)
             : null}
         </NavLink>
       )}

app/components/Notifications/NotificationIcon.tsx

@@ -1,18 +1,19 @@
 import { observer } from "mobx-react";
 import { SubscribeIcon } from "outline-icons";
 import * as React from "react";
-import styled from "styled-components";
+import styled, { useTheme } from "styled-components";
 import { s } from "@shared/styles";
 import useStores from "~/hooks/useStores";
 import Relative from "../Sidebar/components/Relative";
 
 const NotificationIcon = () => {
   const { notifications } = useStores();
+  const theme = useTheme();
   const count = notifications.approximateUnreadCount;
 
   return (
     <Relative style={{ height: 24 }}>
-      <SubscribeIcon />
+      <SubscribeIcon color={theme.textTertiary} />
       {count > 0 && <Badge />}
     </Relative>
   );

app/components/Notifications/NotificationListItem.tsx

@@ -40,7 +40,7 @@ function NotificationListItem({ notification, onNavigate }: Props) {
   };
 
   return (
-    <Link to={notification.path ?? ""} onClick={handleClick}>
+    <Link to={notification.path} onClick={handleClick}>
       <Container gap={8} $unread={!notification.viewedAt}>
         <StyledAvatar model={notification.actor} size={AvatarSize.Large} />
         <Flex column>
@@ -64,7 +64,6 @@ function NotificationListItem({ notification, onNavigate }: Props) {
           {notification.comment && (
             <StyledCommentEditor
               defaultValue={toJS(notification.comment.data)}
-              previewsDisabled
             />
           )}
         </Flex>
@@ -88,7 +87,6 @@ const StyledAvatar = styled(Avatar)`
 const Container = styled(Flex)<{ $unread: boolean }>`
   position: relative;
   padding: 8px 12px;
-  padding-right: 40px;
   margin: 0 8px;
   border-radius: 4px;
 

app/components/Notifications/Notifications.tsx

@@ -22,7 +22,7 @@ import Tooltip from "../Tooltip";
 import NotificationListItem from "./NotificationListItem";
 
 type Props = {
-  /** Callback when the notification panel wants to close. */
+  /* Callback when the notification panel wants to close. */
   onRequestClose: () => void;
 };
 

app/components/PaginatedList.test.tsx

@@ -3,8 +3,8 @@ import { shallow } from "enzyme";
 import { TFunction } from "i18next";
 import * as React from "react";
 import { getI18n } from "react-i18next";
+import { DEFAULT_PAGINATION_LIMIT } from "~/stores/BaseStore";
 import RootStore from "~/stores/RootStore";
-import { DEFAULT_PAGINATION_LIMIT } from "~/stores/base/Store";
 import { runAllPromises } from "~/test/support";
 import { Component as PaginatedList } from "./PaginatedList";
 

app/components/PaginatedList.tsx

@@ -1,12 +1,12 @@
-import isEqual from "lodash/isEqual";
+import { isEqual } from "lodash";
 import { observable, action } from "mobx";
 import { observer } from "mobx-react";
 import * as React from "react";
 import { withTranslation, WithTranslation } from "react-i18next";
 import { Waypoint } from "react-waypoint";
 import { CompositeStateReturn } from "reakit/Composite";
+import { DEFAULT_PAGINATION_LIMIT } from "~/stores/BaseStore";
 import RootStore from "~/stores/RootStore";
-import { DEFAULT_PAGINATION_LIMIT } from "~/stores/base/Store";
 import ArrowKeyNavigation from "~/components/ArrowKeyNavigation";
 import DelayedMount from "~/components/DelayedMount";
 import PlaceholderList from "~/components/List/Placeholder";

app/components/Popover.tsx

@@ -1,10 +1,9 @@
 import * as React from "react";
 import { Dialog } from "reakit/Dialog";
 import { Popover as ReakitPopover, PopoverProps } from "reakit/Popover";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import { depths, s } from "@shared/styles";
-import useKeyDown from "~/hooks/useKeyDown";
 import useMobile from "~/hooks/useMobile";
 import { fadeAndScaleIn } from "~/styles/animations";
 
@@ -16,8 +15,6 @@ type Props = PopoverProps & {
   tabIndex?: number;
   scrollable?: boolean;
   mobilePosition?: "top" | "bottom";
-  show: () => void;
-  hide: () => void;
 };
 
 const Popover: React.FC<Props> = ({
@@ -31,21 +28,6 @@ const Popover: React.FC<Props> = ({
 }: Props) => {
   const isMobile = useMobile();
 
-  // Custom Escape handler rather than using hideOnEsc from reakit so we can
-  // prevent default behavior of exiting fullscreen.
-  useKeyDown(
-    "Escape",
-    (event) => {
-      if (rest.visible && rest.hideOnEsc !== false) {
-        event.preventDefault();
-        rest.hide();
-      }
-    },
-    {
-      allowInInput: true,
-    }
-  );
-
   if (isMobile) {
     return (
       <Dialog {...rest} modal>
@@ -62,7 +44,7 @@ const Popover: React.FC<Props> = ({
   }
 
   return (
-    <ReakitPopover {...rest} hideOnEsc={false}>
+    <ReakitPopover {...rest}>
       <Contents
         $shrink={shrink}
         $width={width}
@@ -95,13 +77,10 @@ const Contents = styled.div<ContentsProps>`
   width: ${(props) => props.$width}px;
 
   ${(props) =>
-    props.$scrollable
-      ? `
+    props.$scrollable &&
+    css`
       overflow-x: hidden;
       overflow-y: auto;
-    `
-      : `
-      overflow: hidden;
     `}
 
   ${breakpoint("mobile", "tablet")`

app/components/SearchPopover.tsx

@@ -1,4 +1,4 @@
-import debounce from "lodash/debounce";
+import { debounce } from "lodash";
 import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";

app/components/Sidebar/App.tsx

@@ -1,5 +1,5 @@
 import { observer } from "mobx-react";
-import { EditIcon, SearchIcon, HomeIcon, SidebarIcon } from "outline-icons";
+import { EditIcon, SearchIcon, ShapesIcon, HomeIcon } from "outline-icons";
 import * as React from "react";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
@@ -14,26 +14,29 @@ import useCurrentUser from "~/hooks/useCurrentUser";
 import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
 import OrganizationMenu from "~/menus/OrganizationMenu";
-import { metaDisplay } from "~/utils/keyboard";
-import { homePath, draftsPath, searchPath } from "~/utils/routeHelpers";
+import Desktop from "~/utils/Desktop";
+import {
+  homePath,
+  draftsPath,
+  templatesPath,
+  searchPath,
+} from "~/utils/routeHelpers";
 import TeamLogo from "../TeamLogo";
-import Tooltip from "../Tooltip";
 import Sidebar from "./Sidebar";
 import ArchiveLink from "./components/ArchiveLink";
 import Collections from "./components/Collections";
 import DragPlaceholder from "./components/DragPlaceholder";
+import HeaderButton, { HeaderButtonProps } from "./components/HeaderButton";
 import HistoryNavigation from "./components/HistoryNavigation";
 import Section from "./components/Section";
 import SidebarAction from "./components/SidebarAction";
-import SidebarButton, { SidebarButtonProps } from "./components/SidebarButton";
 import SidebarLink from "./components/SidebarLink";
 import Starred from "./components/Starred";
-import ToggleButton from "./components/ToggleButton";
 import TrashLink from "./components/TrashLink";
 
 function AppSidebar() {
   const { t } = useTranslation();
-  const { documents, ui } = useStores();
+  const { documents } = useStores();
   const team = useCurrentTeam();
   const user = useCurrentUser();
   const can = usePolicy(team);
@@ -41,6 +44,7 @@ function AppSidebar() {
   React.useEffect(() => {
     if (!user.isViewer) {
       void documents.fetchDrafts();
+      void documents.fetchTemplates();
     }
   }, [documents, user.isViewer]);
 
@@ -61,34 +65,23 @@ function AppSidebar() {
           <DragPlaceholder />
 
           <OrganizationMenu>
-            {(props: SidebarButtonProps) => (
-              <SidebarButton
+            {(props: HeaderButtonProps) => (
+              <HeaderButton
                 {...props}
                 title={team.name}
                 image={
                   <TeamLogo
                     model={team}
-                    size={24}
+                    size={Desktop.hasInsetTitlebar() ? 24 : 32}
                     alt={t("Logo")}
-                    style={{ marginLeft: 4 }}
                   />
                 }
-              >
-                <Tooltip
-                  tooltip={t("Toggle sidebar")}
-                  shortcut={`${metaDisplay}+.`}
-                  delay={500}
-                >
-                  <ToggleButton
-                    position="bottom"
-                    image={<SidebarIcon />}
-                    onClick={() => {
-                      ui.toggleCollapsedSidebar();
-                      (document.activeElement as HTMLElement)?.blur();
-                    }}
-                  />
-                </Tooltip>
-              </SidebarButton>
+                style={
+                  // Move the logo over to align with smaller size
+                  Desktop.hasInsetTitlebar() ? { paddingLeft: 8 } : undefined
+                }
+                showDisclosure
+              />
             )}
           </OrganizationMenu>
           <Scrollable flex shadow>
@@ -112,11 +105,9 @@ function AppSidebar() {
                   label={
                     <Flex align="center" justify="space-between">
                       {t("Drafts")}
-                      {documents.totalDrafts > 0 ? (
-                        <Drafts size="xsmall" type="tertiary">
-                          {documents.totalDrafts}
-                        </Drafts>
-                      ) : null}
+                      <Drafts size="xsmall" type="tertiary">
+                        {documents.totalDrafts}
+                      </Drafts>
                     </Flex>
                   }
                 />
@@ -131,6 +122,19 @@ function AppSidebar() {
             <Section>
               {can.createDocument && (
                 <>
+                  <SidebarLink
+                    to={templatesPath()}
+                    icon={<ShapesIcon />}
+                    exact={false}
+                    label={t("Templates")}
+                    active={
+                      documents.active
+                        ? documents.active.isTemplate &&
+                          !documents.active.isDeleted &&
+                          !documents.active.isArchived
+                        : undefined
+                    }
+                  />
                   <ArchiveLink />
                   <TrashLink />
                 </>

app/components/Sidebar/Right.tsx

@@ -120,7 +120,7 @@ const Position = styled(Flex)`
 const Sidebar = styled(m.div)<{
   $border?: boolean;
 }>`
-  display: block;
+  display: flex;
   flex-shrink: 0;
   background: ${s("background")};
   max-width: 80%;
@@ -129,7 +129,6 @@ const Sidebar = styled(m.div)<{
   z-index: 1;
 
   ${breakpoint("mobile", "tablet")`
-    display: flex;
     position: absolute;
     top: 0;
     right: 0;

app/components/Sidebar/Settings.tsx

@@ -1,32 +1,26 @@
-import groupBy from "lodash/groupBy";
+import { groupBy } from "lodash";
 import { observer } from "mobx-react";
-import { BackIcon, SidebarIcon } from "outline-icons";
+import { BackIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
-import { useHistory, useLocation } from "react-router-dom";
+import { useHistory } from "react-router-dom";
 import styled from "styled-components";
 import Flex from "~/components/Flex";
 import Scrollable from "~/components/Scrollable";
 import useSettingsConfig from "~/hooks/useSettingsConfig";
-import useStores from "~/hooks/useStores";
+import Desktop from "~/utils/Desktop";
 import isCloudHosted from "~/utils/isCloudHosted";
-import { metaDisplay } from "~/utils/keyboard";
-import { settingsPath } from "~/utils/routeHelpers";
-import Tooltip from "../Tooltip";
 import Sidebar from "./Sidebar";
 import Header from "./components/Header";
+import HeaderButton from "./components/HeaderButton";
 import HistoryNavigation from "./components/HistoryNavigation";
 import Section from "./components/Section";
-import SidebarButton from "./components/SidebarButton";
 import SidebarLink from "./components/SidebarLink";
-import ToggleButton from "./components/ToggleButton";
 import Version from "./components/Version";
 
 function SettingsSidebar() {
-  const { ui } = useStores();
   const { t } = useTranslation();
   const history = useHistory();
-  const location = useLocation();
   const configs = useSettingsConfig();
   const groupedConfig = groupBy(configs, "group");
 
@@ -37,26 +31,12 @@ function SettingsSidebar() {
   return (
     <Sidebar>
       <HistoryNavigation />
-      <SidebarButton
+      <HeaderButton
         title={t("Return to App")}
         image={<StyledBackIcon />}
         onClick={returnToApp}
-      >
-        <Tooltip
-          tooltip={t("Toggle sidebar")}
-          shortcut={`${metaDisplay}+.`}
-          delay={500}
-        >
-          <ToggleButton
-            position="bottom"
-            image={<SidebarIcon />}
-            onClick={() => {
-              ui.toggleCollapsedSidebar();
-              (document.activeElement as HTMLElement)?.blur();
-            }}
-          />
-        </Tooltip>
-      </SidebarButton>
+        minHeight={Desktop.hasInsetTitlebar() ? undefined : 48}
+      />
 
       <Flex auto column>
         <Scrollable shadow>
@@ -67,11 +47,6 @@ function SettingsSidebar() {
                   <SidebarLink
                     key={item.path}
                     to={item.path}
-                    active={
-                      item.path !== settingsPath()
-                        ? location.pathname.startsWith(item.path)
-                        : undefined
-                    }
                     icon={<item.icon />}
                     label={item.name}
                   />

app/components/Sidebar/Shared.tsx

@@ -5,16 +5,15 @@ import styled from "styled-components";
 import { NavigationNode } from "@shared/types";
 import Scrollable from "~/components/Scrollable";
 import SearchPopover from "~/components/SearchPopover";
-import useCurrentUser from "~/hooks/useCurrentUser";
 import useStores from "~/hooks/useStores";
 import history from "~/utils/history";
 import { homePath, sharedDocumentPath } from "~/utils/routeHelpers";
 import { useTeamContext } from "../TeamContext";
 import TeamLogo from "../TeamLogo";
 import Sidebar from "./Sidebar";
+import HeaderButton from "./components/HeaderButton";
 import Section from "./components/Section";
 import DocumentLink from "./components/SharedDocumentLink";
-import SidebarButton from "./components/SidebarButton";
 
 type Props = {
   rootNode: NavigationNode;
@@ -23,19 +22,18 @@ type Props = {
 
 function SharedSidebar({ rootNode, shareId }: Props) {
   const team = useTeamContext();
-  const user = useCurrentUser({ rejectOnEmpty: false });
-  const { ui, documents } = useStores();
+  const { ui, documents, auth } = useStores();
   const { t } = useTranslation();
 
   return (
     <Sidebar>
       {team && (
-        <SidebarButton
+        <HeaderButton
           title={team.name}
           image={<TeamLogo model={team} size={32} alt={t("Logo")} />}
           onClick={() =>
             history.push(
-              user ? homePath() : sharedDocumentPath(shareId, rootNode.url)
+              auth.user ? homePath() : sharedDocumentPath(shareId, rootNode.url)
             )
           }
         />

app/components/Sidebar/Sidebar.tsx

@@ -1,44 +1,44 @@
 import { observer } from "mobx-react";
 import * as React from "react";
+import { useTranslation } from "react-i18next";
 import { Portal } from "react-portal";
 import { useLocation } from "react-router-dom";
-import styled, { css, useTheme } from "styled-components";
+import styled, { useTheme } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import { depths, s } from "@shared/styles";
 import Flex from "~/components/Flex";
-import useCurrentUser from "~/hooks/useCurrentUser";
 import useMenuContext from "~/hooks/useMenuContext";
 import usePrevious from "~/hooks/usePrevious";
 import useStores from "~/hooks/useStores";
 import AccountMenu from "~/menus/AccountMenu";
-import { fadeOnDesktopBackgrounded } from "~/styles";
+import { draggableOnDesktop, 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 HeaderButton, { HeaderButtonProps } from "./components/HeaderButton";
 import ResizeBorder from "./components/ResizeBorder";
-import SidebarButton, { SidebarButtonProps } from "./components/SidebarButton";
-import ToggleButton from "./components/ToggleButton";
+import Toggle, { ToggleButton, Positioner } from "./components/Toggle";
 
 const ANIMATION_MS = 250;
 
 type Props = {
   children: React.ReactNode;
-  className?: string;
 };
 
 const Sidebar = React.forwardRef<HTMLDivElement, Props>(function _Sidebar(
-  { children, className }: Props,
+  { children }: Props,
   ref: React.RefObject<HTMLDivElement>
 ) {
   const [isCollapsing, setCollapsing] = React.useState(false);
   const theme = useTheme();
-  const { ui } = useStores();
+  const { t } = useTranslation();
+  const { ui, auth } = useStores();
   const location = useLocation();
   const previousLocation = usePrevious(location);
   const { isMenuOpen } = useMenuContext();
-  const user = useCurrentUser({ rejectOnEmpty: false });
+  const { user } = auth;
   const width = ui.sidebarWidth;
   const collapsed = ui.sidebarIsClosed && !isMenuOpen;
   const maxWidth = theme.sidebarMaxWidth;
@@ -46,10 +46,8 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(function _Sidebar(
 
   const setWidth = ui.setSidebarWidth;
   const [offset, setOffset] = React.useState(0);
-  const [isHovering, setHovering] = React.useState(false);
   const [isAnimating, setAnimating] = React.useState(false);
   const [isResizing, setResizing] = React.useState(false);
-  const [hasPointerMoved, setPointerMoved] = React.useState(false);
   const isSmallerThanMinimum = width < minWidth;
 
   const handleDrag = React.useCallback(
@@ -101,34 +99,6 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(function _Sidebar(
     [width]
   );
 
-  const handlePointerMove = React.useCallback(() => {
-    if (ui.sidebarIsClosed) {
-      setHovering(true);
-      setPointerMoved(true);
-    }
-  }, [ui.sidebarIsClosed]);
-
-  const handlePointerLeave = React.useCallback(
-    (ev) => {
-      if (hasPointerMoved) {
-        setHovering(
-          ev.pageX < width &&
-            ev.pageX > 0 &&
-            ev.pageY < window.innerHeight &&
-            ev.pageY > 0
-        );
-      }
-    },
-    [width, hasPointerMoved]
-  );
-
-  React.useEffect(() => {
-    if (ui.sidebarIsClosed) {
-      setHovering(false);
-      setPointerMoved(false);
-    }
-  }, [ui.sidebarIsClosed]);
-
   React.useEffect(() => {
     if (isAnimating) {
       setTimeout(() => setAnimating(false), ANIMATION_MS);
@@ -177,19 +147,23 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(function _Sidebar(
     [width]
   );
 
+  const toggleStyle = React.useMemo(
+    () => ({
+      right: "auto",
+      marginLeft: `${collapsed ? theme.sidebarCollapsedWidth : width}px`,
+    }),
+    [width, theme.sidebarCollapsedWidth, collapsed]
+  );
+
   return (
     <>
       <Container
         ref={ref}
         style={style}
-        $isHovering={isHovering}
         $isAnimating={isAnimating}
         $isSmallerThanMinimum={isSmallerThanMinimum}
         $mobileSidebarVisible={ui.mobileSidebarVisible}
         $collapsed={collapsed}
-        className={className}
-        onPointerMove={handlePointerMove}
-        onPointerLeave={handlePointerLeave}
         column
       >
         {ui.mobileSidebarVisible && (
@@ -201,32 +175,26 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(function _Sidebar(
 
         {user && (
           <AccountMenu>
-            {(props: SidebarButtonProps) => (
-              <SidebarButton
+            {(props: HeaderButtonProps) => (
+              <HeaderButton
                 {...props}
                 showMoreMenu
                 title={user.name}
-                position="bottom"
                 image={
-                  <Avatar
+                  <StyledAvatar
                     alt={user.name}
                     model={user}
                     size={24}
                     showBorder={false}
-                    style={{ marginLeft: 4 }}
                   />
                 }
               >
                 <NotificationsPopover>
-                  {(rest: SidebarButtonProps) => (
-                    <SidebarButton
-                      {...rest}
-                      position="bottom"
-                      image={<NotificationIcon />}
-                    />
+                  {(rest: HeaderButtonProps) => (
+                    <HeaderButton {...rest} image={<NotificationIcon />} />
                   )}
                 </NotificationsPopover>
-              </SidebarButton>
+              </HeaderButton>
             )}
           </AccountMenu>
         )}
@@ -234,11 +202,28 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(function _Sidebar(
           onMouseDown={handleMouseDown}
           onDoubleClick={ui.sidebarIsClosed ? undefined : handleReset}
         />
+        {ui.sidebarIsClosed && (
+          <Toggle
+            onClick={ui.toggleCollapsedSidebar}
+            direction={"right"}
+            aria-label={t("Expand")}
+          />
+        )}
       </Container>
+      <Toggle
+        style={toggleStyle}
+        onClick={ui.toggleCollapsedSidebar}
+        direction={ui.sidebarIsClosed ? "right" : "left"}
+        aria-label={ui.sidebarIsClosed ? t("Expand") : t("Collapse")}
+      />
     </>
   );
 });
 
+const StyledAvatar = styled(Avatar)`
+  margin-left: 4px;
+`;
+
 const Backdrop = styled.a`
   animation: ${fadeIn} 250ms ease-in-out;
   position: fixed;
@@ -255,33 +240,16 @@ type ContainerProps = {
   $mobileSidebarVisible: boolean;
   $isAnimating: boolean;
   $isSmallerThanMinimum: boolean;
-  $isHovering: boolean;
   $collapsed: boolean;
 };
 
-const hoverStyles = (props: ContainerProps) => `
-  transform: none;
-  box-shadow: ${
-    props.$collapsed
-      ? "rgba(0, 0, 0, 0.2) 1px 0 4px"
-      : props.$isSmallerThanMinimum
-      ? "rgba(0, 0, 0, 0.1) inset -1px 0 2px"
-      : "none"
-  };
-
-  ${ToggleButton} {
-    opacity: 1;
-  }
-`;
-
 const Container = styled(Flex)<ContainerProps>`
   position: fixed;
   top: 0;
   bottom: 0;
   width: 100%;
   background: ${s("sidebarBackground")};
-  transition: box-shadow 100ms ease-in-out, opacity 100ms ease-in-out,
-    transform 100ms ease-out,
+  transition: box-shadow 100ms ease-in-out, transform 100ms ease-out,
     ${s("backgroundTransition")}
       ${(props: ContainerProps) =>
         props.$isAnimating ? `,width ${ANIMATION_MS}ms ease-out` : ""};
@@ -291,17 +259,19 @@ const Container = styled(Flex)<ContainerProps>`
   z-index: ${depths.sidebar};
   max-width: 80%;
   min-width: 280px;
+  padding-top: ${Desktop.hasInsetTitlebar() ? 36 : 0}px;
+  ${draggableOnDesktop()}
   ${fadeOnDesktopBackgrounded()}
 
+  ${Positioner} {
+    display: none;
+  }
+
   @media print {
     display: none;
     transform: none;
   }
 
-  & > div {
-    opacity: ${(props) => (props.$collapsed && !props.$isHovering ? "0" : "1")};
-  }
-
   ${breakpoint("tablet")`
     margin: 0;
     min-width: 0;
@@ -310,20 +280,28 @@ const Container = styled(Flex)<ContainerProps>`
         ? `calc(-100% + ${Desktop.hasInsetTitlebar() ? 8 : 16}px)`
         : 0});
 
-    ${(props: ContainerProps) => props.$isHovering && css(hoverStyles)}
+    &:hover,
+    &:focus-within {
+      transform: none;
+      box-shadow: ${(props: ContainerProps) =>
+        props.$collapsed
+          ? "rgba(0, 0, 0, 0.2) 1px 0 4px"
+          : props.$isSmallerThanMinimum
+          ? "rgba(0, 0, 0, 0.1) inset -1px 0 2px"
+          : "none"};
+
+      ${Positioner} {
+        display: block;
+      }
 
-    &:hover {
       ${ToggleButton} {
         opacity: 1;
       }
     }
 
-    &:focus-within {
-      ${hoverStyles}
-
-      & > div {
-        opacity: 1;
-      }    
+    &:not(:hover):not(:focus-within) > div {
+      opacity: ${(props: ContainerProps) => (props.$collapsed ? "0" : "1")};
+      transition: opacity 100ms ease-in-out;
     }
   `};
 `;

app/components/Sidebar/components/ArchiveLink.tsx

@@ -3,21 +3,24 @@ import { ArchiveIcon } from "outline-icons";
 import * as React from "react";
 import { useDrop } from "react-dnd";
 import { useTranslation } from "react-i18next";
-import { toast } from "sonner";
 import useStores from "~/hooks/useStores";
+import useToasts from "~/hooks/useToasts";
 import { archivePath } from "~/utils/routeHelpers";
 import SidebarLink, { DragObject } from "./SidebarLink";
 
 function ArchiveLink() {
   const { policies, documents } = useStores();
   const { t } = useTranslation();
+  const { showToast } = useToasts();
 
   const [{ isDocumentDropping }, dropToArchiveDocument] = useDrop({
     accept: "document",
     drop: async (item: DragObject) => {
       const document = documents.get(item.id);
       await document?.archive();
-      toast.success(t("Document archived"));
+      showToast(t("Document archived"), {
+        type: "success",
+      });
     },
     canDrop: (item) => policies.abilities(item.id).archive,
     collect: (monitor) => ({

app/components/Sidebar/components/CollectionLinkChildren.tsx

@@ -2,7 +2,6 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import { useDrop } from "react-dnd";
 import { useTranslation } from "react-i18next";
-import { toast } from "sonner";
 import styled from "styled-components";
 import Collection from "~/models/Collection";
 import Document from "~/models/Document";
@@ -10,6 +9,7 @@ import DocumentsLoader from "~/components/DocumentsLoader";
 import { ResizingHeightContainer } from "~/components/ResizingHeightContainer";
 import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
+import useToasts from "~/hooks/useToasts";
 import DocumentLink from "./DocumentLink";
 import DropCursor from "./DropCursor";
 import EmptyCollectionPlaceholder from "./EmptyCollectionPlaceholder";
@@ -30,6 +30,7 @@ function CollectionLinkChildren({
   prefetchDocument,
 }: Props) {
   const can = usePolicy(collection);
+  const { showToast } = useToasts();
   const manualSort = collection.sort.field === "index";
   const { documents } = useStores();
   const { t } = useTranslation();
@@ -41,10 +42,14 @@ function CollectionLinkChildren({
     accept: "document",
     drop: (item: DragObject) => {
       if (!manualSort && item.collectionId === collection?.id) {
-        toast.message(
+        showToast(
           t(
             "You can't reorder documents in an alphabetically sorted collection"
-          )
+          ),
+          {
+            type: "info",
+            timeout: 5000,
+          }
         );
         return;
       }

app/components/Sidebar/components/DocumentLink.tsx

@@ -6,7 +6,6 @@ import { useDrag, useDrop } from "react-dnd";
 import { getEmptyImage } from "react-dnd-html5-backend";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
-import { toast } from "sonner";
 import styled from "styled-components";
 import { NavigationNode } from "@shared/types";
 import { sortNavigationNodes } from "@shared/utils/collections";
@@ -19,11 +18,12 @@ import Tooltip from "~/components/Tooltip";
 import useBoolean from "~/hooks/useBoolean";
 import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
+import useToasts from "~/hooks/useToasts";
 import DocumentMenu from "~/menus/DocumentMenu";
 import { newDocumentPath } from "~/utils/routeHelpers";
 import DropCursor from "./DropCursor";
 import DropToImport from "./DropToImport";
-import EditableTitle, { RefHandle } from "./EditableTitle";
+import EditableTitle from "./EditableTitle";
 import Folder from "./Folder";
 import Relative from "./Relative";
 import SidebarLink, { DragObject } from "./SidebarLink";
@@ -53,6 +53,7 @@ function InnerDocumentLink(
   }: Props,
   ref: React.RefObject<HTMLAnchorElement>
 ) {
+  const { showToast } = useToasts();
   const { documents, policies } = useStores();
   const { t } = useTranslation();
   const canUpdate = usePolicy(node.id).update;
@@ -62,7 +63,6 @@ function InnerDocumentLink(
   const document = documents.get(node.id);
   const { fetchChildDocuments } = documents;
   const [isEditing, setIsEditing] = React.useState(false);
-  const editableTitleRef = React.useRef<RefHandle>(null);
   const inStarredSection = useStarredContext();
 
   React.useEffect(() => {
@@ -221,10 +221,14 @@ function InnerDocumentLink(
     accept: "document",
     drop: (item: DragObject) => {
       if (!manualSort) {
-        toast.message(
+        showToast(
           t(
             "You can't reorder documents in an alphabetically sorted collection"
-          )
+          ),
+          {
+            type: "info",
+            timeout: 5000,
+          }
         );
         return;
       }
@@ -271,6 +275,10 @@ function InnerDocumentLink(
     node,
   ]);
 
+  const handleTitleEditing = React.useCallback((isEditing: boolean) => {
+    setIsEditing(isEditing);
+  }, []);
+
   const title =
     (activeDocument?.id === node.id ? activeDocument.title : node.title) ||
     t("Untitled");
@@ -316,15 +324,13 @@ function InnerDocumentLink(
                     starred: inStarredSection,
                   },
                 }}
-                emoji={document?.emoji || node.emoji}
                 label={
                   <EditableTitle
                     title={title}
                     onSubmit={handleTitleChange}
-                    onEditing={setIsEditing}
+                    onEditing={handleTitleEditing}
                     canUpdate={canUpdate}
                     maxLength={DocumentValidation.maxTitleLength}
-                    ref={editableTitleRef}
                   />
                 }
                 isActive={(match, location: Location<{ starred?: boolean }>) =>
@@ -361,9 +367,6 @@ function InnerDocumentLink(
                       )}
                       <DocumentMenu
                         document={document}
-                        onRename={() =>
-                          editableTitleRef.current?.setIsEditing(true)
-                        }
                         onOpen={handleMenuOpen}
                         onClose={handleMenuClose}
                       />

app/components/Sidebar/components/DropToImport.tsx

@@ -3,12 +3,12 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import Dropzone from "react-dropzone";
 import { useTranslation } from "react-i18next";
-import { toast } from "sonner";
 import styled, { css } from "styled-components";
 import LoadingIndicator from "~/components/LoadingIndicator";
 import useImportDocument from "~/hooks/useImportDocument";
 import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
+import useToasts from "~/hooks/useToasts";
 
 type Props = {
   children: JSX.Element;
@@ -21,6 +21,7 @@ type Props = {
 function DropToImport({ disabled, children, collectionId, documentId }: Props) {
   const { t } = useTranslation();
   const { documents } = useStores();
+  const { showToast } = useToasts();
   const { handleFiles, isImporting } = useImportDocument(
     collectionId,
     documentId
@@ -34,10 +35,13 @@ function DropToImport({ disabled, children, collectionId, documentId }: Props) {
   const canDocument = usePolicy(documentId);
 
   const handleRejection = React.useCallback(() => {
-    toast.error(
-      t("Document not supported – try Markdown, Plain text, HTML, or Word")
+    showToast(
+      t("Document not supported – try Markdown, Plain text, HTML, or Word"),
+      {
+        type: "error",
+      }
     );
-  }, [t]);
+  }, [t, showToast]);
 
   if (
     disabled ||

app/components/Sidebar/components/EditableTitle.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
-import { toast } from "sonner";
 import styled from "styled-components";
 import { s } from "@shared/styles";
+import useToasts from "~/hooks/useToasts";
 
 type Props = {
   onSubmit: (title: string) => Promise<void>;
@@ -11,21 +11,17 @@ type Props = {
   maxLength?: number;
 };
 
-export type RefHandle = {
-  setIsEditing: (isEditing: boolean) => void;
-};
-
-function EditableTitle(
-  { title, onSubmit, canUpdate, onEditing, ...rest }: Props,
-  ref: React.RefObject<RefHandle>
-) {
+function EditableTitle({
+  title,
+  onSubmit,
+  canUpdate,
+  onEditing,
+  ...rest
+}: Props) {
   const [isEditing, setIsEditing] = React.useState(false);
   const [originalValue, setOriginalValue] = React.useState(title);
   const [value, setValue] = React.useState(title);
-
-  React.useImperativeHandle(ref, () => ({
-    setIsEditing,
-  }));
+  const { showToast } = useToasts();
 
   React.useEffect(() => {
     setValue(title);
@@ -77,12 +73,14 @@ function EditableTitle(
           setOriginalValue(trimmedValue);
         } catch (error) {
           setValue(originalValue);
-          toast.error(error.message);
+          showToast(error.message, {
+            type: "error",
+          });
           throw error;
         }
       }
     },
-    [originalValue, value, onSubmit]
+    [originalValue, showToast, value, onSubmit]
   );
 
   React.useEffect(() => {
@@ -130,4 +128,4 @@ const Input = styled.input`
   }
 `;
 
-export default React.forwardRef(EditableTitle);
+export default EditableTitle;

app/components/Sidebar/components/HeaderButton.tsx

@@ -0,0 +1,102 @@
+import { ExpandedIcon, MoreIcon } from "outline-icons";
+import * as React from "react";
+import styled from "styled-components";
+import { s } from "@shared/styles";
+import Flex from "~/components/Flex";
+import { undraggableOnDesktop } from "~/styles";
+
+export type HeaderButtonProps = React.ComponentProps<typeof Button> & {
+  title: React.ReactNode;
+  image: React.ReactNode;
+  minHeight?: number;
+  rounded?: boolean;
+  showDisclosure?: boolean;
+  showMoreMenu?: boolean;
+  onClick: React.MouseEventHandler<HTMLButtonElement>;
+  children?: React.ReactNode;
+};
+
+const HeaderButton = React.forwardRef<HTMLButtonElement, HeaderButtonProps>(
+  function _HeaderButton(
+    {
+      showDisclosure,
+      showMoreMenu,
+      image,
+      title,
+      minHeight = 0,
+      children,
+      ...rest
+    }: HeaderButtonProps,
+    ref
+  ) {
+    return (
+      <Flex justify="space-between" align="center" shrink={false}>
+        <Button
+          {...rest}
+          minHeight={minHeight}
+          as="button"
+          ref={ref}
+          role="button"
+        >
+          <Title gap={8} align="center">
+            {image}
+            {title}
+          </Title>
+          {showDisclosure && <ExpandedIcon />}
+          {showMoreMenu && <MoreIcon />}
+        </Button>
+        {children}
+      </Flex>
+    );
+  }
+);
+
+const Title = styled(Flex)`
+  color: ${s("text")};
+  flex-shrink: 1;
+  flex-grow: 1;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+`;
+
+const Button = styled(Flex)<{ minHeight: number }>`
+  flex: 1;
+  color: ${s("textTertiary")};
+  align-items: center;
+  padding: 8px 4px;
+  font-size: 15px;
+  font-weight: 500;
+  border-radius: 4px;
+  margin: 8px 0;
+  border: 0;
+  background: none;
+  flex-shrink: 0;
+  min-height: ${(props) => props.minHeight}px;
+
+  -webkit-appearance: none;
+  text-decoration: none;
+  text-align: left;
+  overflow: hidden;
+  user-select: none;
+  cursor: var(--pointer);
+  ${undraggableOnDesktop()}
+
+  &:active,
+  &:hover,
+  &[aria-expanded="true"] {
+    color: ${s("sidebarText")};
+    transition: background 100ms ease-in-out;
+    background: ${s("sidebarActiveBackground")};
+  }
+
+  &:last-child {
+    margin-right: 8px;
+  }
+
+  &:first-child {
+    margin-left: 8px;
+  }
+`;
+
+export default HeaderButton;

app/components/Sidebar/components/HistoryNavigation.tsx

@@ -3,12 +3,12 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import { s } from "@shared/styles";
-import { isMac } from "@shared/utils/browser";
 import Flex from "~/components/Flex";
 import NudeButton from "~/components/NudeButton";
 import Tooltip from "~/components/Tooltip";
 import useKeyDown from "~/hooks/useKeyDown";
 import Desktop from "~/utils/Desktop";
+import { isMac } from "~/utils/browser";
 
 function HistoryNavigation(props: React.ComponentProps<typeof Flex>) {
   const { t } = useTranslation();

app/components/Sidebar/components/SharedDocumentLink.tsx

@@ -1,4 +1,3 @@
-import includes from "lodash/includes";
 import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
@@ -7,14 +6,14 @@ import Collection from "~/models/Collection";
 import Document from "~/models/Document";
 import useStores from "~/hooks/useStores";
 import { sharedDocumentPath } from "~/utils/routeHelpers";
-import { descendants } from "~/utils/tree";
+import Disclosure from "./Disclosure";
 import SidebarLink from "./SidebarLink";
 
 type Props = {
   node: NavigationNode;
   collection?: Collection;
-  activeDocumentId?: string;
-  activeDocument?: Document;
+  activeDocumentId: string | undefined;
+  activeDocument: Document | undefined;
   isDraft?: boolean;
   depth: number;
   index: number;
@@ -42,19 +41,10 @@ function DocumentLink(
   const hasChildDocuments =
     !!node.children.length || activeDocument?.parentDocumentId === node.id;
   const document = documents.get(node.id);
+
   const showChildren = React.useMemo(
-    () =>
-      !!(
-        hasChildDocuments &&
-        ((activeDocumentId &&
-          includes(
-            descendants(node).map((n) => n.id),
-            activeDocumentId
-          )) ||
-          isActiveDocument ||
-          depth <= 1)
-      ),
-    [hasChildDocuments, activeDocumentId, isActiveDocument, depth, node]
+    () => !!hasChildDocuments,
+    [hasChildDocuments]
   );
 
   const [expanded, setExpanded] = React.useState(showChildren);
@@ -65,6 +55,12 @@ function DocumentLink(
     }
   }, [showChildren]);
 
+  React.useEffect(() => {
+    if (isActiveDocument) {
+      setExpanded(true);
+    }
+  }, [isActiveDocument]);
+
   const handleDisclosureClick = React.useCallback(
     (ev: React.SyntheticEvent) => {
       ev.preventDefault();
@@ -109,10 +105,14 @@ function DocumentLink(
             title: node.title,
           },
         }}
-        expanded={hasChildDocuments && depth !== 0 ? expanded : undefined}
-        onDisclosureClick={handleDisclosureClick}
-        emoji={node.emoji}
-        label={title}
+        label={
+          <>
+            {hasChildDocuments && depth !== 0 && (
+              <Disclosure expanded={expanded} onClick={handleDisclosureClick} />
+            )}
+            {title}
+          </>
+        }
         depth={depth}
         exact={false}
         scrollIntoViewIfNeeded={!document?.isStarred}

app/components/Sidebar/components/SidebarButton.tsx

@@ -1,120 +0,0 @@
-import { MoreIcon } from "outline-icons";
-import * as React from "react";
-import styled from "styled-components";
-import { extraArea, s } from "@shared/styles";
-import Flex from "~/components/Flex";
-import Text from "~/components/Text";
-import { draggableOnDesktop, undraggableOnDesktop } from "~/styles";
-import Desktop from "~/utils/Desktop";
-
-export type SidebarButtonProps = React.ComponentProps<typeof Button> & {
-  position: "top" | "bottom";
-  title: React.ReactNode;
-  image: React.ReactNode;
-  showMoreMenu?: boolean;
-  onClick: React.MouseEventHandler<HTMLButtonElement>;
-  children?: React.ReactNode;
-};
-
-const SidebarButton = React.forwardRef<HTMLButtonElement, SidebarButtonProps>(
-  function _SidebarButton(
-    {
-      position = "top",
-      showMoreMenu,
-      image,
-      title,
-      children,
-      ...rest
-    }: SidebarButtonProps,
-    ref
-  ) {
-    return (
-      <Container
-        justify="space-between"
-        align="center"
-        shrink={false}
-        $position={position}
-      >
-        <Button
-          {...rest}
-          $position={position}
-          as="button"
-          ref={ref}
-          role="button"
-        >
-          <Content gap={8} align="center">
-            {image}
-            {title && <Title as="span">{title}</Title>}
-          </Content>
-          {showMoreMenu && <StyledMoreIcon />}
-        </Button>
-        {children}
-      </Container>
-    );
-  }
-);
-
-const StyledMoreIcon = styled(MoreIcon)`
-  flex-shrink: 0;
-`;
-
-const Container = styled(Flex)<{ $position: "top" | "bottom" }>`
-  padding-top: ${(props) =>
-    props.$position === "top" && Desktop.hasInsetTitlebar() ? 36 : 0}px;
-  ${draggableOnDesktop()}
-`;
-
-const Title = styled(Text)`
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-`;
-
-const Content = styled(Flex)`
-  flex-shrink: 1;
-  flex-grow: 1;
-`;
-
-const Button = styled(Flex)<{
-  $position: "top" | "bottom";
-}>`
-  flex: 1;
-  color: ${s("textTertiary")};
-  align-items: center;
-  padding: 4px;
-  font-size: 15px;
-  font-weight: 500;
-  border-radius: 4px;
-  border: 0;
-  margin: ${(props) => (props.$position === "top" ? 16 : 8)}px 0;
-  background: none;
-  flex-shrink: 0;
-
-  -webkit-appearance: none;
-  text-decoration: none;
-  text-align: left;
-  user-select: none;
-  cursor: var(--pointer);
-  position: relative;
-
-  ${undraggableOnDesktop()}
-  ${extraArea(4)}
-
-  &:active,
-  &:hover,
-  &[aria-expanded="true"] {
-    color: ${s("sidebarText")};
-    transition: background 100ms ease-in-out;
-    background: ${s("sidebarActiveBackground")};
-  }
-
-  &:last-child {
-    margin-right: 8px;
-  }
-
-  &:first-child {
-    margin-left: 8px;
-  }
-`;
-
-export default SidebarButton;

app/components/Sidebar/components/SidebarLink.tsx

@@ -5,7 +5,6 @@ import breakpoint from "styled-components-breakpoint";
 import { s } from "@shared/styles";
 import { NavigationNode } from "@shared/types";
 import EventBoundary from "~/components/EventBoundary";
-import EmojiIcon from "~/components/Icons/EmojiIcon";
 import NudeButton from "~/components/NudeButton";
 import useUnmount from "~/hooks/useUnmount";
 import { undraggableOnDesktop } from "~/styles";
@@ -22,17 +21,16 @@ type Props = Omit<NavLinkProps, "to"> & {
   to?: LocationDescriptor;
   innerRef?: (ref: HTMLElement | null | undefined) => void;
   onClick?: React.MouseEventHandler<HTMLAnchorElement>;
-  /** Callback when we expect the user to click on the link. Used for prefetching data. */
+  /* Callback when we expect the user to click on the link. Used for prefetching data. */
   onClickIntent?: () => void;
   onDisclosureClick?: React.MouseEventHandler<HTMLButtonElement>;
   icon?: React.ReactNode;
-  emoji?: string | null;
   label?: React.ReactNode;
   menu?: React.ReactNode;
   showActions?: boolean;
   disabled?: boolean;
   active?: boolean;
-  /** If set, a disclosure will be rendered to the left of any icon */
+  /* If set, a disclosure will be rendered to the left of any icon */
   expanded?: boolean;
   isActiveDrop?: boolean;
   isDraft?: boolean;
@@ -50,7 +48,6 @@ function SidebarLink(
     onClick,
     onClickIntent,
     to,
-    emoji,
     label,
     active,
     isActiveDrop,
@@ -139,7 +136,6 @@ function SidebarLink(
             />
           )}
           {icon && <IconWrapper>{icon}</IconWrapper>}
-          {emoji && <EmojiIcon emoji={emoji} />}
           <Label>{label}</Label>
         </Content>
       </Link>
@@ -156,7 +152,6 @@ const Content = styled.span`
 
   ${Disclosure} {
     margin-top: 2px;
-    margin-left: 2px;
   }
 `;
 
@@ -297,7 +292,7 @@ const Label = styled.div`
   position: relative;
   width: 100%;
   max-height: 4.8em;
-  line-height: 24px;
+  line-height: 1.6;
 
   * {
     unicode-bidi: plaintext;

app/components/Sidebar/components/Starred.tsx

@@ -3,11 +3,9 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import { useDrop } from "react-dnd";
 import { useTranslation } from "react-i18next";
-import { toast } from "sonner";
 import Star from "~/models/Star";
 import DelayedMount from "~/components/DelayedMount";
 import Flex from "~/components/Flex";
-import usePaginatedRequest from "~/hooks/usePaginatedRequest";
 import useStores from "~/hooks/useStores";
 import DropCursor from "./DropCursor";
 import Header from "./Header";
@@ -20,16 +18,36 @@ import StarredLink from "./StarredLink";
 const STARRED_PAGINATION_LIMIT = 10;
 
 function Starred() {
+  const [fetchError, setFetchError] = React.useState();
+  const [displayedStarsCount, setDisplayedStarsCount] = React.useState(
+    STARRED_PAGINATION_LIMIT
+  );
   const { stars } = useStores();
   const { t } = useTranslation();
 
-  const { loading, next, end, error, page } = usePaginatedRequest<Star>(
-    stars.fetchPage,
-    {
-      limit: STARRED_PAGINATION_LIMIT,
-    }
+  const fetchResults = React.useCallback(
+    async (offset = 0) => {
+      try {
+        await stars.fetchPage({
+          limit: STARRED_PAGINATION_LIMIT + 1,
+          offset,
+        });
+      } catch (error) {
+        setFetchError(error);
+      }
+    },
+    [stars]
   );
 
+  React.useEffect(() => {
+    void fetchResults();
+  }, []);
+
+  const handleShowMore = async () => {
+    await fetchResults(displayedStarsCount);
+    setDisplayedStarsCount((prev) => prev + STARRED_PAGINATION_LIMIT);
+  };
+
   // Drop to reorder document
   const [{ isOverReorder, isDraggingAnyStar }, dropToReorder] = useDrop({
     accept: "star",
@@ -44,10 +62,6 @@ function Starred() {
     }),
   });
 
-  if (error) {
-    toast.error(t("Could not load starred documents"));
-  }
-
   if (!stars.orderedData.length) {
     return null;
   }
@@ -64,20 +78,18 @@ function Starred() {
                 position="top"
               />
             )}
-            {stars.orderedData
-              .slice(0, page * STARRED_PAGINATION_LIMIT)
-              .map((star) => (
-                <StarredLink key={star.id} star={star} />
-              ))}
-            {!end && (
+            {stars.orderedData.slice(0, displayedStarsCount).map((star) => (
+              <StarredLink key={star.id} star={star} />
+            ))}
+            {stars.orderedData.length > displayedStarsCount && (
               <SidebarLink
-                onClick={next}
+                onClick={handleShowMore}
                 label={`${t("Show more")}…`}
                 disabled={stars.isFetching}
                 depth={0}
               />
             )}
-            {loading && (
+            {(stars.isFetching || fetchError) && !stars.orderedData.length && (
               <Flex column>
                 <DelayedMount>
                   <PlaceholderCollections />

app/components/Sidebar/components/StarredLink.tsx

@@ -8,6 +8,7 @@ import { useDrag, useDrop } from "react-dnd";
 import { getEmptyImage } from "react-dnd-html5-backend";
 import { useLocation } from "react-router-dom";
 import styled, { useTheme } from "styled-components";
+import parseTitle from "@shared/utils/parseTitle";
 import Star from "~/models/Star";
 import Fade from "~/components/Fade";
 import CollectionIcon from "~/components/Icons/CollectionIcon";
@@ -41,10 +42,14 @@ function useLabelAndIcon({ documentId, collectionId }: Star) {
   if (documentId) {
     const document = documents.get(documentId);
     if (document) {
+      const { emoji } = parseTitle(document?.title);
+
       return {
-        label: document.titleWithDefault,
-        icon: document.emoji ? (
-          <EmojiIcon emoji={document.emoji} />
+        label: emoji
+          ? document.title.replace(emoji, "")
+          : document.titleWithDefault,
+        icon: emoji ? (
+          <EmojiIcon emoji={emoji} />
         ) : (
           <StarredIcon color={theme.yellow} />
         ),
@@ -143,10 +148,6 @@ function StarredLink({ star }: Props) {
       return null;
     }
 
-    const { emoji } = document;
-    const label = emoji
-      ? document.title.replace(emoji, "")
-      : document.titleWithDefault;
     const collection = document.collectionId
       ? collections.get(document.collectionId)
       : undefined;

app/components/Sidebar/components/Toggle.tsx

@@ -0,0 +1,106 @@
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import styled, { css } from "styled-components";
+import breakpoint from "styled-components-breakpoint";
+import { s } from "@shared/styles";
+import Arrow from "~/components/Arrow";
+import useEventListener from "~/hooks/useEventListener";
+
+type Props = {
+  direction: "left" | "right";
+  style?: React.CSSProperties;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+};
+
+const Toggle = React.forwardRef<HTMLButtonElement, Props>(function Toggle_(
+  { direction = "left", onClick, style }: Props,
+  ref
+) {
+  const { t } = useTranslation();
+  const [hovering, setHovering] = React.useState(false);
+  const positionRef = React.useRef<HTMLDivElement>(null);
+
+  // Not using CSS hover here so that we can disable pointer events on this
+  // div and allow click through to the editor elements behind.
+  useEventListener("mousemove", (event: MouseEvent) => {
+    if (!positionRef.current) {
+      return;
+    }
+
+    const bound = positionRef.current.getBoundingClientRect();
+    const withinBounds =
+      event.clientX >= bound.left && event.clientX <= bound.right;
+    if (withinBounds !== hovering) {
+      setHovering(withinBounds);
+    }
+  });
+
+  return (
+    <Positioner style={style} ref={positionRef} $hovering={hovering}>
+      <ToggleButton
+        ref={ref}
+        $direction={direction}
+        onClick={onClick}
+        aria-label={t("Toggle sidebar")}
+      >
+        <Arrow />
+      </ToggleButton>
+    </Positioner>
+  );
+});
+
+export const ToggleButton = styled.button<{ $direction?: "left" | "right" }>`
+  opacity: 0;
+  background: none;
+  transition: opacity 100ms ease-in-out;
+  transform: translateY(-50%)
+    scaleX(${(props) => (props.$direction === "left" ? 1 : -1)});
+  position: fixed;
+  top: 50vh;
+  padding: 8px;
+  border: 0;
+  pointer-events: none;
+  color: ${s("divider")};
+
+  &:active {
+    color: ${s("sidebarText")};
+  }
+
+  ${breakpoint("tablet")`
+    pointer-events: all;
+    cursor: var(--pointer);
+  `}
+
+  @media (hover: none) {
+    opacity: 1;
+  }
+`;
+
+export const Positioner = styled.div<{ $hovering: boolean }>`
+  display: none;
+  z-index: 2;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: -30px;
+  width: 30px;
+  pointer-events: none;
+
+  &:focus-within ${ToggleButton} {
+    opacity: 1;
+  }
+
+  ${(props) =>
+    props.$hovering &&
+    css`
+      ${ToggleButton} {
+        opacity: 1;
+      }
+    `}
+
+  ${breakpoint("tablet")`
+    display: block;
+  `}
+`;
+
+export default Toggle;

app/components/Sidebar/components/ToggleButton.tsx

@@ -1,15 +0,0 @@
-import styled from "styled-components";
-import { hover } from "~/styles";
-import SidebarButton from "./SidebarButton";
-
-const ToggleButton = styled(SidebarButton)`
-  opacity: 0;
-  transition: opacity 100ms ease-in-out;
-
-  &:${hover},
-  &:active {
-    opacity: 1;
-  }
-`;
-
-export default ToggleButton;

app/components/Squircle.tsx

@@ -3,37 +3,29 @@ import styled from "styled-components";
 import Flex from "./Flex";
 
 type Props = {
-  /** The width and height of the squircle */
   size?: number;
-  /** The color of the squircle */
   color?: string;
   children?: React.ReactNode;
-  className?: string;
 };
 
-const Squircle: React.FC<Props> = ({
-  color,
-  size = 28,
-  children,
-  className,
-}: Props) => (
-  <Wrapper size={size} align="center" justify="center" className={className}>
-    <svg width={size} height={size} fill={color} viewBox="0 0 28 28">
-      <path d="M0 11.1776C0 1.97285 1.97285 0 11.1776 0H16.8224C26.0272 0 28 1.97285 28 11.1776V16.8224C28 26.0272 26.0272 28 16.8224 28H11.1776C1.97285 28 0 26.0272 0 16.8224V11.1776Z" />
+const Squircle: React.FC<Props> = ({ color, size = 28, children }: Props) => (
+  <Wrapper
+    style={{ width: size, height: size }}
+    align="center"
+    justify="center"
+  >
+    <svg width={size} height={size} viewBox="0 0 28 28">
+      <path
+        fill={color}
+        d="M0 11.1776C0 1.97285 1.97285 0 11.1776 0H16.8224C26.0272 0 28 1.97285 28 11.1776V16.8224C28 26.0272 26.0272 28 16.8224 28H11.1776C1.97285 28 0 26.0272 0 16.8224V11.1776Z"
+      />
     </svg>
     <Content>{children}</Content>
   </Wrapper>
 );
 
-const Wrapper = styled(Flex)<{ size: number }>`
+const Wrapper = styled(Flex)`
   position: relative;
-  width: ${(props) => props.size}px;
-  height: ${(props) => props.size}px;
-
-  svg {
-    transition: fill 150ms ease-in-out;
-    transition-delay: var(--delay);
-  }
 `;
 
 const Content = styled.div`

app/components/Star.tsx

@@ -1,7 +1,6 @@
 import { observer } from "mobx-react";
 import { StarredIcon, UnstarredIcon } from "outline-icons";
 import * as React from "react";
-import { useTranslation } from "react-i18next";
 import styled, { useTheme } from "styled-components";
 import Collection from "~/models/Collection";
 import Document from "~/models/Document";
@@ -15,18 +14,12 @@ import { hover } from "~/styles";
 import NudeButton from "./NudeButton";
 
 type Props = {
-  /** Target collection */
   collection?: Collection;
-  /** Target document */
   document?: Document;
-  /** Size of the star */
   size?: number;
-  /** Color override for the star */
-  color?: string;
 };
 
-function Star({ size, document, collection, color, ...rest }: Props) {
-  const { t } = useTranslation();
+function Star({ size, document, collection, ...rest }: Props) {
   const theme = useTheme();
   const context = useActionContext({
     activeDocumentId: document?.id,
@@ -43,10 +36,6 @@ function Star({ size, document, collection, color, ...rest }: Props) {
     <NudeButton
       context={context}
       hideOnActionDisabled
-      tooltip={{
-        tooltip: target.isStarred ? t("Unstar document") : t("Star document"),
-        delay: 500,
-      }}
       action={
         collection
           ? collection.isStarred
@@ -66,7 +55,7 @@ function Star({ size, document, collection, color, ...rest }: Props) {
       ) : (
         <AnimatedStar
           size={size}
-          color={color ?? theme.textTertiary}
+          color={theme.textTertiary}
           as={UnstarredIcon}
         />
       )}

app/components/Tab.tsx

@@ -1,7 +1,4 @@
 import { m } from "framer-motion";
-import { LocationDescriptor } from "history";
-import isEqual from "lodash/isEqual";
-import queryString from "query-string";
 import * as React from "react";
 import styled, { useTheme } from "styled-components";
 import { s } from "@shared/styles";
@@ -9,19 +6,8 @@ import NavLink from "~/components/NavLink";
 import { hover } from "~/styles";
 
 type Props = Omit<React.ComponentProps<typeof NavLink>, "children"> & {
-  /**
-   * The path to match against the current location.
-   */
-  to: LocationDescriptor;
-  /**
-   * If true, the tab will only be active if the path matches exactly.
-   */
+  to: string;
   exact?: boolean;
-  /**
-   * If true, the tab will only be active if the query string matches exactly.
-   * By default query string parameters are ignored for location mathing.
-   */
-  exactQueryString?: boolean;
   children?: React.ReactNode;
 };
 
@@ -59,38 +45,24 @@ const transition = {
   damping: 30,
 };
 
-const Tab: React.FC<Props> = ({
-  children,
-  exact,
-  exactQueryString,
-  ...rest
-}: Props) => {
+const Tab: React.FC<Props> = ({ children, ...rest }: Props) => {
   const theme = useTheme();
   const activeStyle = {
     color: theme.textSecondary,
   };
 
   return (
-    <TabLink
-      {...rest}
-      exact={exact || exactQueryString}
-      activeStyle={activeStyle}
-    >
-      {(match, location) => (
+    <TabLink {...rest} activeStyle={activeStyle}>
+      {(match) => (
         <>
           {children}
-          {match &&
-            (!exactQueryString ||
-              isEqual(
-                queryString.parse(location.search ?? ""),
-                queryString.parse(rest.to.search as string)
-              )) && (
-              <Active
-                layoutId="underline"
-                initial={false}
-                transition={transition}
-              />
-            )}
+          {match && (
+            <Active
+              layoutId="underline"
+              initial={false}
+              transition={transition}
+            />
+          )}
         </>
       )}
     </TabLink>

app/components/Table.tsx

@@ -1,4 +1,4 @@
-import isEqual from "lodash/isEqual";
+import { isEqual } from "lodash";
 import { observer } from "mobx-react";
 import { CollapsedIcon } from "outline-icons";
 import * as React from "react";