Add missing tooltips

.env.sample

@@ -1,21 +1,5 @@
 NODE_ENV=production
 
-# –––––––––––––––––––––––––––––––––––––––––
-# –––––––––––  FILE-BASED SECRETS  ––––––––
-# –––––––––––––––––––––––––––––––––––––––––
-#
-# Any environment variable can be loaded from a file by appending _FILE to the
-# variable name and setting the value to the path of the file. This is useful
-# for Docker secrets and other file-based secret management systems.
-#
-# For example, instead of:
-#   SECRET_KEY=your_secret_key
-# You can use:
-#   SECRET_KEY_FILE=/run/secrets/outline_secret_key
-#
-# The file contents will be trimmed of leading/trailing whitespace. If both the
-# variable and the _FILE variant are set, the direct variable takes precedence.
-
 # This URL should point to the fully qualified, publicly accessible, URL. If using a
 # proxy this will be the proxy's URL.
 URL=
@@ -135,18 +119,14 @@ SSL_CERT=
 # false if you can be sure that SSL is terminated at an external loadbalancer.
 FORCE_HTTPS=true
 
-# When behind a reverse proxy, the header to use for the client IP.
-# The default value is "X-Forwarded-For", common values are "X-Real-IP"
-# and "X-Client-IP".
-# PROXY_IP_HEADER=
-
 
 # ––––––––––––––––––––––––––––––––––––––
 # ––––––––––  AUTHENTICATION  ––––––––––
 # ––––––––––––––––––––––––––––––––––––––
 
-# Third party signin credentials, at least ONE OF these is required for a 
-# working installation or you'll have no sign-in options.
+# Third party signin credentials, at least ONE OF EITHER Google, Slack,
+# Discord, or Microsoft is required for a working installation or you'll
+# have no sign-in options.
 
 # Slack sign-in provider
 # DOCS: https://docs.getoutline.com/s/hosting/doc/slack-sgMujR8J9J
@@ -232,11 +212,6 @@ GITHUB_APP_NAME=
 GITHUB_APP_ID=
 GITHUB_APP_PRIVATE_KEY=
 
-# The GitLab integration allows previewing issue and merge request links
-# DOCS: 
-GITLAB_CLIENT_ID=
-GITLAB_CLIENT_SECRET=
-
 # Linear integration allows previewing issue links as rich mentions
 LINEAR_CLIENT_ID=
 LINEAR_CLIENT_SECRET=

.env.test

@@ -18,9 +18,6 @@ GITHUB_CLIENT_ID=123;
 GITHUB_CLIENT_SECRET=123;
 GITHUB_APP_NAME=outline-test;
 
-GITLAB_CLIENT_ID=123
-GITLAB_CLIENT_SECRET=123
-
 OIDC_CLIENT_ID=client-id
 OIDC_CLIENT_SECRET=client-secret
 OIDC_AUTH_URI=http://localhost/authorize

.github/workflows/ci.yml

@@ -24,17 +24,17 @@ jobs:
       - uses: actions/checkout@v5
       - name: Enable Corepack
         run: corepack enable
-      - name: Use Node.js 24.x
+      - name: Use Node.js 22.x
         uses: actions/setup-node@v5
         with:
-          node-version: 24.x
+          node-version: 22.x
           cache: "yarn"
       - name: Cache node_modules
         id: cache-node-modules
         uses: actions/cache@v4
         with:
           path: node_modules
-          key: ${{ runner.os }}-node-modules-24.x-${{ hashFiles('yarn.lock') }}
+          key: ${{ runner.os }}-node-modules-${{ hashFiles('yarn.lock') }}
       - name: Install dependencies
         if: steps.cache-node-modules.outputs.cache-hit != 'true'
         run: yarn install --immutable
@@ -48,13 +48,13 @@ jobs:
         run: corepack enable
       - uses: actions/setup-node@v5
         with:
-          node-version: 24.x
+          node-version: 22.x
           cache: "yarn"
       - name: Restore node_modules
         uses: actions/cache@v4
         with:
           path: node_modules
-          key: ${{ runner.os }}-node-modules-24.x-${{ hashFiles('yarn.lock') }}
+          key: ${{ runner.os }}-node-modules-${{ hashFiles('yarn.lock') }}
       - run: yarn lint --quiet
 
   types:
@@ -66,13 +66,13 @@ jobs:
         run: corepack enable
       - uses: actions/setup-node@v5
         with:
-          node-version: 24.x
+          node-version: 22.x
           cache: "yarn"
       - name: Restore node_modules
         uses: actions/cache@v4
         with:
           path: node_modules
-          key: ${{ runner.os }}-node-modules-24.x-${{ hashFiles('yarn.lock') }}
+          key: ${{ runner.os }}-node-modules-${{ hashFiles('yarn.lock') }}
       - run: yarn tsc
 
   changes:
@@ -114,13 +114,13 @@ jobs:
         run: corepack enable
       - uses: actions/setup-node@v5
         with:
-          node-version: 24.x
+          node-version: 22.x
           cache: "yarn"
       - name: Restore node_modules
         uses: actions/cache@v4
         with:
           path: node_modules
-          key: ${{ runner.os }}-node-modules-24.x-${{ hashFiles('yarn.lock') }}
+          key: ${{ runner.os }}-node-modules-${{ hashFiles('yarn.lock') }}
       - run: yarn test:${{ matrix.test-group }}
 
   test-server:
@@ -152,13 +152,13 @@ jobs:
         run: corepack enable
       - uses: actions/setup-node@v5
         with:
-          node-version: 24.x
+          node-version: 22.x
           cache: "yarn"
       - name: Restore node_modules
         uses: actions/cache@v4
         with:
           path: node_modules
-          key: ${{ runner.os }}-node-modules-24.x-${{ hashFiles('yarn.lock') }}
+          key: ${{ runner.os }}-node-modules-${{ hashFiles('yarn.lock') }}
       - run: yarn sequelize db:migrate
       - name: Run server tests
         run: |
@@ -167,7 +167,7 @@ jobs:
 
   bundle-size:
     needs: [setup, types, changes]
-    if: ${{ (needs.changes.outputs.app == 'true' || needs.changes.outputs.config == 'true') && github.repository == 'outline/outline' }}
+    if: ${{ needs.changes.outputs.app == 'true' && github.repository == 'outline/outline' }}
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v5
@@ -175,13 +175,13 @@ jobs:
         run: corepack enable
       - uses: actions/setup-node@v5
         with:
-          node-version: 24.x
+          node-version: 22.x
           cache: "yarn"
       - name: Restore node_modules
         uses: actions/cache@v4
         with:
           path: node_modules
-          key: ${{ runner.os }}-node-modules-24.x-${{ hashFiles('yarn.lock') }}
+          key: ${{ runner.os }}-node-modules-${{ hashFiles('yarn.lock') }}
       - name: Set environment to production
         run: echo "NODE_ENV=production" >> $GITHUB_ENV
       - run: yarn vite:build

.github/workflows/docker-build-check.yml

@@ -1,43 +0,0 @@
-name: Docker Build Check
-
-on:
-  push:
-    paths:
-      - "Dockerfile"
-      - "Dockerfile.base"
-  pull_request:
-    paths:
-      - "Dockerfile"
-      - "Dockerfile.base"
-
-env:
-  BASE_IMAGE_NAME: outline-base
-
-jobs:
-  build:
-    runs-on: ubicloud-standard-8
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v5
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-        with:
-          driver: docker
-
-      - name: Build base image
-        uses: docker/build-push-action@v6
-        with:
-          context: .
-          file: Dockerfile.base
-          tags: ${{ env.BASE_IMAGE_NAME }}:latest
-          push: false
-
-      - name: Build main image
-        uses: docker/build-push-action@v6
-        with:
-          context: .
-          file: Dockerfile
-          push: false
-          build-args: |
-            BASE_IMAGE=${{ env.BASE_IMAGE_NAME }}:latest

.github/workflows/docker.yml

@@ -17,11 +17,11 @@ jobs:
         uses: actions/checkout@v5
 
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v4
+        uses: docker/setup-buildx-action@v3
 
       - name: Docker base meta
         id: base_meta
-        uses: docker/metadata-action@v6
+        uses: docker/metadata-action@v5
         with:
           images: |
             ${{ env.BASE_IMAGE_NAME }}
@@ -30,14 +30,14 @@ jobs:
             type=semver,pattern={{major}}.{{minor}}
 
       - name: Login to Docker Hub
-        uses: docker/login-action@v4
+        uses: docker/login-action@v3
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
 
       - name: Build and push base image
         id: base_build
-        uses: docker/build-push-action@v7
+        uses: docker/build-push-action@v6
         with:
           context: .
           file: Dockerfile.base
@@ -51,7 +51,7 @@ jobs:
 
       - name: Docker meta
         id: meta
-        uses: docker/metadata-action@v6
+        uses: docker/metadata-action@v5
         with:
           images: |
             ${{ env.IMAGE_NAME }}
@@ -61,7 +61,7 @@ jobs:
 
       - name: Build and push
         id: build
-        uses: docker/build-push-action@v7
+        uses: docker/build-push-action@v6
         with:
           context: .
           file: Dockerfile
@@ -96,11 +96,11 @@ jobs:
         uses: actions/checkout@v5
 
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v4
+        uses: docker/setup-buildx-action@v3
 
       - name: Docker base meta
         id: base_meta
-        uses: docker/metadata-action@v6
+        uses: docker/metadata-action@v5
         with:
           images: |
             ${{ env.BASE_IMAGE_NAME }}
@@ -109,14 +109,14 @@ jobs:
             type=semver,pattern={{major}}.{{minor}}
 
       - name: Login to Docker Hub
-        uses: docker/login-action@v4
+        uses: docker/login-action@v3
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
 
       - name: Build and push base image
         id: base_build
-        uses: docker/build-push-action@v7
+        uses: docker/build-push-action@v6
         with:
           context: .
           file: Dockerfile.base
@@ -130,7 +130,7 @@ jobs:
 
       - name: Docker meta
         id: meta
-        uses: docker/metadata-action@v6
+        uses: docker/metadata-action@v5
         with:
           images: |
             ${{ env.IMAGE_NAME }}
@@ -140,7 +140,7 @@ jobs:
 
       - name: Build and push
         id: build
-        uses: docker/build-push-action@v7
+        uses: docker/build-push-action@v6
         with:
           context: .
           file: Dockerfile
@@ -182,17 +182,17 @@ jobs:
           merge-multiple: true
 
       - name: Login to Docker Hub
-        uses: docker/login-action@v4
+        uses: docker/login-action@v3
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
 
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v4
+        uses: docker/setup-buildx-action@v3
 
       - name: Docker meta
         id: meta
-        uses: docker/metadata-action@v6
+        uses: docker/metadata-action@v5
         with:
           images: ${{ env.IMAGE_NAME }}
           tags: |

.github/workflows/update-node.yml

@@ -1,94 +0,0 @@
-name: Update Node.js LTS
-
-on:
-  schedule:
-    # Run every Monday at 9:00 UTC
-    - cron: "0 9 * * 1"
-  workflow_dispatch:
-
-permissions:
-  contents: write
-  pull-requests: write
-
-jobs:
-  update-node:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v5
-
-      - name: Check for Node.js LTS update
-        id: check
-        run: |
-          # Get current Node version from Dockerfile
-          CURRENT_VERSION=$(grep -oP 'FROM node:\K[0-9]+\.[0-9]+\.[0-9]+' Dockerfile.base)
-          echo "current=$CURRENT_VERSION" >> "$GITHUB_OUTPUT"
-          echo "Current Node.js version: $CURRENT_VERSION"
-
-          # Fetch the latest LTS release (any major version) from nodejs.org
-          LATEST_VERSION=$(curl -s https://nodejs.org/dist/index.json | \
-            jq -r '[.[] | select(.lts != false)][0].version' | \
-            sed 's/^v//')
-
-          if ! [[ "$LATEST_VERSION" =~ ^[0-9]+\.[0-9]+\.[0-9]+$ ]]; then
-            echo "::error::Failed to fetch a valid LTS version (got '$LATEST_VERSION')"
-            exit 1
-          fi
-
-          echo "latest=$LATEST_VERSION" >> "$GITHUB_OUTPUT"
-          echo "Latest Node.js LTS version: $LATEST_VERSION"
-
-          if [ "$CURRENT_VERSION" = "$LATEST_VERSION" ]; then
-            echo "updated=false" >> "$GITHUB_OUTPUT"
-            echo "Already up to date."
-          else
-            echo "updated=true" >> "$GITHUB_OUTPUT"
-            echo "Update available: $CURRENT_VERSION -> $LATEST_VERSION"
-          fi
-
-      - name: Update Node.js version references
-        if: steps.check.outputs.updated == 'true'
-        env:
-          CURRENT: ${{ steps.check.outputs.current }}
-          LATEST: ${{ steps.check.outputs.latest }}
-        run: |
-          CURRENT_MAJOR=$(echo "$CURRENT" | cut -d. -f1)
-          LATEST_MAJOR=$(echo "$LATEST" | cut -d. -f1)
-
-          # Update Dockerfiles
-          sed -i "s/node:${CURRENT}-slim/node:${LATEST}-slim/g" Dockerfile
-          sed -i "s/node:${CURRENT} /node:${LATEST} /g" Dockerfile.base
-
-          # Update references that depend on major version
-          if [ "$CURRENT_MAJOR" != "$LATEST_MAJOR" ]; then
-            # .nvmrc
-            echo "$LATEST_MAJOR" > .nvmrc
-
-            # CI workflow: step name, node-version, and cache keys
-            sed -i "s/Use Node.js ${CURRENT_MAJOR}.x/Use Node.js ${LATEST_MAJOR}.x/g" .github/workflows/ci.yml
-            sed -i "s/node-version: ${CURRENT_MAJOR}.x/node-version: ${LATEST_MAJOR}.x/g" .github/workflows/ci.yml
-            # Update cache keys: replace node-modules-[optional old version] with new version
-            sed -i -E "s/node-modules-([0-9]+\.x-)?/node-modules-${LATEST_MAJOR}.x-/g" .github/workflows/ci.yml
-
-            # package.json engines field: append new major version
-            sed -i "s/\"node\": \"\(.*\)\"/\"node\": \"\1 || ${LATEST_MAJOR}\"/" package.json
-          fi
-
-          echo "Updated Node.js from $CURRENT to $LATEST"
-
-      - name: Create pull request
-        if: steps.check.outputs.updated == 'true'
-        uses: peter-evans/create-pull-request@v7
-        with:
-          commit-message: "fix: Update Node.js to ${{ steps.check.outputs.latest }}"
-          title: "fix: Update Node.js to ${{ steps.check.outputs.latest }}"
-          body: |
-            Automated update of Node.js in Docker images.
-
-            - **Previous version:** ${{ steps.check.outputs.current }}
-            - **New version:** ${{ steps.check.outputs.latest }}
-
-            [Release notes](https://nodejs.org/en/blog/release/v${{ steps.check.outputs.latest }})
-          branch: automated/update-node-lts
-          delete-branch: true
-          labels: dependencies

.gitignore

@@ -20,5 +20,4 @@ data/*
 !.yarn/patches
 !.yarn/plugins
 !.yarn/releases
-.yarn/releases
 !.yarn/sdks

.nvmrc

@@ -1 +1 @@
-24
+22

.yarnrc.yml

@@ -1,6 +1,3 @@
 nodeLinker: node-modules
 
 npmMinimalAgeGate: 86400
-
-npmPreapprovedPackages:
-  - outline-icons

AGENTS.md

@@ -70,7 +70,7 @@ yarn install
 ### Exports
 
 - Exported members must appear at the top of the file.
-- Always use named exports for new components & classes.
+- Prefer named exports for components & classes.
 - Document ALL public/exported functions with JSDoc.
 
 ## React Usage

Dockerfile

@@ -6,7 +6,7 @@ ARG APP_PATH
 WORKDIR $APP_PATH
 
 # ---
-FROM node:24.14.1-slim AS runner
+FROM node:22.21.0-slim AS runner
 
 LABEL org.opencontainers.image.source="https://github.com/outline/outline"
 

Dockerfile.base

@@ -1,5 +1,5 @@
 ARG APP_PATH=/opt/outline
-FROM node:24.14.1 AS deps
+FROM node:22.21.0 AS deps
 
 ARG APP_PATH
 WORKDIR $APP_PATH

LICENSE

@@ -3,7 +3,7 @@ Business Source License 1.1
 Parameters
 
 Licensor:             General Outline, Inc.
-Licensed Work:        Outline 1.6.1
+Licensed Work:        Outline 1.4.0
                       The Licensed Work is (c) 2026 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:          2030-03-18
+Change Date:          2030-01-27
 
 Change License:       Apache License, Version 2.0
 

README.md

@@ -33,9 +33,9 @@ There is a short guide for [setting up a development environment](https://docs.g
 
 ## Contributing
 
-Outline is built and maintained by a small team – your help finding and fixing bugs is appreciated, though AI assisted PR's from new contributors are discouraged and unlikely to be merged.
+Outline is built and maintained by a small team – we'd love your help to fix bugs and add features!
 
-Before submitting a pull request _you must_ discuss with the core team by creating or commenting in an issue on [GitHub](https://www.github.com/outline/outline/issues) – we'd also love to hear from you in the [discussions](https://www.github.com/outline/outline/discussions). This way we can ensure that an approach is agreed on before code is written and that you have read these instructions. This will result in a much higher likelihood of your code being accepted.
+Before submitting a pull request _please_ discuss with the core team by creating or commenting in an issue on [GitHub](https://www.github.com/outline/outline/issues) – we'd also love to hear from you in the [discussions](https://www.github.com/outline/outline/discussions). This way we can ensure that an approach is agreed on before code is written. This will result in a much higher likelihood of your code being accepted.
 
 If you’re looking for ways to get started, here's a list of ways to help us improve Outline:
 

app/actions/definitions/collections.tsx

@@ -29,8 +29,8 @@ import DynamicCollectionIcon from "~/components/Icons/CollectionIcon";
 import { getHeaderExpandedKey } from "~/components/Sidebar/components/Header";
 import {
   createAction,
-  createInternalLinkAction,
   createActionWithChildren,
+  createInternalLinkAction,
 } from "~/actions";
 import { ActiveCollectionSection, CollectionSection } from "~/actions/sections";
 import { setPersistedState } from "~/hooks/usePersistedState";
@@ -152,7 +152,7 @@ export const importDocument = createAction({
     getActivePolicies(Collection).some(
       (policy) => policy.abilities.createDocument
     ),
-  perform: ({ t, getActiveModel, stores }) => {
+  perform: ({ getActiveModel, stores }) => {
     const { documents } = stores;
     const collection = getActiveModel(Collection);
     if (!collection) {
@@ -165,7 +165,6 @@ export const importDocument = createAction({
     input.onchange = async (ev) => {
       const files = getEventFiles(ev);
       const file = files[0];
-      const toastId = toast.loading(`${t("Uploading")}…`);
 
       try {
         const document = await documents.import(file, null, collection.id, {
@@ -174,8 +173,6 @@ export const importDocument = createAction({
         history.push(document.path);
       } catch (err) {
         toast.error(err.message);
-      } finally {
-        toast.dismiss(toastId);
       }
     };
 
@@ -528,11 +525,17 @@ export const createTemplate = createInternalLinkAction({
   keywords: "new create template",
   visible: ({ getActivePolicies }) =>
     getActivePolicies(Collection).some(
-      (policy) => policy.abilities.createTemplate
+      (policy) => policy.abilities.createDocument
     ),
-  to: ({ getActiveModel }) => {
+  to: ({ getActiveModel, sidebarContext }) => {
     const collection = getActiveModel(Collection);
-    return newTemplatePath(collection?.id);
+    const [pathname, search] = newTemplatePath(collection?.id).split("?");
+
+    return {
+      pathname,
+      search,
+      state: { sidebarContext },
+    };
   },
 });
 

app/actions/definitions/documents.tsx

@@ -32,8 +32,6 @@ import {
   CaseSensitiveIcon,
   RestoreIcon,
   EditIcon,
-  EmbedIcon,
-  OpenIcon,
 } from "outline-icons";
 import { toast } from "sonner";
 import Icon from "@shared/components/Icon";
@@ -44,11 +42,12 @@ import { Week } from "@shared/utils/time";
 import type UserMembership from "~/models/UserMembership";
 import { client } from "~/utils/ApiClient";
 import DocumentDelete from "~/scenes/DocumentDelete";
+import DocumentMove from "~/scenes/DocumentMove";
 import DocumentPermanentDelete from "~/scenes/DocumentPermanentDelete";
 import DocumentPublish from "~/scenes/DocumentPublish";
 import DeleteDocumentsInTrash from "~/scenes/Trash/components/DeleteDocumentsInTrash";
 import ConfirmationDialog from "~/components/ConfirmationDialog";
-import DocumentCopy from "~/components/DocumentExplorer/DocumentCopy";
+import DocumentCopy from "~/components/DocumentCopy";
 import { DocumentDownload } from "~/components/DocumentDownload";
 import MarkdownIcon from "~/components/Icons/MarkdownIcon";
 import { getHeaderExpandedKey } from "~/components/Sidebar/components/Header";
@@ -71,27 +70,17 @@ import {
   homePath,
   newDocumentPath,
   newNestedDocumentPath,
-  newSiblingDocumentPath,
   searchPath,
   documentPath,
   urlify,
-  desktopify,
   trashPath,
   documentEditPath,
 } from "~/utils/routeHelpers";
 import capitalize from "lodash/capitalize";
 import CollectionIcon from "~/components/Icons/CollectionIcon";
-import type {
-  Action,
-  ActionContext,
-  ActionGroup,
-  ActionSeparator,
-} from "~/types";
+import type { Action, ActionGroup, ActionSeparator } from "~/types";
 import lazyWithRetry from "~/utils/lazyWithRetry";
 import env from "~/env";
-import { isMac, isWindows } from "@shared/utils/browser";
-import isCloudHosted from "~/utils/isCloudHosted";
-import DocumentMove from "~/components/DocumentExplorer/DocumentMove";
 
 const Insights = lazyWithRetry(
   () => import("~/scenes/Document/components/Insights")
@@ -143,13 +132,18 @@ export const editDocument = createInternalLinkAction({
   keywords: "edit",
   icon: <EditIcon />,
   visible: ({ activeDocumentId, stores }) => {
-    const { auth, policies } = stores;
+    const { auth, documents, policies } = stores;
 
+    const document = activeDocumentId
+      ? documents.get(activeDocumentId)
+      : undefined;
     const can = activeDocumentId
       ? policies.abilities(activeDocumentId)
       : undefined;
 
-    return !!can?.update && !!auth.user?.separateEditMode;
+    return (
+      !!can?.update && !!auth.user?.separateEditMode && !document?.template
+    );
   },
   to: ({ activeDocumentId, stores }) => {
     const document = activeDocumentId
@@ -206,41 +200,59 @@ export const createDraftDocument = createInternalLinkAction({
   }),
 });
 
-/**
- * Finds the index of a document among its siblings in the collection tree.
- *
- * @param stores - the root stores.
- * @param document - the document to find the index of.
- * @returns the index of the document among its siblings, or -1 if not found.
- */
-function findDocumentSiblingIndex(
-  stores: ActionContext["stores"],
-  document: {
-    id: string;
-    collectionId?: string | null;
-    parentDocumentId?: string;
-  }
-): number {
-  if (!document.collectionId) {
-    return -1;
-  }
-  const collection = stores.collections.get(document.collectionId);
-  if (!collection) {
-    return -1;
-  }
+export const createDocumentFromTemplate = createInternalLinkAction({
+  name: ({ t }) => t("New from template"),
+  analyticsName: "New document",
+  section: DocumentSection,
+  icon: <NewDocumentIcon />,
+  keywords: "create",
+  visible: ({
+    currentTeamId,
+    activeCollectionId,
+    activeDocumentId,
+    stores,
+  }) => {
+    const document = activeDocumentId
+      ? stores.documents.get(activeDocumentId)
+      : undefined;
 
-  const siblings = document.parentDocumentId
-    ? collection.getChildrenForDocument(document.parentDocumentId)
-    : collection.sortedDocuments;
+    if (
+      !currentTeamId ||
+      !document?.isTemplate ||
+      !!document?.isDraft ||
+      !!document?.isDeleted
+    ) {
+      return false;
+    }
 
-  return siblings?.findIndex((node) => node.id === document.id) ?? -1;
-}
+    if (activeCollectionId) {
+      return stores.policies.abilities(activeCollectionId).createDocument;
+    }
+    return stores.policies.abilities(currentTeamId).createDocument;
+  },
+  to: ({ activeDocumentId, activeCollectionId, sidebarContext }) => {
+    if (!activeDocumentId || !activeCollectionId) {
+      return "";
+    }
+
+    const [pathname, search] = newDocumentPath(activeCollectionId, {
+      templateId: activeDocumentId,
+    }).split("?");
+
+    return {
+      pathname,
+      search,
+      state: { sidebarContext },
+    };
+  },
+});
 
 export const createNestedDocument = createInternalLinkAction({
-  name: ({ t }) => t("Nested document"),
+  name: ({ t }) => t("New nested document"),
   analyticsName: "New document",
   section: ActiveDocumentSection,
-  keywords: "create nested",
+  icon: <NewDocumentIcon />,
+  keywords: "create",
   visible: ({ currentTeamId, activeDocumentId, stores }) =>
     !!currentTeamId &&
     !!activeDocumentId &&
@@ -258,100 +270,6 @@ export const createNestedDocument = createInternalLinkAction({
   },
 });
 
-const createDocumentBefore = createInternalLinkAction({
-  name: ({ t }) => t("Before"),
-  analyticsName: "New document before",
-  section: ActiveDocumentSection,
-  keywords: "create before",
-  visible: ({ currentTeamId, activeDocumentId, stores }) => {
-    if (!currentTeamId || !activeDocumentId) {
-      return false;
-    }
-    const document = stores.documents.get(activeDocumentId);
-    return (
-      !!document?.collectionId &&
-      stores.policies.abilities(currentTeamId).createDocument
-    );
-  },
-  to: ({ activeDocumentId, stores, sidebarContext }) => {
-    const document = activeDocumentId
-      ? stores.documents.get(activeDocumentId)
-      : undefined;
-    if (!document) {
-      return "";
-    }
-
-    const index = findDocumentSiblingIndex(stores, document);
-    const [pathname, search] = newSiblingDocumentPath({
-      collectionId: document.collectionId,
-      parentDocumentId: document.parentDocumentId,
-      index: Math.max(0, index),
-    }).split("?");
-
-    return {
-      pathname,
-      search,
-      state: { sidebarContext },
-    };
-  },
-});
-
-const createDocumentAfter = createInternalLinkAction({
-  name: ({ t }) => t("After"),
-  analyticsName: "New document after",
-  section: ActiveDocumentSection,
-  keywords: "create after",
-  visible: ({ currentTeamId, activeDocumentId, stores }) => {
-    if (!currentTeamId || !activeDocumentId) {
-      return false;
-    }
-    const document = stores.documents.get(activeDocumentId);
-    return (
-      !!document?.collectionId &&
-      stores.policies.abilities(currentTeamId).createDocument
-    );
-  },
-  to: ({ activeDocumentId, stores, sidebarContext }) => {
-    const document = activeDocumentId
-      ? stores.documents.get(activeDocumentId)
-      : undefined;
-    if (!document) {
-      return "";
-    }
-
-    const index = findDocumentSiblingIndex(stores, document);
-    const [pathname, search] = newSiblingDocumentPath({
-      collectionId: document.collectionId,
-      parentDocumentId: document.parentDocumentId,
-      index: index + 1,
-    }).split("?");
-
-    return {
-      pathname,
-      search,
-      state: { sidebarContext },
-    };
-  },
-});
-
-export const createNewDocument = createActionWithChildren({
-  name: ({ t }) => t("New document"),
-  analyticsName: "New document",
-  section: ActiveDocumentSection,
-  icon: <NewDocumentIcon />,
-  keywords: "create",
-  visible: ({ currentTeamId, activeDocumentId, stores }) => {
-    if (!activeDocumentId) {
-      return false;
-    }
-
-    return (
-      !!currentTeamId && stores.policies.abilities(currentTeamId).createDocument
-    );
-  },
-  children: [createDocumentBefore, createDocumentAfter, createNestedDocument],
-});
-
 export const starDocument = createAction({
   name: ({ t }) => t("Star"),
   analyticsName: "Star document",
@@ -428,7 +346,7 @@ export const publishDocument = createAction({
       return;
     }
 
-    if (document?.collectionId) {
+    if (document?.collectionId || document?.template) {
       await document.save(undefined, {
         publish: true,
       });
@@ -577,10 +495,7 @@ export const shareDocument = createAction({
   section: ActiveDocumentSection,
   icon: <PadlockIcon />,
   visible: ({ stores, activeDocumentId }) => {
-    if (!activeDocumentId) {
-      return false;
-    }
-    const can = stores.policies.abilities(activeDocumentId);
+    const can = stores.policies.abilities(activeDocumentId!);
     return can.manageUsers || can.share;
   },
   perform: async ({ activeDocumentId, stores, currentUserId, t }) => {
@@ -955,50 +870,7 @@ export const printDocument = createAction({
   icon: <PrintIcon />,
   visible: ({ activeDocumentId }) => !!(activeDocumentId && window.print),
   perform: () => {
-    setTimeout(window.print, 0);
-  },
-});
-
-export const openDocumentInDesktop = createAction({
-  name: ({ t }) => t("Open in desktop app"),
-  analyticsName: "Open in desktop",
-  section: ActiveDocumentSection,
-  icon: <OpenIcon />,
-  visible: ({ activeDocumentId, stores }) => {
-    if (!activeDocumentId) {
-      return false;
-    }
-    const document = stores.documents.get(activeDocumentId);
-    return (
-      isCloudHosted && (isMac || isWindows) && !!document && !document.isDeleted
-    );
-  },
-  perform: ({ activeDocumentId, stores }) => {
-    const document = activeDocumentId
-      ? stores.documents.get(activeDocumentId)
-      : undefined;
-    if (document) {
-      window.location.href = desktopify(documentPath(document));
-    }
-  },
-});
-
-export const presentDocument = createAction({
-  name: ({ t, isMenu }) => (isMenu ? t("Present") : t("Present document")),
-  analyticsName: "Present document",
-  section: ActiveDocumentSection,
-  icon: <EmbedIcon />,
-  shortcut: ["Meta+Alt+p"],
-  visible: ({ activeDocumentId }) => !!activeDocumentId,
-  perform: ({ activeDocumentId, stores }) => {
-    const document = activeDocumentId
-      ? stores.documents.get(activeDocumentId)
-      : undefined;
-    if (!document) {
-      return;
-    }
-
-    stores.ui.setPresentingDocument(document);
+    queueMicrotask(window.print);
   },
 });
 
@@ -1019,7 +891,7 @@ export const importDocument = createAction({
 
     return false;
   },
-  perform: ({ t, activeDocumentId, activeCollectionId, stores }) => {
+  perform: ({ activeDocumentId, activeCollectionId, stores }) => {
     const { documents } = stores;
     const input = document.createElement("input");
     input.type = "file";
@@ -1028,7 +900,6 @@ export const importDocument = createAction({
     input.onchange = async (ev) => {
       const files = getEventFiles(ev);
       const file = files[0];
-      const toastId = toast.loading(`${t("Uploading")}…`);
 
       try {
         const document = await documents.import(
@@ -1042,8 +913,6 @@ export const importDocument = createAction({
         history.push(document.url);
       } catch (err) {
         toast.error(err.message);
-      } finally {
-        toast.dismiss(toastId);
       }
     };
 
@@ -1061,12 +930,12 @@ export const createTemplateFromDocument = createAction({
     const document = activeDocumentId
       ? stores.documents.get(activeDocumentId)
       : undefined;
-    if (!document?.isActive) {
+    if (document?.isTemplate || !document?.isActive) {
       return false;
     }
     return !!(
       !!activeCollectionId &&
-      stores.policies.abilities(activeCollectionId).createTemplate
+      stores.policies.abilities(activeCollectionId).updateDocument
     );
   },
   perform: ({ activeDocumentId, stores, t, event }) => {
@@ -1113,8 +982,46 @@ export const searchDocumentsForQuery = (query: string) =>
     visible: ({ location }) => location.pathname !== searchPath(),
   });
 
+export const moveTemplateToWorkspace = createAction({
+  name: ({ t }) => t("Move to workspace"),
+  analyticsName: "Move template to workspace",
+  section: DocumentSection,
+  icon: <MoveIcon />,
+  iconInContextMenu: false,
+  visible: ({ activeDocumentId, stores }) => {
+    if (!activeDocumentId) {
+      return false;
+    }
+    const document = stores.documents.get(activeDocumentId);
+    if (!document || !document.template || document.isWorkspaceTemplate) {
+      return false;
+    }
+    return !!stores.policies.abilities(activeDocumentId).move;
+  },
+  perform: async ({ activeDocumentId, stores }) => {
+    if (activeDocumentId) {
+      const document = stores.documents.get(activeDocumentId);
+      if (!document) {
+        return;
+      }
+
+      await document.move({
+        collectionId: null,
+      });
+    }
+  },
+});
+
 export const moveDocumentToCollection = createAction({
-  name: ({ t }) => t("Move"),
+  name: ({ activeDocumentId, stores, t }) => {
+    if (!activeDocumentId) {
+      return t("Move");
+    }
+    const document = stores.documents.get(activeDocumentId);
+    return document?.template && document?.collectionId
+      ? t("Move to collection")
+      : t("Move");
+  },
   analyticsName: "Move document",
   section: ActiveDocumentSection,
   icon: <MoveIcon />,
@@ -1152,7 +1059,8 @@ export const moveDocument = createAction({
       return false;
     }
     const document = stores.documents.get(activeDocumentId);
-    if (!document) {
+    // Don't show the button if this is a non-workspace template.
+    if (!document || (document.template && !document.isWorkspaceTemplate)) {
       return false;
     }
     return !!stores.policies.abilities(activeDocumentId).move;
@@ -1160,6 +1068,25 @@ export const moveDocument = createAction({
   perform: moveDocumentToCollection.perform,
 });
 
+export const moveTemplate = createActionWithChildren({
+  name: ({ t }) => t("Move"),
+  analyticsName: "Move document",
+  section: ActiveDocumentSection,
+  icon: <MoveIcon />,
+  visible: ({ activeDocumentId, stores }) => {
+    if (!activeDocumentId) {
+      return false;
+    }
+    const document = stores.documents.get(activeDocumentId);
+    // Don't show the menu if this is not a template (or) a workspace template.
+    if (!document || !document.template || document.isWorkspaceTemplate) {
+      return false;
+    }
+    return !!stores.policies.abilities(activeDocumentId).move;
+  },
+  children: [moveTemplateToWorkspace, moveDocumentToCollection],
+});
+
 export const archiveDocument = createAction({
   name: ({ t }) => `${t("Archive")}…`,
   analyticsName: "Archive document",
@@ -1218,7 +1145,10 @@ export const restoreDocument = createAction({
       : undefined;
     const can = stores.policies.abilities(document.id);
 
-    return !!collection?.isActive && !!(can.restore || can.unarchive);
+    return (
+      !!(document.isWorkspaceTemplate || collection?.isActive) &&
+      !!(can.restore || can.unarchive)
+    );
   },
   perform: async ({ t, stores, activeDocumentId }) => {
     const document = activeDocumentId
@@ -1255,7 +1185,10 @@ export const restoreDocumentToCollection = createActionWithChildren({
       ? stores.collections.get(document.collectionId)
       : undefined;
 
-    return !collection?.isActive && !!(can.restore || can.unarchive);
+    return (
+      !(document.isWorkspaceTemplate || collection?.isActive) &&
+      !!(can.restore || can.unarchive)
+    );
   },
   children: ({ t, activeDocumentId, stores }) => {
     const { collections, documents, policies } = stores;
@@ -1397,7 +1330,7 @@ export const openDocumentComments = createAction({
       return;
     }
 
-    stores.ui.set({ rightSidebar: "comments" });
+    stores.ui.toggleComments();
   },
 });
 
@@ -1432,7 +1365,6 @@ export const openDocumentInsights = createAction({
   name: ({ t }) => t("Insights"),
   analyticsName: "Open document insights",
   section: ActiveDocumentSection,
-  shortcut: [`Meta+Shift+I`],
   icon: <GraphIcon />,
   visible: ({ activeDocumentId, stores }) => {
     const can = stores.policies.abilities(activeDocumentId ?? "");
@@ -1440,7 +1372,12 @@ export const openDocumentInsights = createAction({
       ? stores.documents.get(activeDocumentId)
       : undefined;
 
-    return !!activeDocumentId && can.listViews && !document?.isDeleted;
+    return (
+      !!activeDocumentId &&
+      can.listViews &&
+      !document?.isTemplate &&
+      !document?.isDeleted
+    );
   },
   perform: ({ activeDocumentId, stores, t }) => {
     const document = activeDocumentId
@@ -1519,7 +1456,6 @@ export const rootDocumentActions = [
   archiveDocument,
   createDocument,
   createDraftDocument,
-  createNewDocument,
   createNestedDocument,
   createTemplateFromDocument,
   deleteDocument,
@@ -1541,17 +1477,16 @@ export const rootDocumentActions = [
   searchInDocument,
   duplicateDocument,
   leaveDocument,
+  moveTemplateToWorkspace,
   moveDocumentToCollection,
   openRandomDocument,
   permanentlyDeleteDocument,
   permanentlyDeleteDocumentsInTrash,
-  presentDocument,
   printDocument,
   pinDocumentToCollection,
   pinDocumentToHome,
   openDocumentComments,
   openDocumentHistory,
   openDocumentInsights,
-  openDocumentInDesktop,
   shareDocument,
 ];

app/actions/definitions/templates.tsx

@@ -1,231 +0,0 @@
-import copy from "copy-to-clipboard";
-import {
-  CaseSensitiveIcon,
-  CollectionIcon,
-  CopyIcon,
-  MoveIcon,
-  NewDocumentIcon,
-  PlusIcon,
-  PrintIcon,
-  TrashIcon,
-} from "outline-icons";
-import { Trans } from "react-i18next";
-import { toast } from "sonner";
-import ConfirmationDialog from "~/components/ConfirmationDialog";
-import TemplateMove from "~/components/DocumentExplorer/TemplateMove";
-import {
-  createAction,
-  createActionWithChildren,
-  createInternalLinkAction,
-} from "~/actions";
-import history from "~/utils/history";
-import {
-  newDocumentPath,
-  newTemplatePath,
-  settingsPath,
-  urlify,
-} from "~/utils/routeHelpers";
-import { ActiveTemplateSection, TemplateSection } from "../sections";
-import Template from "~/models/Template";
-import { AvatarSize } from "~/components/Avatar";
-import TeamLogo from "~/components/TeamLogo";
-
-export const createTemplate = createInternalLinkAction({
-  name: ({ t }) => t("New template"),
-  analyticsName: "New template",
-  section: TemplateSection,
-  icon: <PlusIcon />,
-  keywords: "new create template",
-  visible: ({ currentTeamId, stores }) =>
-    !!stores.policies.abilities(currentTeamId!).createTemplate,
-  to: newTemplatePath(),
-});
-
-export const deleteTemplate = createAction({
-  name: ({ t }) => `${t("Delete")}…`,
-  analyticsName: "Delete template",
-  section: ActiveTemplateSection,
-  icon: <TrashIcon />,
-  dangerous: true,
-  visible: ({ getActivePolicies }) =>
-    getActivePolicies(Template).some((policy) => policy.abilities.delete),
-  perform: ({ getActiveModel, stores, t }) => {
-    const template = getActiveModel(Template);
-    if (!template) {
-      return;
-    }
-
-    stores.dialogs.openModal({
-      title: t("Delete {{ documentName }}", {
-        documentName: t("template"),
-      }),
-      content: (
-        <ConfirmationDialog
-          onSubmit={async () => {
-            await template.delete();
-            history.push(settingsPath("templates"));
-            toast.success(t("Template deleted"));
-          }}
-          savingText={`${t("Deleting")}…`}
-          danger
-        >
-          <Trans
-            defaults="Are you sure about that? Deleting the <em>{{ templateName }}</em> template is permanent."
-            values={{
-              templateName: template.titleWithDefault,
-            }}
-            components={{
-              em: <strong />,
-            }}
-          />
-        </ConfirmationDialog>
-      ),
-    });
-  },
-});
-
-export const moveTemplateToWorkspace = createAction({
-  name: ({ t }) => t("Move to workspace"),
-  analyticsName: "Move template to workspace",
-  section: ActiveTemplateSection,
-  icon: ({ stores }) => {
-    const { team } = stores.auth;
-    return <TeamLogo model={team} size={AvatarSize.Small} />;
-  },
-  visible: ({ getActiveModel }) => {
-    const template = getActiveModel(Template);
-    return !!template?.collectionId;
-  },
-  perform: async ({ getActiveModel, stores, t }) => {
-    const template = getActiveModel(Template);
-    if (!template) {
-      return;
-    }
-
-    try {
-      await template.save({ collectionId: null });
-      toast.success(t("Template moved"));
-      stores.dialogs.closeAllModals();
-    } catch (_err) {
-      toast.error(t("Couldn't move the template, try again?"));
-    }
-  },
-});
-
-export const moveTemplateToCollection = createAction({
-  name: ({ t }) => t("Move to collection"),
-  analyticsName: "Move template to collection",
-  section: ActiveTemplateSection,
-  icon: <CollectionIcon />,
-  perform: ({ getActiveModel, stores, t }) => {
-    const template = getActiveModel(Template);
-    if (!template) {
-      return;
-    }
-
-    stores.dialogs.openModal({
-      title: t("Move template"),
-      content: <TemplateMove template={template} />,
-    });
-  },
-});
-
-export const moveTemplate = createActionWithChildren({
-  name: ({ t }) => t("Move"),
-  analyticsName: "Move template",
-  section: ActiveTemplateSection,
-  icon: <MoveIcon />,
-  visible: ({ getActivePolicies }) =>
-    getActivePolicies(Template).some((policy) => policy.abilities.move),
-  children: [moveTemplateToWorkspace, moveTemplateToCollection],
-});
-
-export const createDocumentFromTemplate = createInternalLinkAction({
-  name: ({ t }) => t("New document"),
-  analyticsName: "New document from template",
-  section: ActiveTemplateSection,
-  icon: <NewDocumentIcon />,
-  keywords: "create",
-  visible: ({ currentTeamId, getActiveModel, stores }) => {
-    const template = getActiveModel(Template);
-    if (!template || !currentTeamId) {
-      return false;
-    }
-
-    if (template.collectionId) {
-      return !!stores.policies.abilities(template.collectionId).createDocument;
-    }
-    return !!stores.policies.abilities(currentTeamId).createDocument;
-  },
-  to: ({ getActiveModel, activeCollectionId, sidebarContext }) => {
-    const template = getActiveModel(Template);
-    if (!template) {
-      return "";
-    }
-    const collectionId = template?.collectionId ?? activeCollectionId;
-
-    const [pathname, search] = newDocumentPath(collectionId, {
-      templateId: template.id,
-    }).split("?");
-
-    return {
-      pathname,
-      search,
-      state: { sidebarContext },
-    };
-  },
-});
-
-export const copyTemplateLink = createAction({
-  name: ({ t }) => t("Copy link"),
-  analyticsName: "Copy template link",
-  section: ActiveTemplateSection,
-  icon: <CopyIcon />,
-  iconInContextMenu: false,
-  perform: ({ getActiveModel, t }) => {
-    const template = getActiveModel(Template);
-    if (template) {
-      copy(urlify(template.path));
-      toast.success(t("Link copied to clipboard"));
-    }
-  },
-});
-
-export const copyTemplateAsPlainText = createAction({
-  name: ({ t }) => t("Copy as text"),
-  analyticsName: "Copy template as text",
-  section: ActiveTemplateSection,
-  icon: <CaseSensitiveIcon />,
-  iconInContextMenu: false,
-  perform: async ({ getActiveModel, t }) => {
-    const template = getActiveModel(Template);
-    if (template) {
-      const { ProsemirrorHelper } =
-        await import("~/models/helpers/ProsemirrorHelper");
-      copy(ProsemirrorHelper.toPlainText(template));
-      toast.success(t("Text copied to clipboard"));
-    }
-  },
-});
-
-export const copyTemplate = createActionWithChildren({
-  name: ({ t }) => t("Copy"),
-  analyticsName: "Copy template",
-  section: ActiveTemplateSection,
-  icon: <CopyIcon />,
-  keywords: "clipboard",
-  children: [copyTemplateLink, copyTemplateAsPlainText],
-});
-
-export const printTemplate = createAction({
-  name: ({ t, isMenu }) => (isMenu ? t("Print") : t("Print template")),
-  analyticsName: "Print template",
-  section: ActiveTemplateSection,
-  icon: <PrintIcon />,
-  visible: ({ getActiveModel }) => !!getActiveModel(Template) && !!window.print,
-  perform: () => {
-    setTimeout(window.print, 0);
-  },
-});
-
-export const rootTemplateActions = [moveTemplate, createDocumentFromTemplate];

app/actions/index.ts

@@ -210,7 +210,6 @@ export function actionToKBar(
   const name = resolve<string>(action.name, context);
   const icon = resolve<React.ReactElement>(action.icon, context);
   const section = resolve<string>(action.section, context);
-  const subtitle = resolve<string>(action.description, context);
 
   const sectionPriority =
     typeof action.section !== "string" && "priority" in action.section
@@ -230,7 +229,6 @@ export function actionToKBar(
           section,
           keywords: action.keywords,
           shortcut: action.shortcut,
-          subtitle,
           icon,
           priority,
           perform: () => performAction(action, context),
@@ -256,7 +254,6 @@ export function actionToKBar(
           keywords: action.keywords,
           shortcut: action.shortcut,
           icon,
-          subtitle,
           priority,
         },
         ...children.map((child) => ({

app/actions/sections.ts

@@ -15,9 +15,6 @@ export const DeveloperSection = ({ t }: ActionContext) => t("Debug");
 
 export const DocumentSection = ({ t }: ActionContext) => t("Document");
 
-export const SearchResultsSection = ({ t }: ActionContext) =>
-  t("Search results");
-
 export const DocumentsSection = ({ t }: ActionContext) => t("Documents");
 
 export const ActiveDocumentSection = ({ t, stores }: ActionContext) => {
@@ -27,15 +24,6 @@ export const ActiveDocumentSection = ({ t, stores }: ActionContext) => {
 
 ActiveDocumentSection.priority = 0.9;
 
-export const TemplateSection = ({ t }: ActionContext) => t("Template");
-
-export const ActiveTemplateSection = ({ t, stores }: ActionContext) => {
-  const activeTemplate = stores.templates.active;
-  return `${t("Template")} · ${activeTemplate?.titleWithDefault}`;
-};
-
-ActiveTemplateSection.priority = 0.9;
-
 export const RecentSection = ({ t }: ActionContext) => t("Recently viewed");
 
 RecentSection.priority = 1;
@@ -61,7 +49,7 @@ export const ShareSection = ({ t }: ActionContext) => t("Share");
 export const TeamSection = ({ t }: ActionContext) => t("Workspace");
 
 export const RecentSearchesSection = ({ t }: ActionContext) =>
-  t("Recently viewed");
+  t("Recent searches");
 
 RecentSearchesSection.priority = -0.1;
 

app/components/Arrow.tsx

@@ -0,0 +1,14 @@
+export default function Arrow() {
+  return (
+    <svg
+      width="13"
+      height="30"
+      viewBox="0 0 13 30"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M7.40242 1.48635C8.23085 0.0650039 10.0656 -0.421985 11.5005 0.39863C12.9354 1.21924 13.427 3.03671 12.5986 4.45806L5.59858 16.4681C4.77015 17.8894 2.93538 18.3764 1.5005 17.5558C0.065623 16.7352 -0.426002 14.9177 0.402425 13.4964L7.40242 1.48635Z" />
+      <path d="M12.5986 25.5419C13.427 26.9633 12.9354 28.7808 11.5005 29.6014C10.0656 30.422 8.23087 29.935 7.40244 28.5136L0.402438 16.5036C-0.425989 15.0823 0.0656365 13.2648 1.50051 12.4442C2.93539 11.6236 4.77016 12.1106 5.59859 13.5319L12.5986 25.5419Z" />
+    </svg>
+  );
+}

app/components/AuthenticatedLayout.tsx

@@ -1,10 +1,17 @@
+import { AnimatePresence } from "framer-motion";
 import { observer } from "mobx-react";
 import * as React from "react";
-import { Switch, Route } from "react-router-dom";
+import {
+  Switch,
+  Route,
+  useLocation,
+  matchPath,
+  Redirect,
+} from "react-router-dom";
+import { TeamPreference } from "@shared/types";
 import ErrorSuspended from "~/scenes/Errors/ErrorSuspended";
 import Layout from "~/components/Layout";
 import RegisterKeyDown from "~/components/RegisterKeyDown";
-import { RightSidebarProvider } from "~/components/RightSidebarContext";
 import Sidebar from "~/components/Sidebar";
 import useCurrentTeam from "~/hooks/useCurrentTeam";
 import { usePostLoginPath } from "~/hooks/useLastVisitedPath";
@@ -16,6 +23,8 @@ import {
   searchPath,
   newDocumentPath,
   settingsPath,
+  matchDocumentHistory,
+  matchDocumentSlug as slug,
 } from "~/utils/routeHelpers";
 import { DocumentContextProvider } from "./DocumentContext";
 import Fade from "./Fade";
@@ -23,6 +32,12 @@ import NotificationBadge from "./NotificationBadge";
 import { PortalContext } from "./Portal";
 import CommandBar from "./CommandBar";
 
+const DocumentComments = lazyWithRetry(
+  () => import("~/scenes/Document/components/Comments/Comments")
+);
+const DocumentHistory = lazyWithRetry(
+  () => import("~/scenes/Document/components/History")
+);
 const SettingsSidebar = lazyWithRetry(
   () => import("~/components/Sidebar/Settings")
 );
@@ -33,7 +48,9 @@ type Props = {
 
 const AuthenticatedLayout: React.FC = ({ children }: Props) => {
   const { ui, auth } = useStores();
+  const location = useLocation();
   const layoutRef = React.useRef<HTMLDivElement>(null);
+  const can = usePolicy(ui.activeDocumentId);
   const canCollection = usePolicy(ui.activeCollectionId);
   const team = useCurrentTeam();
   const [spendPostLoginPath] = usePostLoginPath();
@@ -57,17 +74,15 @@ const AuthenticatedLayout: React.FC = ({ children }: Props) => {
     history.push(newDocumentPath(activeCollectionId));
   };
 
-  React.useEffect(() => {
-    const postLoginPath = spendPostLoginPath();
-    if (postLoginPath) {
-      history.replace(postLoginPath);
-    }
-  }, [spendPostLoginPath]);
-
   if (auth.isSuspended) {
     return <ErrorSuspended />;
   }
 
+  const postLoginPath = spendPostLoginPath();
+  if (postLoginPath) {
+    return <Redirect to={postLoginPath} />;
+  }
+
   const sidebar = (
     <Fade>
       <Switch>
@@ -77,20 +92,50 @@ const AuthenticatedLayout: React.FC = ({ children }: Props) => {
     </Fade>
   );
 
+  const showHistory =
+    !!matchPath(location.pathname, {
+      path: matchDocumentHistory,
+    }) && can.listRevisions;
+  const showComments =
+    !showHistory &&
+    can.comment &&
+    ui.activeDocumentId &&
+    ui.commentsExpanded &&
+    !!team.getPreference(TeamPreference.Commenting);
+
+  const sidebarRight = (
+    <AnimatePresence
+      initial={false}
+      key={ui.activeDocumentId ? "active" : "inactive"}
+    >
+      {(showHistory || showComments) && (
+        <Route path={`/doc/${slug}`}>
+          <React.Suspense fallback={null}>
+            {showHistory && <DocumentHistory />}
+            {showComments && <DocumentComments />}
+          </React.Suspense>
+        </Route>
+      )}
+    </AnimatePresence>
+  );
+
   return (
     <DocumentContextProvider>
-      <RightSidebarProvider>
-        <PortalContext.Provider value={layoutRef.current}>
-          <Layout title={team.name} sidebar={sidebar} ref={layoutRef}>
-            <RegisterKeyDown trigger="n" handler={goToNewDocument} />
-            <RegisterKeyDown trigger="t" handler={goToSearch} />
-            <RegisterKeyDown trigger="/" handler={goToSearch} />
-            {children}
-            <CommandBar />
-            <NotificationBadge />
-          </Layout>
-        </PortalContext.Provider>
-      </RightSidebarProvider>
+      <PortalContext.Provider value={layoutRef.current}>
+        <Layout
+          title={team.name}
+          sidebar={sidebar}
+          sidebarRight={sidebarRight}
+          ref={layoutRef}
+        >
+          <RegisterKeyDown trigger="n" handler={goToNewDocument} />
+          <RegisterKeyDown trigger="t" handler={goToSearch} />
+          <RegisterKeyDown trigger="/" handler={goToSearch} />
+          {children}
+          <CommandBar />
+          <NotificationBadge />
+        </Layout>
+      </PortalContext.Provider>
     </DocumentContextProvider>
   );
 };

app/components/Avatar/Avatar.tsx

@@ -1,4 +1,3 @@
-import { observer } from "mobx-react";
 import * as React from "react";
 import styled from "styled-components";
 import useBoolean from "~/hooks/useBoolean";
@@ -110,4 +109,4 @@ const Image = styled.img<{ size: number }>`
   height: ${(props) => props.size}px;
 `;
 
-export default observer(Avatar);
+export default Avatar;

app/components/Breadcrumb.tsx

@@ -1,5 +1,4 @@
 import { GoToIcon } from "outline-icons";
-import { observer } from "mobx-react";
 import * as React from "react";
 import { Link } from "react-router-dom";
 import styled from "styled-components";
@@ -55,15 +54,6 @@ function Breadcrumb(
     });
   }
 
-  const handleClick = React.useCallback(
-    (event: React.MouseEvent<HTMLAnchorElement>) => {
-      if (event.currentTarget.querySelector('[data-state="open"]')) {
-        event.preventDefault();
-      }
-    },
-    []
-  );
-
   const toBreadcrumb = React.useCallback(
     (action: TopLevelAction, index: number) => {
       if (action.type === "menu") {
@@ -77,7 +67,6 @@ function Breadcrumb(
           {item.icon}
           <Item
             to={item.to}
-            onClick={handleClick}
             $withIcon={!!item.icon}
             $highlight={!!highlightFirstItem && index === 0}
           >
@@ -86,7 +75,7 @@ function Breadcrumb(
         </>
       );
     },
-    [actionContext, handleClick, highlightFirstItem]
+    [actionContext, highlightFirstItem]
   );
 
   return (
@@ -132,4 +121,4 @@ const Item = styled(Link)<{ $highlight: boolean; $withIcon: boolean }>`
   }
 `;
 
-export default observer(React.forwardRef<HTMLDivElement, Props>(Breadcrumb));
+export default React.forwardRef<HTMLDivElement, Props>(Breadcrumb);

app/components/Button.tsx

@@ -3,8 +3,6 @@ import { DisclosureIcon } from "outline-icons";
 import { darken, lighten, transparentize } from "polished";
 import * as React from "react";
 import styled from "styled-components";
-import type { HapticInput } from "web-haptics";
-import { useWebHaptics } from "web-haptics/react";
 import { s } from "@shared/styles";
 import type { Props as ActionButtonProps } from "~/components/ActionButton";
 import ActionButton from "~/components/ActionButton";
@@ -154,8 +152,6 @@ export type Props<T> = ActionButtonProps & {
   fullwidth?: boolean;
   as?: T;
   to?: LocationDescriptor;
-  /** Haptic feedback to trigger on click. Pass a preset name or custom pattern. */
-  haptic?: HapticInput;
   borderOnHover?: boolean;
   hideIcon?: boolean;
   href?: string;
@@ -180,13 +176,11 @@ const Button = <T extends React.ElementType = "button">(
     hideIcon,
     fullwidth,
     danger,
-    haptic,
     ...rest
   } = props;
   const hasText = !!children || value !== undefined;
   const ic = hideIcon ? undefined : (action?.icon ?? icon);
   const hasIcon = ic !== undefined;
-  const { trigger } = useWebHaptics();
 
   return (
     <RealButton
@@ -197,7 +191,6 @@ const Button = <T extends React.ElementType = "button">(
       $danger={danger}
       $fullwidth={fullwidth}
       $borderOnHover={borderOnHover}
-      onClickCapture={haptic ? () => void trigger(haptic) : undefined}
       {...rest}
     >
       <Inner hasIcon={hasIcon} hasText={hasText} disclosure={disclosure}>

app/components/CenteredContent.tsx

@@ -23,9 +23,12 @@ const Container = styled.div<Props>`
 type ContentProps = { $maxWidth?: string };
 
 const Content = styled.div<ContentProps>`
-  max-width: ${(props: ContentProps) =>
-    props.$maxWidth ?? EditorStyleHelper.documentWidth};
+  max-width: ${(props) => props.$maxWidth ?? "46em"};
   margin: 0 auto;
+
+  ${breakpoint("desktopLarge")`
+    max-width: ${(props: ContentProps) => props.$maxWidth ?? EditorStyleHelper.documentWidth};
+  `};
 `;
 
 const CenteredContent: React.FC<Props> = ({

app/components/Collaborators.tsx

@@ -125,8 +125,8 @@ function Collaborators(props: Props) {
 
       return (
         <AvatarWithPresence
-          key={collaborator.id}
           {...rest}
+          key={collaborator.id}
           user={collaborator}
           isPresent={isPresent}
           isEditing={isEditing}

app/components/Collapsible.tsx

@@ -1,112 +0,0 @@
-import * as RadixCollapsible from "@radix-ui/react-collapsible";
-import { ExpandedIcon } from "outline-icons";
-import * as React from "react";
-import styled from "styled-components";
-import { s } from "@shared/styles";
-
-interface CollapsibleProps {
-  /** The label displayed on the trigger button. */
-  label: React.ReactNode;
-  /** The content to show/hide inside the collapsible panel. */
-  children: React.ReactNode;
-  /** Whether the collapsible is open by default. */
-  defaultOpen?: boolean;
-  /** Controlled open state. */
-  open?: boolean;
-  /** Callback fired when the open state changes. */
-  onOpenChange?: (open: boolean) => void;
-  /** Additional class name for the root element. */
-  className?: string;
-}
-
-/**
- * An accessible collapsible section built on Radix UI Collapsible.
- * Renders a trigger button with a disclosure chevron and animated content panel.
- *
- * @param props - component props.
- * @returns the collapsible component.
- */
-export function Collapsible({
-  label,
-  children,
-  defaultOpen = false,
-  open,
-  onOpenChange,
-  className,
-}: CollapsibleProps) {
-  return (
-    <RadixCollapsible.Root
-      defaultOpen={defaultOpen}
-      open={open}
-      onOpenChange={onOpenChange}
-      className={className}
-    >
-      <StyledTrigger>
-        <StyledExpandedIcon aria-hidden="true" />
-        {label}
-      </StyledTrigger>
-      <StyledContent>{children}</StyledContent>
-    </RadixCollapsible.Root>
-  );
-}
-
-const StyledExpandedIcon = styled(ExpandedIcon)`
-  flex-shrink: 0;
-  transition: transform 150ms ease-out;
-  margin-left: -4px;
-`;
-
-const StyledTrigger = styled(RadixCollapsible.Trigger)`
-  display: flex;
-  align-items: center;
-  background: none;
-  border: none;
-  padding: 0 0 8px 0;
-  cursor: var(--pointer);
-  color: ${s("textTertiary")};
-  font-size: 14pxte
-
-  &:hover {
-    color: ${s("textSecondary")};
-  }
-
-  &[data-state="closed"] {
-    ${StyledExpandedIcon} {
-      transform: rotate(-90deg);
-    }
-  }
-`;
-
-const StyledContent = styled(RadixCollapsible.Content)`
-  overflow: hidden;
-
-  &[data-state="open"] {
-    animation: slideDown 200ms ease-out;
-  }
-
-  &[data-state="closed"] {
-    animation: slideUp 200ms ease-out;
-  }
-
-  @keyframes slideDown {
-    from {
-      height: 0;
-      opacity: 0;
-    }
-    to {
-      height: var(--radix-collapsible-content-height);
-      opacity: 1;
-    }
-  }
-
-  @keyframes slideUp {
-    from {
-      height: var(--radix-collapsible-content-height);
-      opacity: 1;
-    }
-    to {
-      height: 0;
-      opacity: 0;
-    }
-  }
-`;

app/components/Collection/CollectionForm.tsx

@@ -6,16 +6,14 @@ import { Trans, useTranslation } from "react-i18next";
 import styled from "styled-components";
 import Icon from "@shared/components/Icon";
 import { randomElement } from "@shared/random";
-import { CollectionPermission, TeamPreference } from "@shared/types";
-import type { Option } from "~/components/InputSelect";
+import type { CollectionPermission } from "@shared/types";
+import { TeamPreference } from "@shared/types";
 import { IconLibrary } from "@shared/utils/IconLibrary";
 import { colorPalette } from "@shared/utils/collections";
 import { CollectionValidation } from "@shared/validations";
 import type Collection from "~/models/Collection";
 import Button from "~/components/Button";
-import { Collapsible } from "~/components/Collapsible";
 import Input from "~/components/Input";
-import { InputSelect } from "~/components/InputSelect";
 import { InputSelectPermission } from "~/components/InputSelectPermission";
 import { createLazyComponent } from "~/components/LazyLoad";
 import Switch from "~/components/Switch";
@@ -35,7 +33,6 @@ export interface FormData {
   sharing: boolean;
   permission: CollectionPermission | undefined;
   commenting?: boolean | null;
-  templateManagement: CollectionPermission;
 }
 
 const useIconColor = (collection?: Collection) => {
@@ -70,22 +67,6 @@ export const CollectionForm = observer(function CollectionForm_({
 
   const [hasOpenedIconPicker, setHasOpenedIconPicker] = useBoolean(false);
 
-  const templateManagementOptions = useMemo<Option[]>(
-    () => [
-      {
-        type: "item",
-        label: t("Managers"),
-        value: CollectionPermission.Admin,
-      },
-      {
-        type: "item",
-        label: t("Members"),
-        value: CollectionPermission.ReadWrite,
-      },
-    ],
-    [t]
-  );
-
   const iconColor = useIconColor(collection);
   const fallbackIcon = (
     <Icon
@@ -111,8 +92,6 @@ export const CollectionForm = observer(function CollectionForm_({
       sharing: collection?.sharing ?? true,
       permission: collection?.permission,
       commenting: collection?.commenting ?? true,
-      templateManagement:
-        collection?.templateManagement ?? CollectionPermission.Admin,
       color: iconColor,
     },
   });
@@ -155,71 +134,6 @@ export const CollectionForm = observer(function CollectionForm_({
 
   const initial = values.name.charAt(0).toUpperCase();
 
-  const options = (
-    <>
-      <Controller
-        control={control}
-        name="templateManagement"
-        render={({ field }) => (
-          <>
-            <InputSelect
-              value={field.value}
-              onChange={(value: string) => {
-                field.onChange(value as CollectionPermission);
-              }}
-              options={templateManagementOptions}
-              label={t("Manage templates")}
-            />
-            <Text
-              type="secondary"
-              size="small"
-              as="p"
-              style={{ paddingTop: 4 }}
-            >
-              {t(
-                "Choose who can create and edit templates in this collection."
-              )}
-            </Text>
-          </>
-        )}
-      />
-
-      {team.sharing && (
-        <Controller
-          control={control}
-          name="sharing"
-          render={({ field }) => (
-            <Switch
-              id="sharing"
-              label={t("Public document sharing")}
-              note={t(
-                "Allow documents within this collection to be shared publicly on the internet."
-              )}
-              checked={field.value}
-              onChange={field.onChange}
-            />
-          )}
-        />
-      )}
-
-      {team.getPreference(TeamPreference.Commenting) && (
-        <Controller
-          control={control}
-          name="commenting"
-          render={({ field }) => (
-            <Switch
-              id="commenting"
-              label={t("Commenting")}
-              note={t("Allow commenting on documents within this collection.")}
-              checked={!!field.value}
-              onChange={field.onChange}
-            />
-          )}
-        />
-      )}
-    </>
-  );
-
   return (
     <form onSubmit={formHandleSubmit(handleSubmit)}>
       <Text as="p">
@@ -230,7 +144,7 @@ export const CollectionForm = observer(function CollectionForm_({
       <HStack>
         <Input
           type="text"
-          label={t("Name")}
+          placeholder={t("Name")}
           {...register("name", {
             required: true,
             maxLength: CollectionValidation.maxNameLength,
@@ -275,10 +189,38 @@ export const CollectionForm = observer(function CollectionForm_({
         />
       )}
 
-      {collection ? (
-        options
-      ) : (
-        <Collapsible label={t("Advanced options")}>{options}</Collapsible>
+      {team.sharing && (
+        <Controller
+          control={control}
+          name="sharing"
+          render={({ field }) => (
+            <Switch
+              id="sharing"
+              label={t("Public document sharing")}
+              note={t(
+                "Allow documents within this collection to be shared publicly on the internet."
+              )}
+              checked={field.value}
+              onChange={field.onChange}
+            />
+          )}
+        />
+      )}
+
+      {team.getPreference(TeamPreference.Commenting) && (
+        <Controller
+          control={control}
+          name="commenting"
+          render={({ field }) => (
+            <Switch
+              id="commenting"
+              label={t("Commenting")}
+              note={t("Allow commenting on documents within this collection.")}
+              checked={!!field.value}
+              onChange={field.onChange}
+            />
+          )}
+        />
       )}
 
       <HStack justify="flex-end">

app/components/CommandBar/CommandBarItem.tsx

@@ -4,7 +4,6 @@ import * as React from "react";
 import styled, { css, useTheme } from "styled-components";
 import { s, ellipsis } from "@shared/styles";
 import { normalizeKeyDisplay } from "@shared/utils/keyboard";
-import Highlight from "~/components/Highlight";
 import Flex from "~/components/Flex";
 import Key from "~/components/Key";
 import Text from "~/components/Text";
@@ -16,14 +15,6 @@ type Props = {
   currentRootActionId: string | null | undefined;
 };
 
-const SEARCH_RESULT_REGEX = /<b\b[^>]*>(.*?)<\/b>/gi;
-
-function replaceResultMarks(tag: string) {
-  // don't use SEARCH_RESULT_REGEX here as it causes
-  // an infinite loop to trigger a regex inside it's own callback
-  return tag.replace(/<b\b[^>]*>(.*?)<\/b>/gi, "$1");
-}
-
 function CommandBarItem(
   { action, active, currentRootActionId }: Props,
   ref: React.RefObject<HTMLDivElement>
@@ -65,16 +56,6 @@ function CommandBarItem(
         ))}
         {action.name}
         {action.children?.length ? "…" : ""}
-        {action.subtitle && (
-          <Text type="secondary" ellipsis>
-            &nbsp;&nbsp;
-            <Highlight
-              text={action.subtitle}
-              highlight={SEARCH_RESULT_REGEX}
-              processResult={replaceResultMarks}
-            />
-          </Text>
-        )}
       </Content>
       {action.shortcut?.length ? (
         <Shortcut>

app/components/CommandBar/SharedCommandBar.tsx

@@ -1,94 +0,0 @@
-import { useKBar, KBarPositioner, KBarAnimator, KBarSearch } from "kbar";
-import { observer } from "mobx-react";
-import * as React from "react";
-import { useTranslation } from "react-i18next";
-import { Portal } from "react-portal";
-import styled from "styled-components";
-import breakpoint from "styled-components-breakpoint";
-import { depths, s } from "@shared/styles";
-import CommandBarResults from "./CommandBarResults";
-import SharedSearchActions from "./SharedSearchActions";
-
-/**
- * A simplified command bar for public shares that only provides search.
- */
-function SharedCommandBar() {
-  const { t } = useTranslation();
-
-  return (
-    <>
-      <SharedSearchActions />
-      <KBarPortal>
-        <Positioner>
-          <Animator>
-            <SearchInput defaultPlaceholder={`${t("Search")}…`} />
-            <CommandBarResults />
-          </Animator>
-        </Positioner>
-      </KBarPortal>
-    </>
-  );
-}
-
-type Props = {
-  children?: React.ReactNode;
-};
-
-const KBarPortal: React.FC = ({ children }: Props) => {
-  const { showing } = useKBar((state) => ({
-    showing: state.visualState !== "hidden",
-  }));
-
-  if (!showing) {
-    return null;
-  }
-
-  return <Portal>{children}</Portal>;
-};
-
-const Positioner = styled(KBarPositioner)`
-  z-index: ${depths.commandBar};
-`;
-
-const SearchInput = styled(KBarSearch)`
-  position: relative;
-  padding: 16px 12px;
-  margin: 0 8px;
-  width: calc(100% - 16px);
-  outline: none;
-  border: none;
-  background: ${s("menuBackground")};
-  color: ${s("text")};
-
-  &:not(:last-child) {
-    border-bottom: 1px solid ${s("inputBorder")};
-  }
-
-  &:disabled,
-  &::placeholder {
-    color: ${s("placeholder")};
-    opacity: 1;
-  }
-`;
-
-const Animator = styled(KBarAnimator)`
-  max-width: 600px;
-  max-height: 75vh;
-  width: 90vw;
-  background: ${s("menuBackground")};
-  color: ${s("text")};
-  border-radius: 8px;
-  overflow: hidden;
-  box-shadow: rgb(0 0 0 / 40%) 0px 16px 60px;
-  transition: max-width 0.2s ease-in-out;
-
-  ${breakpoint("desktopLarge")`
-    max-width: 740px;
-  `};
-
-  @media print {
-    display: none;
-  }
-`;
-
-export default observer(SharedCommandBar);

app/components/CommandBar/SharedSearchActions.tsx

@@ -1,187 +0,0 @@
-import { useKBar } from "kbar";
-import escapeRegExp from "lodash/escapeRegExp";
-import { observer } from "mobx-react";
-import { DocumentIcon } from "outline-icons";
-import * as React from "react";
-import Icon from "@shared/components/Icon";
-import useShare from "@shared/hooks/useShare";
-import { Minute } from "@shared/utils/time";
-import { createAction } from "~/actions";
-import {
-  RecentSearchesSection,
-  SearchResultsSection,
-} from "~/actions/sections";
-import useCommandBarActions from "~/hooks/useCommandBarActions";
-import useStores from "~/hooks/useStores";
-import type Document from "~/models/Document";
-import history from "~/utils/history";
-import { sharedModelPath } from "~/utils/routeHelpers";
-import type { SearchResult } from "~/types";
-
-interface CacheEntry {
-  timestamp: number;
-  results: SearchResult[];
-}
-
-const cacheTTL = Minute.ms * 5;
-const maxRecentDocs = 5;
-
-/**
- * Strip server-generated `<b>` highlight tags from context and re-apply them
- * using the current search query. This prevents stale highlights when the
- * displayed results are from a previous (in-flight) query.
- *
- * @param context the server-generated context string with `<b>` tags.
- * @param query the current search query to highlight.
- * @returns the context string with highlights matching the current query.
- */
-function rehighlightContext(
-  context: string | undefined,
-  query: string
-): string | undefined {
-  if (!context) {
-    return context;
-  }
-
-  const plain = context.replace(/<b\b[^>]*>(.*?)<\/b>/gi, "$1");
-  const trimmed = query.trim();
-
-  if (!trimmed) {
-    return plain;
-  }
-
-  const terms = trimmed.split(/\s+/).filter(Boolean);
-  const patterns = [escapeRegExp(trimmed)];
-
-  if (terms.length > 1) {
-    patterns.push(...terms.map((t) => `\\b${escapeRegExp(t)}\\b`));
-  }
-
-  const regex = new RegExp(patterns.join("|"), "gi");
-  return plain.replace(regex, "<b>$&</b>");
-}
-
-/**
- * Registers search result actions in the command bar scoped to a public share.
- */
-function SharedSearchActions() {
-  const { documents } = useStores();
-  const { shareId } = useShare();
-  const searchCache = React.useRef<Map<string, CacheEntry>>(new Map());
-  const [results, setResults] = React.useState<SearchResult[]>([]);
-  const recentDocsRef = React.useRef<Document[]>([]);
-  const [recentDocs, setRecentDocs] = React.useState<Document[]>([]);
-
-  const { searchQuery } = useKBar((state) => ({
-    searchQuery: state.searchQuery,
-  }));
-
-  const searchQueryRef = React.useRef(searchQuery);
-  searchQueryRef.current = searchQuery;
-
-  React.useEffect(() => {
-    if (!searchQuery || !shareId) {
-      setResults([]);
-      return;
-    }
-
-    const now = Date.now();
-    const cachedEntry = searchCache.current.get(searchQuery);
-    const isExpired = cachedEntry
-      ? now - cachedEntry.timestamp > cacheTTL
-      : true;
-
-    if (cachedEntry && !isExpired) {
-      setResults(cachedEntry.results);
-      return;
-    }
-
-    const currentQuery = searchQuery;
-    void documents.search({ query: searchQuery, shareId }).then((res) => {
-      searchCache.current.set(currentQuery, { timestamp: now, results: res });
-      if (searchQueryRef.current === currentQuery) {
-        setResults(res);
-      }
-    });
-  }, [documents, searchQuery, shareId]);
-
-  const addRecentDoc = React.useCallback((doc: Document) => {
-    const prev = recentDocsRef.current;
-    const filtered = prev.filter((d) => d.id !== doc.id);
-    const next = [doc, ...filtered].slice(0, maxRecentDocs);
-    recentDocsRef.current = next;
-    setRecentDocs(next);
-  }, []);
-
-  const documentIcon = React.useCallback(
-    (doc: Document) =>
-      doc.icon ? (
-        <Icon
-          value={doc.icon}
-          initial={doc.initial}
-          color={doc.color ?? undefined}
-        />
-      ) : (
-        <DocumentIcon />
-      ),
-    []
-  );
-
-  const actions = React.useMemo(
-    () =>
-      results.map((result) =>
-        createAction({
-          id: `shared-search-${result.document.id}`,
-          name: result.document.titleWithDefault,
-          description: rehighlightContext(result.context, searchQuery),
-          keywords: searchQuery,
-          analyticsName: "Open shared search result",
-          section: SearchResultsSection,
-          icon: documentIcon(result.document),
-          perform: () => {
-            if (shareId) {
-              const currentQuery = searchQueryRef.current;
-              addRecentDoc(result.document);
-              history.push({
-                pathname: sharedModelPath(shareId, result.document.url),
-                search: currentQuery
-                  ? `?q=${encodeURIComponent(currentQuery)}`
-                  : undefined,
-              });
-            }
-          },
-        })
-      ),
-    [results, shareId, searchQuery, addRecentDoc, documentIcon]
-  );
-
-  const recentDocActions = React.useMemo(
-    () =>
-      recentDocs.map((doc) =>
-        createAction({
-          id: `shared-recent-doc-${doc.id}`,
-          name: doc.titleWithDefault,
-          analyticsName: "Open recent shared document",
-          section: RecentSearchesSection,
-          icon: documentIcon(doc),
-          perform: () => {
-            if (shareId) {
-              history.push(sharedModelPath(shareId, doc.url));
-            }
-          },
-        })
-      ),
-    [recentDocs, shareId, documentIcon]
-  );
-
-  useCommandBarActions(searchQuery ? actions : recentDocActions, [
-    searchQuery
-      ? actions.map((a) => a.id).join("")
-      : recentDocActions.map((a) => a.id).join(""),
-    searchQuery,
-  ]);
-
-  return null;
-}
-
-export default observer(SharedSearchActions);

app/components/CommandBar/useTemplatesAction.tsx

@@ -11,15 +11,15 @@ import useStores from "~/hooks/useStores";
 import { newDocumentPath } from "~/utils/routeHelpers";
 
 const useTemplatesAction = () => {
-  const { templates } = useStores();
+  const { documents } = useStores();
 
   useEffect(() => {
-    void templates.fetchAll();
-  }, [templates]);
+    void documents.fetchAllTemplates();
+  }, [documents]);
 
   const actions = useMemo(
     () =>
-      templates.alphabetical.map((template) =>
+      documents.templatesAlphabetical.map((template) =>
         createInternalLinkAction({
           name: template.titleWithDefault,
           analyticsName: "New document",
@@ -66,7 +66,7 @@ const useTemplatesAction = () => {
           },
         })
       ),
-    [templates.alphabetical]
+    [documents.templatesAlphabetical]
   );
 
   const newFromTemplate = useMemo(

app/components/ContentEditable.tsx

@@ -128,14 +128,7 @@ const ContentEditable = React.forwardRef(function ContentEditable_(
 
   React.useEffect(() => {
     if (contentRef.current && value !== contentRef.current.textContent) {
-      if (document.activeElement === contentRef.current) {
-        // Don't reset content while the user is actively editing. Update
-        // lastValue so that the next input or blur event will push the
-        // current DOM text back to the model via onChange.
-        lastValue.current = value;
-      } else {
-        setInnerValue(value);
-      }
+      setInnerValue(value);
     }
   }, [value, contentRef]);
 

app/components/DefaultCollectionInputSelect.tsx

@@ -1,15 +1,8 @@
-import {
-  CollectionIcon as CollectionIconComponent,
-  HomeIcon,
-  PrivateCollectionIcon,
-} from "outline-icons";
-import { observer } from "mobx-react";
-import { getLuminance } from "polished";
+import { HomeIcon } from "outline-icons";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
-import Icon from "@shared/components/Icon";
-import { colorPalette } from "@shared/utils/collections";
+import CollectionIcon from "~/components/Icons/CollectionIcon";
 import type { Option } from "~/components/InputSelect";
 import { InputSelect } from "~/components/InputSelect";
 import useStores from "~/hooks/useStores";
@@ -19,112 +12,74 @@ type DefaultCollectionInputSelectProps = {
   defaultCollectionId: string | null;
 };
 
-const DefaultCollectionInputSelect = observer(
-  ({
-    onSelectCollection,
-    defaultCollectionId,
-  }: DefaultCollectionInputSelectProps) => {
-    const { t } = useTranslation();
-    const { collections, ui } = useStores();
-    const [fetching, setFetching] = useState(false);
-    const [fetchError, setFetchError] = useState();
+const DefaultCollectionInputSelect = ({
+  onSelectCollection,
+  defaultCollectionId,
+}: DefaultCollectionInputSelectProps) => {
+  const { t } = useTranslation();
+  const { collections } = useStores();
+  const [fetching, setFetching] = useState(false);
+  const [fetchError, setFetchError] = useState();
 
-    React.useEffect(() => {
-      async function fetchData() {
-        if (!collections.isLoaded && !fetching && !fetchError) {
-          try {
-            setFetching(true);
-            await collections.fetchPage({
-              limit: 100,
-            });
-          } catch (error) {
-            toast.error(
-              t("Collections could not be loaded, please reload the app")
-            );
-            setFetchError(error);
-          } finally {
-            setFetching(false);
-          }
+  React.useEffect(() => {
+    async function fetchData() {
+      if (!collections.isLoaded && !fetching && !fetchError) {
+        try {
+          setFetching(true);
+          await collections.fetchPage({
+            limit: 100,
+          });
+        } catch (error) {
+          toast.error(
+            t("Collections could not be loaded, please reload the app")
+          );
+          setFetchError(error);
+        } finally {
+          setFetching(false);
         }
       }
-      void fetchData();
-    }, [fetchError, t, fetching, collections]);
-
-    if (fetching) {
-      return null;
     }
+    void fetchData();
+  }, [fetchError, t, fetching, collections]);
 
-    const isDark = ui.resolvedTheme === "dark";
-
-    // Eagerly resolve collection icon properties within this observer context
-    // to avoid MobX warnings when Radix Select clones elements for the trigger.
-    const options: Option[] = collections.nonPrivate.reduce(
-      (acc, collection) => {
-        const collectionIcon = collection.icon;
-        const rawColor = collection.color ?? colorPalette[0];
-
-        let icon: React.ReactElement;
-        if (!collectionIcon || collectionIcon === "collection") {
-          const color =
-            isDark && rawColor !== "currentColor"
-              ? getLuminance(rawColor) > 0.09
-                ? rawColor
-                : "currentColor"
-              : rawColor;
-          const Component = collection.isPrivate
-            ? PrivateCollectionIcon
-            : CollectionIconComponent;
-          icon = <Component color={color} />;
-        } else {
-          let color = rawColor;
-          if (color !== "currentColor") {
-            if (isDark) {
-              color = getLuminance(color) > 0.09 ? color : "currentColor";
-            } else {
-              color = getLuminance(color) < 0.9 ? color : "currentColor";
-            }
-          }
-          icon = (
-            <Icon
-              value={collectionIcon}
-              color={color}
-              initial={collection.initial}
-              forceColor
-            />
-          );
-        }
-
-        return [
+  const options: Option[] = React.useMemo(
+    () =>
+      collections.nonPrivate.reduce(
+        (acc, collection) => [
           ...acc,
           {
-            type: "item" as const,
+            type: "item",
             label: collection.name,
             value: collection.id,
-            icon,
+            icon: <CollectionIcon collection={collection} />,
           },
-        ];
-      },
-      [
-        {
-          type: "item",
-          label: t("Home"),
-          value: "home",
-          icon: <HomeIcon />,
-        },
-      ] satisfies Option[]
-    );
+        ],
+        [
+          {
+            type: "item",
+            label: t("Home"),
+            value: "home",
+            icon: <HomeIcon />,
+          },
+        ] satisfies Option[]
+      ),
+    [collections.nonPrivate, t]
+  );
 
-    return (
-      <InputSelect
-        options={options}
-        value={defaultCollectionId ?? "home"}
-        onChange={onSelectCollection}
-        label={t("Start view")}
-        hideLabel
-        short
-      />
-    );
+  if (fetching) {
+    return null;
   }
-);
+
+  return (
+    <InputSelect
+      options={options}
+      value={defaultCollectionId ?? "home"}
+      onChange={onSelectCollection}
+      label={t("Start view")}
+      hideLabel
+      short
+    />
+  );
+};
 
 export default DefaultCollectionInputSelect;

app/components/Divider.ts

@@ -0,0 +1,11 @@
+import styled from "styled-components";
+import { s } from "@shared/styles";
+
+const Divider = styled.hr`
+  border: 0;
+  border-bottom: 1px solid ${s("divider")};
+  margin: 0;
+  padding: 0;
+`;
+
+export default Divider;

app/components/DocumentBreadcrumb.tsx

@@ -1,22 +1,17 @@
 import { observer } from "mobx-react";
-import { ArchiveIcon, GoToIcon, TrashIcon } from "outline-icons";
+import { ArchiveIcon, GoToIcon, ShapesIcon, TrashIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import Icon from "@shared/components/Icon";
 import type { NavigationNode } from "@shared/types";
-import type Collection from "~/models/Collection";
 import type Document from "~/models/Document";
 import Breadcrumb from "~/components/Breadcrumb";
 import CollectionIcon from "~/components/Icons/CollectionIcon";
-import { ContextMenu } from "~/components/Menu/ContextMenu";
-import { ActionContextProvider } from "~/hooks/useActionContext";
-import { useCollectionMenuAction } from "~/hooks/useCollectionMenuAction";
-import { useDocumentMenuAction } from "~/hooks/useDocumentMenuAction";
 import { useLocationSidebarContext } from "~/hooks/useLocationSidebarContext";
 import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
-import { archivePath, trashPath } from "~/utils/routeHelpers";
+import { archivePath, settingsPath, trashPath } from "~/utils/routeHelpers";
 import { createInternalLinkAction } from "~/actions";
 import { ActiveDocumentSection } from "~/actions/sections";
 
@@ -73,9 +68,14 @@ function DocumentBreadcrumb(
         to: archivePath(),
       }),
       createInternalLinkAction({
-        name: collection ? (
-          <CollectionName collection={collection} />
-        ) : undefined,
+        name: t("Templates"),
+        section: ActiveDocumentSection,
+        icon: <ShapesIcon />,
+        visible: document.template,
+        to: settingsPath("templates"),
+      }),
+      createInternalLinkAction({
+        name: collection?.name,
         section: ActiveDocumentSection,
         icon: collection ? (
           <CollectionIcon collection={collection} expanded />
@@ -97,14 +97,17 @@ function DocumentBreadcrumb(
       ...path.map((node) => {
         const title = node.title || t("Untitled");
         return createInternalLinkAction({
-          name: (
-            <DocumentName
-              documentId={node.id}
-              collection={collection}
-              icon={node.icon}
-              color={node.color}
-              title={title}
-            />
+          name: node.icon ? (
+            <>
+              <StyledIcon
+                value={node.icon}
+                color={node.color}
+                initial={node.title.charAt(0).toUpperCase()}
+              />{" "}
+              {title}
+            </>
+          ) : (
+            title
           ),
           section: ActiveDocumentSection,
           to: {
@@ -173,75 +176,6 @@ function DocumentBreadcrumb(
   );
 }
 
-/** Renders a collection name wrapped in a context menu. */
-const CollectionName = observer(function CollectionName_({
-  collection,
-}: {
-  collection: Collection;
-}) {
-  const { t } = useTranslation();
-  const menuAction = useCollectionMenuAction({
-    collectionId: collection.id,
-  });
-
-  return (
-    <ActionContextProvider value={{ activeModels: [collection] }}>
-      <ContextMenu action={menuAction} ariaLabel={t("Collection options")}>
-        <span>{collection.name}</span>
-      </ContextMenu>
-    </ActionContextProvider>
-  );
-});
-
-/** Renders a document name wrapped in a context menu. */
-const DocumentName = observer(function DocumentName_({
-  documentId,
-  collection,
-  icon,
-  color,
-  title,
-}: {
-  documentId: string;
-  collection: Collection | undefined;
-  icon: string | undefined;
-  color: string | undefined;
-  title: string;
-}) {
-  const { t } = useTranslation();
-  const { documents } = useStores();
-  const doc = documents.get(documentId);
-  const menuAction = useDocumentMenuAction({ documentId });
-
-  const content = icon ? (
-    <>
-      <StyledIcon
-        value={icon}
-        color={color}
-        initial={title.charAt(0).toUpperCase()}
-      />{" "}
-      {title}
-    </>
-  ) : (
-    title
-  );
-
-  if (!doc) {
-    return <>{content}</>;
-  }
-
-  return (
-    <ActionContextProvider
-      value={{
-        activeModels: [doc, ...(collection ? [collection] : [])],
-      }}
-    >
-      <ContextMenu action={menuAction} ariaLabel={t("Document options")}>
-        <span>{content}</span>
-      </ContextMenu>
-    </ActionContextProvider>
-  );
-});
-
 const StyledIcon = styled(Icon)`
   margin-right: 2px;
 `;

app/components/DocumentCopy.tsx

@@ -5,13 +5,13 @@ import { toast } from "sonner";
 import styled from "styled-components";
 import type { NavigationNode } from "@shared/types";
 import type Document from "~/models/Document";
+import { FlexContainer, Footer, StyledText } from "~/scenes/DocumentMove";
 import Button from "~/components/Button";
-import Switch from "~/components/Switch";
-import Text from "~/components/Text";
+import DocumentExplorer from "~/components/DocumentExplorer";
 import useCollectionTrees from "~/hooks/useCollectionTrees";
 import useStores from "~/hooks/useStores";
-import { FlexContainer, Footer } from "./Components";
-import DocumentExplorer from "./DocumentExplorer";
+import Switch from "./Switch";
+import Text from "./Text";
 
 type Props = {
   /** The original document to duplicate */
@@ -37,8 +37,13 @@ function DocumentCopy({ document, onSubmit }: Props) {
         : true
     );
 
+    if (document.isTemplate) {
+      return nodes
+        .filter((node) => node.type === "collection")
+        .map((node) => ({ ...node, children: [] }));
+    }
     return nodes;
-  }, [policies, collectionTrees]);
+  }, [policies, collectionTrees, document.isTemplate]);
 
   const copy = async () => {
     if (!selectedPath) {
@@ -75,32 +80,34 @@ function DocumentCopy({ document, onSubmit }: Props) {
         onSelect={selectPath}
         defaultValue={document.parentDocumentId || document.collectionId || ""}
       />
-      <OptionsContainer>
-        {document.collectionId && (
-          <Text size="small">
-            <Switch
-              name="publish"
-              label={t("Publish")}
-              labelPosition="right"
-              checked={publish}
-              onChange={setPublish}
-            />
-          </Text>
-        )}
-        {document.publishedAt && document.childDocuments.length > 0 && (
-          <Text size="small">
-            <Switch
-              name="recursive"
-              label={t("Include nested documents")}
-              labelPosition="right"
-              checked={recursive}
-              onChange={setRecursive}
-            />
-          </Text>
-        )}
-      </OptionsContainer>
+      {!document.isTemplate && (
+        <OptionsContainer>
+          {document.collectionId && (
+            <Text size="small">
+              <Switch
+                name="publish"
+                label={t("Publish")}
+                labelPosition="right"
+                checked={publish}
+                onChange={setPublish}
+              />
+            </Text>
+          )}
+          {document.publishedAt && document.childDocuments.length > 0 && (
+            <Text size="small">
+              <Switch
+                name="recursive"
+                label={t("Include nested documents")}
+                labelPosition="right"
+                checked={recursive}
+                onChange={setRecursive}
+              />
+            </Text>
+          )}
+        </OptionsContainer>
+      )}
       <Footer justify="space-between" align="center" gap={8}>
-        <Text ellipsis type="secondary">
+        <StyledText type="secondary">
           {selectedPath ? (
             <Trans
               defaults="Copy to <em>{{ location }}</em>"
@@ -110,7 +117,7 @@ function DocumentCopy({ document, onSubmit }: Props) {
           ) : (
             t("Select a location to copy")
           )}
-        </Text>
+        </StyledText>
         <Button disabled={!selectedPath || copying} onClick={copy}>
           {copying ? `${t("Copying")}…` : t("Copy")}
         </Button>

app/components/DocumentExplorer.tsx

@@ -12,14 +12,15 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import AutoSizer from "react-virtualized-auto-sizer";
 import { FixedSizeList as List } from "react-window";
+import scrollIntoView from "scroll-into-view-if-needed";
 import styled, { useTheme } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import Icon from "@shared/components/Icon";
 import type { NavigationNode } from "@shared/types";
 import { isModKey } from "@shared/utils/keyboard";
 import { ancestors, descendants, flattenTree } from "@shared/utils/tree";
-import DocumentExplorerNode from "./DocumentExplorerNode";
-import DocumentExplorerSearchResult from "./DocumentExplorerSearchResult";
+import DocumentExplorerNode from "~/components/DocumentExplorerNode";
+import DocumentExplorerSearchResult from "~/components/DocumentExplorerSearchResult";
 import Flex from "~/components/Flex";
 import CollectionIcon from "~/components/Icons/CollectionIcon";
 import { Outline } from "~/components/Input";
@@ -37,39 +38,9 @@ type Props = {
   items: NavigationNode[];
   /** Automatically expand to and select item with the given id */
   defaultValue?: string;
-  /** Whether to show child documents */
-  showDocuments?: boolean;
 };
 
-const VERTICAL_PADDING = 6;
-const HORIZONTAL_PADDING = 24;
-
-const innerElementType = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(function innerElementType(
-  { style, ...rest }: React.HTMLAttributes<HTMLDivElement>,
-  ref
-) {
-  return (
-    <div
-      ref={ref}
-      style={{
-        ...style,
-        height: `${parseFloat(style?.height + "") + VERTICAL_PADDING * 2}px`,
-      }}
-      {...rest}
-    />
-  );
-});
-
-function DocumentExplorer({
-  onSubmit,
-  onSelect,
-  items,
-  defaultValue,
-  showDocuments,
-}: Props) {
+function DocumentExplorer({ onSubmit, onSelect, items, defaultValue }: Props) {
   const isMobile = useMobile();
   const { collections, documents } = useStores();
   const { t } = useTranslation();
@@ -88,6 +59,8 @@ function DocumentExplorer({
       return node || null;
     }
   );
+  const [initialScrollOffset, setInitialScrollOffset] =
+    React.useState<number>(0);
   const [activeNode, setActiveNode] = React.useState<number>(0);
   const [expandedNodes, setExpandedNodes] = React.useState<string[]>(() => {
     if (defaultValue) {
@@ -110,6 +83,9 @@ function DocumentExplorer({
   );
   const listRef = React.useRef<List<NavigationNode[]>>(null);
 
+  const VERTICAL_PADDING = 6;
+  const HORIZONTAL_PADDING = 24;
+
   const searchIndex = React.useMemo(
     () =>
       new FuzzySearch(flatten(items.map(flattenTree)), ["title"], {
@@ -160,18 +136,24 @@ function DocumentExplorer({
         setTimeout(() => listRef.current?.scrollToItem(index, "center"), 50);
       }
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [defaultValue]);
+  }, [defaultValue, selectedNode, nodes]);
   const baseDepth = nodes.reduce(
     (min, node) => (node.depth ? Math.min(min, node.depth) : min),
     Infinity
   );
-  const normalizedBaseDepth =
-    (baseDepth === Infinity ? 0 : baseDepth) + (showDocuments ? 0 : 1);
+  const normalizedBaseDepth = baseDepth === Infinity ? 0 : baseDepth;
 
-  const scrollNodeIntoView = React.useCallback((node: number) => {
-    listRef.current?.scrollToItem(node, "smart");
-  }, []);
+  const scrollNodeIntoView = React.useCallback(
+    (node: number) => {
+      if (itemRefs[node] && itemRefs[node].current) {
+        scrollIntoView(itemRefs[node].current as HTMLSpanElement, {
+          behavior: "auto",
+          block: "center",
+        });
+      }
+    },
+    [itemRefs]
+  );
 
   const handleSearch = (ev: React.ChangeEvent<HTMLInputElement>) => {
     setSearchTerm(ev.target.value);
@@ -179,16 +161,16 @@ function DocumentExplorer({
 
   const isExpanded = (node: number) => includes(expandedNodes, nodes[node].id);
 
-  const preserveScrollOffset = (itemCount: number) => {
+  const calculateInitialScrollOffset = (itemCount: number) => {
     if (listRef.current) {
       const { height, itemSize } = listRef.current.props;
       const { scrollOffset } = listRef.current.state as {
         scrollOffset: number;
       };
       const itemsHeight = itemCount * itemSize;
-      const offset = itemsHeight < Number(height) ? 0 : scrollOffset;
-      setTimeout(() => listRef.current?.scrollTo(offset), 0);
+      return itemsHeight < Number(height) ? 0 : scrollOffset;
     }
+    return 0;
   };
 
   const collapse = (node: number) => {
@@ -199,7 +181,8 @@ function DocumentExplorer({
 
     // remove children
     const newNodes = filter(nodes, (n) => !includes(descendantIds, n.id));
-    preserveScrollOffset(newNodes.length);
+    const scrollOffset = calculateInitialScrollOffset(newNodes.length);
+    setInitialScrollOffset(scrollOffset);
   };
 
   const expand = (node: number) => {
@@ -208,7 +191,8 @@ function DocumentExplorer({
     // add children
     const newNodes = nodes.slice();
     newNodes.splice(node + 1, 0, ...descendants(nodes[node], 1));
-    preserveScrollOffset(newNodes.length);
+    const scrollOffset = calculateInitialScrollOffset(newNodes.length);
+    setInitialScrollOffset(scrollOffset);
   };
 
   React.useEffect(() => {
@@ -232,8 +216,7 @@ function DocumentExplorer({
   };
 
   const hasChildren = (node: number) =>
-    nodes[node].children.length > 0 ||
-    (showDocuments !== false && nodes[node].type === "collection");
+    nodes[node].children.length > 0 || nodes[node].type === "collection";
 
   const toggleCollapse = (node: number) => {
     if (!hasChildren(node)) {
@@ -395,16 +378,31 @@ function DocumentExplorer({
     }
   };
 
+  const innerElementType = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+  >(function innerElementType(
+    { style, ...rest }: React.HTMLAttributes<HTMLDivElement>,
+    ref
+  ) {
+    return (
+      <div
+        ref={ref}
+        style={{
+          ...style,
+          height: `${parseFloat(style?.height + "") + VERTICAL_PADDING * 2}px`,
+        }}
+        {...rest}
+      />
+    );
+  });
+
   return (
     <Container tabIndex={-1} onKeyDown={handleKeyDown}>
       <ListSearch
         ref={inputSearchRef}
         onChange={handleSearch}
-        placeholder={
-          showDocuments
-            ? `${t("Search collections & documents")}…`
-            : `${t("Search collections")}…`
-        }
+        placeholder={`${t("Search collections & documents")}…`}
         autoFocus
       />
       <ListContainer>
@@ -414,12 +412,14 @@ function DocumentExplorer({
               <Flex role="listbox" column>
                 <List
                   ref={listRef}
+                  key={nodes.length}
                   width={width}
                   height={height}
                   itemData={nodes}
                   itemCount={nodes.length}
                   itemSize={isMobile ? 48 : 32}
                   innerElementType={innerElementType}
+                  initialScrollOffset={initialScrollOffset}
                   itemKey={(index, results) => results[index].id}
                 >
                   {ListItem}

app/components/DocumentExplorer/Components.tsx

@@ -1,17 +0,0 @@
-import styled from "styled-components";
-import Flex from "../Flex";
-
-export const FlexContainer = styled(Flex)`
-  margin-left: -24px;
-  margin-right: -24px;
-  margin-bottom: -24px;
-  outline: none;
-`;
-
-export const Footer = styled(Flex)`
-  height: 64px;
-  border-top: 1px solid ${(props) => props.theme.horizontalRule};
-  padding-left: 24px;
-  padding-right: 24px;
-  flex-shrink: 0;
-`;

app/components/DocumentExplorer/TemplateMove.tsx

@@ -1,87 +0,0 @@
-import { observer } from "mobx-react";
-import { useState, useMemo } from "react";
-import { useTranslation, Trans } from "react-i18next";
-import { toast } from "sonner";
-import type { NavigationNode } from "@shared/types";
-import type Template from "~/models/Template";
-import Button from "~/components/Button";
-import Text from "~/components/Text";
-import useCollectionTrees from "~/hooks/useCollectionTrees";
-import useStores from "~/hooks/useStores";
-import { FlexContainer, Footer } from "./Components";
-import DocumentExplorer from "./DocumentExplorer";
-
-type Props = {
-  template: Template;
-};
-
-function TemplateMove({ template }: Props) {
-  const { dialogs, policies } = useStores();
-  const { t } = useTranslation();
-  const collectionTrees = useCollectionTrees();
-  const [selectedPath, selectPath] = useState<NavigationNode | null>(null);
-
-  const items = useMemo(
-    () =>
-      collectionTrees
-        .map((node) => ({ ...node, children: [] }))
-        .filter((node) =>
-          node.collectionId
-            ? policies.get(node.collectionId)?.abilities.createDocument
-            : true
-        ),
-    [policies, collectionTrees]
-  );
-
-  const move = async () => {
-    if (!selectedPath) {
-      toast.message(t("Select a location to move"));
-      return;
-    }
-
-    try {
-      const collectionId = (selectedPath.collectionId ??
-        selectedPath.id) as string;
-      await template.save({ collectionId });
-
-      toast.success(t("Template moved"));
-
-      dialogs.closeAllModals();
-    } catch (_err) {
-      toast.error(t("Couldn’t move the template, try again?"));
-    }
-  };
-
-  return (
-    <FlexContainer column>
-      <DocumentExplorer
-        items={items}
-        onSubmit={move}
-        onSelect={selectPath}
-        showDocuments={false}
-      />
-      <Footer justify="space-between" align="center" gap={8}>
-        <Text ellipsis type="secondary">
-          {selectedPath ? (
-            <Trans
-              defaults="Move to <em>{{ location }}</em>"
-              values={{
-                location: selectedPath.title,
-              }}
-              components={{
-                em: <strong />,
-              }}
-            />
-          ) : (
-            t("Select a location to move")
-          )}
-        </Text>
-        <Button disabled={!selectedPath} onClick={move}>
-          {t("Move")}
-        </Button>
-      </Footer>
-    </FlexContainer>
-  );
-}
-
-export default observer(TemplateMove);

app/components/DocumentExplorer/index.ts

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

app/components/DocumentExplorerNode.tsx

@@ -40,8 +40,10 @@ function DocumentExplorerNode(
   ref: React.RefObject<HTMLSpanElement>
 ) {
   const { t } = useTranslation();
-  const DISCLOSURE = 24;
-  const width = (depth + (hasChildren ? 2 : 1)) * DISCLOSURE;
+  const OFFSET = 12;
+  const DISCLOSURE = 20;
+
+  const width = depth ? depth * DISCLOSURE + OFFSET : DISCLOSURE;
 
   return (
     <Node
@@ -52,7 +54,6 @@ function DocumentExplorerNode(
       style={style}
       onPointerMove={onPointerMove}
       role="option"
-      aria-selected={selected}
     >
       <Spacer width={width}>
         {hasChildren && (
@@ -78,7 +79,7 @@ const Title = styled(Text)`
 const StyledDisclosure = styled(Disclosure)`
   position: relative;
   left: auto;
-  margin: 2px 0;
+  margin-top: 2px;
 `;
 
 const Spacer = styled(Flex)<{ width: number }>`

app/components/DocumentExplorerSearchResult.tsx

@@ -1,9 +1,10 @@
 import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
+import scrollIntoView from "scroll-into-view-if-needed";
 import styled from "styled-components";
 import { ellipsis } from "@shared/styles";
-import { Node as SearchResult } from "./DocumentExplorerNode";
+import { Node as SearchResult } from "~/components/DocumentExplorerNode";
 import Flex from "~/components/Flex";
 import Text from "~/components/Text";
 
@@ -31,15 +32,28 @@ function DocumentExplorerSearchResult({
 }: Props) {
   const { t } = useTranslation();
 
+  const ref = React.useCallback(
+    (node: HTMLSpanElement | null) => {
+      if (active && node) {
+        scrollIntoView(node, {
+          scrollMode: "if-needed",
+          behavior: "auto",
+          block: "nearest",
+        });
+      }
+    },
+    [active]
+  );
+
   return (
     <SearchResult
+      ref={ref}
       selected={selected}
       active={active}
       onClick={onClick}
       style={style}
       onPointerMove={onPointerMove}
       role="option"
-      aria-selected={selected}
     >
       {icon}
       <Flex>

app/components/DocumentListItem.tsx

@@ -22,7 +22,6 @@ import StarButton, { AnimatedStar } from "~/components/Star";
 import Tooltip from "~/components/Tooltip";
 import useBoolean from "~/hooks/useBoolean";
 import useCurrentUser from "~/hooks/useCurrentUser";
-import useMobile from "~/hooks/useMobile";
 import { useLocationSidebarContext } from "~/hooks/useLocationSidebarContext";
 import DocumentMenu from "~/menus/DocumentMenu";
 import { documentPath } from "~/utils/routeHelpers";
@@ -40,6 +39,7 @@ type Props = {
   showCollection?: boolean;
   showPublished?: boolean;
   showDraft?: boolean;
+  showTemplate?: boolean;
 };
 
 const SEARCH_RESULT_REGEX = /<b\b[^>]*>(.*?)<\/b>/gi;
@@ -59,7 +59,6 @@ function DocumentListItem(
   const { userMemberships, groupMemberships } = useStores();
   const locationSidebarContext = useLocationSidebarContext();
   const [menuOpen, handleMenuOpen, handleMenuClose] = useBoolean();
-  const isMobile = useMobile();
 
   let itemRef: React.Ref<HTMLAnchorElement> =
     React.useRef<HTMLAnchorElement>(null);
@@ -76,6 +75,7 @@ function DocumentListItem(
     showCollection,
     showPublished,
     showDraft = true,
+    showTemplate,
     highlight,
     context,
     ...rest
@@ -83,7 +83,7 @@ function DocumentListItem(
   const queryIsInTitle =
     !!highlight &&
     !!document.title.toLowerCase().includes(highlight.toLowerCase());
-  const canStar = !document.isArchived;
+  const canStar = !document.isArchived && !document.isTemplate;
 
   const isShared = !!(
     userMemberships.getByDocumentId(document.id) ||
@@ -101,10 +101,11 @@ function DocumentListItem(
   return (
     <ActionContextProvider
       value={{
-        activeModels: [
-          document,
-          ...(!isShared && document.collection ? [document.collection] : []),
-        ],
+        activeDocumentId: document.id,
+        activeCollectionId:
+          !isShared && document.collectionId
+            ? document.collectionId
+            : undefined,
       }}
     >
       <ContextMenu
@@ -161,7 +162,10 @@ function DocumentListItem(
                     <Badge>{t("Draft")}</Badge>
                   </Tooltip>
                 )}
-                {canStar && !isMobile && <StarButton document={document} />}
+                {canStar && <StarButton document={document} />}
+                {document.isTemplate && showTemplate && (
+                  <Badge primary>{t("Template")}</Badge>
+                )}
               </Heading>
 
               {!queryIsInTitle && (

app/components/DocumentMeta.tsx

@@ -52,6 +52,7 @@ const DocumentMeta: React.FC<Props> = ({
     isDraft,
     lastViewedAt,
     isTasks,
+    isTemplate,
   } = document;
 
   // Prevent meta information from displaying if updatedBy is not available.
@@ -141,7 +142,7 @@ const DocumentMeta: React.FC<Props> = ({
   const nestedDocumentsCount = collection
     ? collection.getChildrenForDocument(document.id).length
     : 0;
-  const canShowProgressBar = isTasks;
+  const canShowProgressBar = isTasks && !isTemplate;
 
   const timeSinceNow = () => {
     if (isDraft || !showLastViewed) {

app/components/Header.tsx

@@ -88,7 +88,6 @@ function Header(
           <Breadcrumbs ref={setBreadcrumbRef}>
             {hasMobileSidebar && (
               <MobileMenuButton
-                haptic="light"
                 onClick={ui.toggleMobileSidebar}
                 icon={<MenuIcon />}
                 neutral

app/components/HoverPreview/Components.tsx

@@ -43,9 +43,9 @@ export const Info = styled(StyledText).attrs(() => ({
   white-space: nowrap;
 `;
 
-export const Description = styled(StyledText)<{ $margin?: string }>`
+export const Description = styled(StyledText)`
   ${sharedVars}
-  margin-top: ${(props) => props.$margin ?? "0.5em"};
+  margin-top: 0.5em;
   line-height: var(--line-height);
   max-height: calc(var(--line-height) * ${NUMBER_OF_LINES});
   overflow: hidden;
@@ -64,6 +64,8 @@ export const Label = styled(Text).attrs({ size: "xsmall", weight: "bold" })<{
   width: fit-content;
   border-radius: 2em;
   padding: 1px 8px 1px 20px;
+  margin-right: 0.5em;
+  margin-top: 0.5em;
   position: relative;
   flex-shrink: 0;
 
@@ -73,8 +75,8 @@ export const Label = styled(Text).attrs({ size: "xsmall", weight: "bold" })<{
     left: 8px;
     top: 50%;
     transform: translateY(-50%);
-    width: 8px;
-    height: 8px;
+    width: 6px;
+    height: 6px;
     border-radius: 50%;
     background-color: ${(props) =>
       props.color || props.theme.backgroundSecondary};

app/components/HoverPreview/HoverPreview.tsx

@@ -17,7 +17,6 @@ import HoverPreviewGroup from "./HoverPreviewGroup";
 import HoverPreviewIssue from "./HoverPreviewIssue";
 import HoverPreviewLink from "./HoverPreviewLink";
 import HoverPreviewMention from "./HoverPreviewMention";
-import HoverPreviewProject from "./HoverPreviewProject";
 import HoverPreviewPullRequest from "./HoverPreviewPullRequest";
 
 const DELAY_CLOSE = 500;
@@ -193,18 +192,6 @@ const HoverPreviewDesktop = observer(
                   createdAt={data.createdAt}
                   state={data.state}
                 />
-              ) : data.type === UnfurlResourceType.Project ? (
-                <HoverPreviewProject
-                  ref={cardRef}
-                  url={data.url}
-                  name={data.name}
-                  color={data.color}
-                  lead={data.lead}
-                  labels={data.labels}
-                  description={data.description}
-                  state={data.state}
-                  targetDate={data.targetDate}
-                />
               ) : (
                 <HoverPreviewLink
                   ref={cardRef}

app/components/HoverPreview/HoverPreviewIssue.tsx

@@ -3,11 +3,9 @@ import { Trans } from "react-i18next";
 import styled from "styled-components";
 import { Backticks } from "@shared/components/Backticks";
 import { IssueStatusIcon } from "@shared/components/IssueStatusIcon";
-import { richExtensions } from "@shared/editor/nodes";
 import type { UnfurlResourceType, UnfurlResponse } from "@shared/types";
 import { IntegrationService } from "@shared/types";
 import { Avatar } from "~/components/Avatar";
-import Editor from "~/components/Editor";
 import Flex from "~/components/Flex";
 import Text from "../Text";
 import Time from "../Time";
@@ -30,11 +28,9 @@ const HoverPreviewIssue = React.forwardRef(function HoverPreviewIssue_(
   const authorName = author.name;
   const urlObj = new URL(url);
   const service =
-    urlObj.hostname === "linear.app"
-      ? IntegrationService.Linear
-      : urlObj.hostname === "github.com"
-        ? IntegrationService.GitHub
-        : IntegrationService.GitLab;
+    urlObj.hostname === "github.com"
+      ? IntegrationService.GitHub
+      : IntegrationService.Linear;
 
   return (
     <Preview as="a" href={url} target="_blank" rel="noopener noreferrer">
@@ -62,20 +58,9 @@ const HoverPreviewIssue = React.forwardRef(function HoverPreviewIssue_(
                   </Trans>
                 </Info>
               </Flex>
-              {description && (
-                <Description as="div">
-                  <React.Suspense fallback={<div />}>
-                    <Editor
-                      extensions={richExtensions}
-                      defaultValue={description}
-                      embedsDisabled
-                      readOnly
-                    />
-                  </React.Suspense>
-                </Description>
-              )}
+              <Description>{description}</Description>
 
-              <Flex wrap gap={6} style={{ marginTop: 8 }}>
+              <Flex wrap>
                 {labels.map((label, index) => (
                   <Label key={index} color={label.color}>
                     {label.name}

app/components/HoverPreview/HoverPreviewProject.tsx

@@ -1,148 +0,0 @@
-import * as React from "react";
-import { useTranslation } from "react-i18next";
-import styled from "styled-components";
-import { s } from "@shared/styles";
-import { Backticks } from "@shared/components/Backticks";
-import Squircle from "@shared/components/Squircle";
-import Editor from "~/components/Editor";
-import type { UnfurlResourceType, UnfurlResponse } from "@shared/types";
-import { Avatar, AvatarSize } from "~/components/Avatar";
-import Flex from "~/components/Flex";
-import Text from "../Text";
-import Time from "../Time";
-import {
-  Preview,
-  Title,
-  Card,
-  CardContent,
-  Label,
-  Description,
-} from "./Components";
-import { richExtensions } from "@shared/editor/nodes";
-
-type Props = Pick<
-  UnfurlResponse[UnfurlResourceType.Project],
-  | "url"
-  | "name"
-  | "color"
-  | "lead"
-  | "labels"
-  | "state"
-  | "targetDate"
-  | "description"
->;
-
-const HoverPreviewProject = React.forwardRef(function HoverPreviewProject_(
-  { url, name, color, lead, labels, state, description, targetDate }: Props,
-  ref: React.Ref<HTMLDivElement>
-) {
-  const { t } = useTranslation();
-
-  return (
-    <Preview as="a" href={url} target="_blank" rel="noopener noreferrer">
-      <Flex column ref={ref}>
-        <Card fadeOut={false}>
-          <CardContent>
-            <Flex gap={4} column>
-              <Title>
-                <StyledSquircle color={color} size={16} />
-                <span>
-                  <Backticks content={name} />
-                </span>
-              </Title>
-              {description && (
-                <Description as="div" $margin="0">
-                  <React.Suspense fallback={<div />}>
-                    <Editor
-                      extensions={richExtensions}
-                      defaultValue={description}
-                      embedsDisabled
-                      readOnly
-                    />
-                  </React.Suspense>
-                </Description>
-              )}
-              <Text
-                type="tertiary"
-                size="small"
-                style={{ textTransform: "capitalize" }}
-              >
-                {state.name}
-              </Text>
-
-              {(lead || targetDate) && (
-                <>
-                  <Divider />
-
-                  {lead && (
-                    <MetadataRow>
-                      <MetadataLabel>{t("Lead")}</MetadataLabel>
-                      <Flex align="center" gap={6}>
-                        <Avatar src={lead.avatarUrl} size={AvatarSize.Toast} />
-                        <Text size="small">{lead.name}</Text>
-                      </Flex>
-                    </MetadataRow>
-                  )}
-
-                  {targetDate && (
-                    <MetadataRow>
-                      <MetadataLabel>{t("Target date")}</MetadataLabel>
-                      <Text size="small">
-                        <Time dateTime={targetDate} addSuffix />
-                      </Text>
-                    </MetadataRow>
-                  )}
-                </>
-              )}
-
-              {labels.length > 0 && (
-                <>
-                  <Divider />
-                  <MetadataRow>
-                    <MetadataLabel>{t("Labels")}</MetadataLabel>
-                    <Flex wrap gap={6}>
-                      {labels.map((label, index) => (
-                        <Label key={index} color={label.color}>
-                          {label.name}
-                        </Label>
-                      ))}
-                    </Flex>
-                  </MetadataRow>
-                </>
-              )}
-            </Flex>
-          </CardContent>
-        </Card>
-      </Flex>
-    </Preview>
-  );
-});
-
-const StyledSquircle = styled(Squircle)`
-  flex-shrink: 0;
-  margin-top: 4px;
-`;
-
-const Divider = styled.div`
-  height: 1px;
-  background: ${s("divider")};
-  margin: 4px 0;
-`;
-
-const MetadataRow = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  min-height: 28px;
-`;
-
-const MetadataLabel = styled(Text).attrs({
-  type: "tertiary",
-  size: "small",
-})`
-  flex-shrink: 0;
-  min-width: 80px;
-`;
-
-export default HoverPreviewProject;

app/components/HoverPreview/HoverPreviewPullRequest.tsx

@@ -3,10 +3,8 @@ import { Trans } from "react-i18next";
 import styled from "styled-components";
 import { Backticks } from "@shared/components/Backticks";
 import { PullRequestIcon } from "@shared/components/PullRequestIcon";
-import { richExtensions } from "@shared/editor/nodes";
 import type { UnfurlResourceType, UnfurlResponse } from "@shared/types";
 import { Avatar } from "~/components/Avatar";
-import Editor from "~/components/Editor";
 import Flex from "~/components/Flex";
 import Text from "../Text";
 import Time from "../Time";
@@ -50,18 +48,7 @@ const HoverPreviewPullRequest = React.forwardRef(
                     </Trans>
                   </Info>
                 </Flex>
-                {description && (
-                  <Description as="div">
-                    <React.Suspense fallback={<div />}>
-                      <Editor
-                        extensions={richExtensions}
-                        defaultValue={description}
-                        embedsDisabled
-                        readOnly
-                      />
-                    </React.Suspense>
-                  </Description>
-                )}
+                <Description>{description}</Description>
               </Flex>
             </CardContent>
           </Card>

app/components/Layout.tsx

@@ -1,4 +1,3 @@
-import { AnimatePresence } from "framer-motion";
 import { observer } from "mobx-react";
 import * as React from "react";
 import { Helmet } from "react-helmet-async";
@@ -8,7 +7,6 @@ import breakpoint from "styled-components-breakpoint";
 import { s } from "@shared/styles";
 import Flex from "~/components/Flex";
 import { LoadingIndicatorBar } from "~/components/LoadingIndicator";
-import { useRightSidebarContent } from "~/components/RightSidebarContext";
 import SkipNavContent from "~/components/SkipNavContent";
 import SkipNavLink from "~/components/SkipNavLink";
 import env from "~/env";
@@ -21,15 +19,16 @@ type Props = {
   title?: string;
   /** Left sidebar content. */
   sidebar?: React.ReactNode;
+  /** Right sidebar content. */
+  sidebarRight?: React.ReactNode;
 };
 
 const Layout = React.forwardRef(function Layout_(
-  { title, children, sidebar }: Props,
+  { title, children, sidebar, sidebarRight }: Props,
   ref: React.RefObject<HTMLDivElement>
 ) {
   const { ui } = useStores();
   const sidebarCollapsed = !sidebar || ui.sidebarIsClosed;
-  const sidebarRight = useRightSidebarContent();
 
   return (
     <Container column auto ref={ref}>
@@ -62,7 +61,7 @@ const Layout = React.forwardRef(function Layout_(
           {children}
         </Content>
 
-        <AnimatePresence initial={false}>{sidebarRight}</AnimatePresence>
+        {sidebarRight}
       </Container>
     </Container>
   );

app/components/LazyLoad.ts

@@ -9,44 +9,39 @@ export interface LazyComponent<T extends React.ComponentType<any>> {
 interface LazyLoadOptions {
   retries?: number;
   interval?: number;
-  /** If provided, picks this named export from the module instead of `default`. */
-  exportName?: string;
 }
 
 /**
  * Creates a lazy-loaded component with preloading capability and automatic retries on failure.
- * Supports both default and named exports.
  *
- * @param factory A function that returns a promise of a module.
- * @param options Optional configuration for retry behavior and export name.
- * @returns An object containing the lazy Component and a preload function.
+ * @param factory A function that returns a promise of a component (eg: () => import('./MyComponent'))
+ * @param options Optional configuration for retry behavior
+ * @returns An object containing the lazy Component and a preload function
  *
  * @example
  * ```typescript
- * // Default export
  * const MyComponent = createLazyComponent(() => import('./MyComponent'));
  *
- * // Named export
- * const MyComponent = createLazyComponent(() => import('./MyComponent'), {
- *   exportName: 'MyComponent',
- * });
+ * function App() {
+ *   return (
+ *     <Suspense fallback={<div>Loading...</div>}>
+ *       <MyComponent.Component />
+ *     </Suspense>
+ *   );
+ * }
+ *
+ * // Preload when needed:
+ * MyComponent.preload();
  * ```
  */
 export function createLazyComponent<T extends React.ComponentType<any>>(
-  factory: () => Promise<Record<string, T>>,
+  factory: () => Promise<{ default: T }>,
   options: LazyLoadOptions = {}
 ): LazyComponent<T> {
-  const { retries, interval, exportName } = options;
-
-  const wrappedFactory = exportName
-    ? () =>
-        factory().then((m) => ({
-          default: m[exportName],
-        }))
-    : (factory as () => Promise<{ default: T }>);
+  const { retries, interval } = options;
 
   return {
-    Component: lazyWithRetry(wrappedFactory, retries, interval),
-    preload: wrappedFactory,
+    Component: lazyWithRetry(factory, retries, interval),
+    preload: factory,
   };
 }

app/components/Menu/ContextMenu.tsx

@@ -3,7 +3,6 @@ import { actionToMenuItem } from "~/actions";
 import useActionContext from "~/hooks/useActionContext";
 import useMobile from "~/hooks/useMobile";
 import type { ActionVariant, ActionWithChildren } from "~/types";
-import { preventDefault } from "~/utils/events";
 import { toMenuItems } from "./transformer";
 import { observer } from "mobx-react";
 import { useComputed } from "~/hooks/useComputed";
@@ -62,6 +61,11 @@ export const ContextMenu = observer(
       }
     }, []);
 
+    const handleCloseAutoFocus = React.useCallback(
+      (e: Event) => e.preventDefault(),
+      []
+    );
+
     if (isMobile || !action || menuItems.length === 0) {
       return <>{children}</>;
     }
@@ -76,7 +80,7 @@ export const ContextMenu = observer(
             aria-label={ariaLabel}
             onAnimationStart={disablePointerEvents}
             onAnimationEnd={enablePointerEvents}
-            onCloseAutoFocus={preventDefault}
+            onCloseAutoFocus={handleCloseAutoFocus}
           >
             {content}
           </MenuContent>

app/components/Menu/DropdownMenu.tsx

@@ -13,7 +13,6 @@ import { MenuProvider } from "~/components/primitives/Menu/MenuContext";
 import { actionToMenuItem } from "~/actions";
 import useActionContext from "~/hooks/useActionContext";
 import useMobile from "~/hooks/useMobile";
-import { preventDefault } from "~/utils/events";
 import type {
   ActionVariant,
   ActionWithChildren,
@@ -99,6 +98,11 @@ export const DropdownMenu = observer(
         }
       }, []);
 
+      const handleCloseAutoFocus = React.useCallback(
+        (e: Event) => e.preventDefault(),
+        []
+      );
+
       if (isMobile) {
         return (
           <MobileDropdown
@@ -125,7 +129,7 @@ export const DropdownMenu = observer(
               aria-label={ariaLabel}
               onAnimationStart={disablePointerEvents}
               onAnimationEnd={enablePointerEvents}
-              onCloseAutoFocus={preventDefault}
+              onCloseAutoFocus={handleCloseAutoFocus}
             >
               {content}
               {append}

app/components/Notice.tsx

@@ -39,7 +39,7 @@ const Container = styled(Text)`
   border-radius: 4px;
   position: relative;
   font-size: 14px;
-  margin: 1em 0;
+  margin: 1em 0 0;
 
   svg {
     flex-shrink: 0;

app/components/Notifications/NotificationListItem.tsx

@@ -103,7 +103,6 @@ const StyledLink = styled(Link)`
 const StyledCommentEditor = styled(CommentEditor)`
   font-size: 0.9em;
   margin-top: 4px;
-  pointer-events: none;
 
   ${truncateMultiline(3)}
 `;

app/components/Notifications/Notifications.tsx

@@ -20,55 +20,6 @@ import Tooltip from "../Tooltip";
 import NotificationListItem from "./NotificationListItem";
 import { HStack } from "../primitives/HStack";
 
-/**
- * Hook that returns filtered notifications in a stable order. The order is
- * snapshotted on first call (when the popover mounts) so that toggling
- * read/unread does not cause items to jump positions. Notifications that
- * arrive after the snapshot are prepended at the top.
- *
- * @param active - the current list of active notifications.
- * @param filter - the selected notification filter category.
- * @returns filtered notifications in snapshot order.
- */
-function useStableOrderedNotifications(
-  active: Notification[],
-  filter: NotificationFilter
-) {
-  const orderSnapshotRef = React.useRef<string[] | null>(null);
-
-  return React.useMemo(() => {
-    if (orderSnapshotRef.current === null) {
-      orderSnapshotRef.current = active.map((n) => n.id);
-    }
-
-    const filtered =
-      filter === "all"
-        ? active
-        : active.filter((notification) =>
-            Notification.filterCategories[filter].includes(notification.event)
-          );
-
-    const snapshot = orderSnapshotRef.current;
-    const orderMap = new Map(snapshot.map((id, index) => [id, index]));
-    const inSnapshot: Notification[] = [];
-    const newItems: Notification[] = [];
-
-    for (const notification of filtered) {
-      if (orderMap.has(notification.id)) {
-        inSnapshot.push(notification);
-      } else {
-        newItems.push(notification);
-      }
-    }
-
-    inSnapshot.sort(
-      (a, b) => (orderMap.get(a.id) ?? 0) - (orderMap.get(b.id) ?? 0)
-    );
-
-    return [...newItems, ...inSnapshot];
-  }, [active, filter]);
-}
-
 type Props = {
   /** Callback when the notification panel wants to close. */
   onRequestClose: () => void;
@@ -98,10 +49,16 @@ function Notifications(
     [t]
   );
 
-  const filteredNotifications = useStableOrderedNotifications(
-    notifications.active,
-    filter
-  );
+  const filteredNotifications = React.useMemo(() => {
+    if (filter === "all") {
+      return notifications.active;
+    }
+
+    const eventTypes = Notification.filterCategories[filter];
+    return notifications.active.filter((notification) =>
+      eventTypes.includes(notification.event)
+    );
+  }, [notifications.active, filter]);
 
   const unreadCount = notifications.approximateUnreadCount;
 

app/components/PaginatedDocumentList.tsx

@@ -49,6 +49,7 @@ const PaginatedDocumentList = React.memo<Props>(function PaginatedDocumentList({
           showParentDocuments={showParentDocuments}
           showCollection={showCollection}
           showPublished={showPublished}
+          showTemplate={showTemplate}
           showDraft={showDraft}
         />
       )}

app/components/Presentation.tsx

@@ -1,32 +0,0 @@
-import { observer } from "mobx-react";
-import { Suspense } from "react";
-import useStores from "~/hooks/useStores";
-import lazyWithRetry from "~/utils/lazyWithRetry";
-
-const PresentationMode = lazyWithRetry(
-  () => import("~/scenes/Document/components/PresentationMode")
-);
-
-function Presentation() {
-  const { ui } = useStores();
-
-  if (!ui.presentationData) {
-    return null;
-  }
-
-  return (
-    <Suspense fallback={null}>
-      <PresentationMode
-        title={ui.presentationData.title}
-        icon={ui.presentationData.icon}
-        iconColor={ui.presentationData.color}
-        data={ui.presentationData.data}
-        onClose={() => {
-          ui.setPresentingDocument(null);
-        }}
-      />
-    </Suspense>
-  );
-}
-
-export default observer(Presentation);

app/components/RevisionListItem.tsx

@@ -125,7 +125,7 @@ const RevisionListItem = ({ item, document, ...rest }: Props) => {
   }
 
   return (
-    <ActionContextProvider value={{ activeModels: [document] }}>
+    <ActionContextProvider value={{ activeDocumentId: document.id }}>
       <ContextMenu
         action={contextMenuAction}
         ariaLabel={t("Revision options")}

app/components/RightSidebarContext.tsx

@@ -1,57 +0,0 @@
-import * as React from "react";
-
-type SetSidebarFn = (content: React.ReactNode) => void;
-
-const RightSidebarSetterContext = React.createContext<SetSidebarFn | null>(
-  null
-);
-const RightSidebarContentContext = React.createContext<React.ReactNode>(null);
-
-/**
- * Provider that holds right sidebar content state. Wrap at the layout level
- * so that scenes can set sidebar content via the setter hook.
- */
-export function RightSidebarProvider({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  const [content, setContent] = React.useState<React.ReactNode>(null);
-
-  return (
-    <RightSidebarSetterContext.Provider value={setContent}>
-      <RightSidebarContentContext.Provider value={content}>
-        {children}
-      </RightSidebarContentContext.Provider>
-    </RightSidebarSetterContext.Provider>
-  );
-}
-
-/**
- * Returns a stable setter function to set the right sidebar content.
- * Used by scenes (e.g. Document) to populate the sidebar.
- */
-export function useSetRightSidebar(): SetSidebarFn {
-  const setter = React.useContext(RightSidebarSetterContext);
-  if (!setter) {
-    throw new Error(
-      "useSetRightSidebar must be used within a RightSidebarProvider"
-    );
-  }
-  return setter;
-}
-
-/**
- * Returns the current right sidebar content. Used by Layout to render
- * the sidebar.
- */
-export function useRightSidebarContent(): React.ReactNode {
-  return React.useContext(RightSidebarContentContext);
-}
-
-/**
- * Context indicating whether the Right sidebar wrapper is already rendered
- * by an ancestor. When true, SidebarLayout skips rendering its own Right
- * wrapper to avoid duplicate animated containers.
- */
-export const RightSidebarWrappedContext = React.createContext(false);

app/components/SearchActions.ts

@@ -1,5 +1,4 @@
 import { useKBar } from "kbar";
-import { observer } from "mobx-react";
 import { useEffect, useRef } from "react";
 import { Minute } from "@shared/utils/time";
 import { searchDocumentsForQuery } from "~/actions/definitions/documents";
@@ -15,7 +14,7 @@ interface CacheEntry {
 // Cache configuration
 const cacheTTL = Minute.ms * 5;
 
-function SearchActions() {
+export default function SearchActions() {
   const { searches, documents } = useStores();
 
   // Cache structure: Map of search queries to timestamp of last search
@@ -59,5 +58,3 @@ function SearchActions() {
 
   return null;
 }
-
-export default observer(SearchActions);

app/components/SearchListItem.tsx

@@ -0,0 +1,167 @@
+import {
+  useFocusEffect,
+  useRovingTabIndex,
+} from "@getoutline/react-roving-tabindex";
+import { observer } from "mobx-react";
+import * as React from "react";
+import { Link } from "react-router-dom";
+import styled, { css } from "styled-components";
+import breakpoint from "styled-components-breakpoint";
+import { s, hover, ellipsis } from "@shared/styles";
+import type Document from "~/models/Document";
+import Highlight, { Mark } from "~/components/Highlight";
+import { sharedModelPath } from "~/utils/routeHelpers";
+
+type Props = {
+  document: Document;
+  highlight: string;
+  context: string | undefined;
+  showParentDocuments?: boolean;
+  showCollection?: boolean;
+  showPublished?: boolean;
+  shareId?: string;
+  onClick?: React.MouseEventHandler<HTMLAnchorElement>;
+};
+const SEARCH_RESULT_REGEX = /<b\b[^>]*>(.*?)<\/b>/gi;
+
+function replaceResultMarks(tag: string) {
+  // don't use SEARCH_RESULT_REGEX here as it causes
+  // an infinite loop to trigger a regex inside it's own callback
+  return tag.replace(/<b\b[^>]*>(.*?)<\/b>/gi, "$1");
+}
+
+function DocumentListItem(
+  props: Props,
+  ref: React.RefObject<HTMLAnchorElement>
+) {
+  const { document, highlight, context, shareId, ...rest } = props;
+
+  let itemRef: React.Ref<HTMLAnchorElement> =
+    React.useRef<HTMLAnchorElement>(null);
+  if (ref) {
+    itemRef = ref;
+  }
+
+  const { focused, ...rovingTabIndex } = useRovingTabIndex(itemRef, false);
+  useFocusEffect(focused, itemRef);
+
+  return (
+    <DocumentLink
+      ref={itemRef}
+      dir={document.dir}
+      to={{
+        pathname: shareId
+          ? sharedModelPath(shareId, document.url)
+          : document.url,
+        search: highlight ? `?q=${encodeURIComponent(highlight)}` : undefined,
+        state: {
+          title: document.titleWithDefault,
+        },
+      }}
+      {...rest}
+      {...rovingTabIndex}
+      onClick={(ev) => {
+        if (rest.onClick) {
+          rest.onClick(ev);
+        }
+        rovingTabIndex.onClick(ev);
+      }}
+    >
+      <Content>
+        <Heading dir={document.dir}>
+          <Title
+            text={document.titleWithDefault}
+            highlight={highlight}
+            dir={document.dir}
+          />
+        </Heading>
+
+        {
+          <ResultContext
+            text={context}
+            highlight={highlight ? SEARCH_RESULT_REGEX : undefined}
+            processResult={replaceResultMarks}
+          />
+        }
+      </Content>
+    </DocumentLink>
+  );
+}
+
+const Content = styled.div`
+  flex-grow: 1;
+  flex-shrink: 1;
+  min-width: 0;
+`;
+
+const DocumentLink = styled(Link)<{
+  $isStarred?: boolean;
+  $menuOpen?: boolean;
+}>`
+  display: flex;
+  align-items: center;
+  padding: 6px 12px;
+  max-height: 50vh;
+  cursor: var(--pointer);
+
+  &:not(:last-child) {
+    margin-bottom: 4px;
+  }
+
+  &:focus-visible {
+    outline: none;
+  }
+
+  ${breakpoint("tablet")`
+    width: auto;
+  `};
+
+  &:${hover},
+  &:active,
+  &:focus,
+  &:focus-within {
+    background: ${s("listItemHoverBackground")};
+  }
+
+  ${(props) =>
+    props.$menuOpen &&
+    css`
+      background: ${s("listItemHoverBackground")};
+    `}
+`;
+
+const Heading = styled.h4<{ rtl?: boolean }>`
+  display: flex;
+  justify-content: ${(props) => (props.rtl ? "flex-end" : "flex-start")};
+  align-items: center;
+  height: 22px;
+  margin-top: 0;
+  margin-bottom: 0.25em;
+  overflow: hidden;
+  white-space: nowrap;
+  color: ${s("text")};
+`;
+
+const Title = styled(Highlight)`
+  max-width: 90%;
+  ${ellipsis()}
+
+  ${Mark} {
+    padding: 0;
+  }
+`;
+
+const ResultContext = styled(Highlight)`
+  display: block;
+  color: ${s("textTertiary")};
+  font-size: 14px;
+  margin-top: -0.25em;
+  margin-bottom: 0;
+  ${ellipsis()}
+
+  ${Mark} {
+    padding: 0;
+  }
+`;
+
+export default observer(React.forwardRef(DocumentListItem));

app/components/SearchPopover.tsx

@@ -0,0 +1,246 @@
+import debounce from "lodash/debounce";
+import { observer } from "mobx-react";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import styled from "styled-components";
+import Empty from "~/components/Empty";
+import { Outline } from "~/components/Input";
+import InputSearch from "~/components/InputSearch";
+import Placeholder from "~/components/List/Placeholder";
+import PaginatedList from "~/components/PaginatedList";
+import {
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+} from "~/components/primitives/Popover";
+import { id as bodyContentId } from "~/components/SkipNavContent";
+import useKeyDown from "~/hooks/useKeyDown";
+import useStores from "~/hooks/useStores";
+import type { SearchResult } from "~/types";
+import SearchListItem from "./SearchListItem";
+
+interface Props extends React.HTMLAttributes<HTMLInputElement> {
+  shareId: string;
+  className?: string;
+}
+
+function SearchPopover({ shareId, className }: Props) {
+  const { t } = useTranslation();
+  const { documents } = useStores();
+  const focusRef = React.useRef<HTMLElement | null>(null);
+
+  const [open, setOpen] = React.useState(false);
+  const [query, setQuery] = React.useState("");
+
+  const [searchResults, setSearchResults] = React.useState<
+    SearchResult[] | undefined
+  >();
+  const [cachedQuery, setCachedQuery] = React.useState(query);
+  const [cachedSearchResults, setCachedSearchResults] = React.useState<
+    SearchResult[] | undefined
+  >(searchResults);
+
+  React.useEffect(() => {
+    if (searchResults) {
+      setCachedQuery(query);
+      setCachedSearchResults(searchResults);
+      setOpen(true);
+    }
+  }, [searchResults, query]);
+
+  // Clear search results when the query changes to prevent stale results
+  React.useEffect(() => {
+    setSearchResults(undefined);
+  }, [query]);
+
+  const performSearch = React.useCallback(
+    async ({ query: searchQuery, ...options }) => {
+      if (searchQuery?.length > 0) {
+        const response = await documents.search({
+          query: searchQuery,
+          shareId,
+          ...options,
+        });
+
+        if (response.length) {
+          setSearchResults((state) => [...(state ?? []), ...response]);
+        }
+
+        return response;
+      }
+      return undefined;
+    },
+    [documents, shareId]
+  );
+
+  const handleSearchInputChange = React.useMemo(
+    () =>
+      debounce(async (event: React.ChangeEvent<HTMLInputElement>) => {
+        const { value } = event.target;
+        const trimmedValue = value.trim();
+        setQuery(trimmedValue);
+        setOpen(!!trimmedValue);
+      }, 300),
+    [cachedQuery]
+  );
+
+  const searchInputRef = React.useRef<HTMLInputElement>(null);
+  const firstSearchItem = React.useRef<HTMLAnchorElement>(null);
+
+  const handleEscapeList = React.useCallback(
+    () => searchInputRef?.current?.focus(),
+    [searchInputRef]
+  );
+
+  const handleSearchInputFocus = React.useCallback(() => {
+    focusRef.current = searchInputRef.current;
+  }, [searchInputRef]);
+
+  const handleKeyDown = React.useCallback(
+    (ev: React.KeyboardEvent<HTMLInputElement>) => {
+      if (ev.nativeEvent.isComposing) {
+        return;
+      }
+
+      if (ev.key === "Enter") {
+        if (searchResults) {
+          setOpen(true);
+        }
+      }
+
+      if (ev.key === "ArrowDown" && !ev.shiftKey) {
+        if (ev.currentTarget.value.length) {
+          const atEnd =
+            ev.currentTarget.value.length === ev.currentTarget.selectionStart;
+
+          if (atEnd) {
+            setOpen(true);
+          }
+
+          if (open || atEnd) {
+            ev.preventDefault();
+            firstSearchItem.current?.focus();
+          }
+        }
+      }
+
+      if (ev.key === "ArrowUp") {
+        if (open) {
+          setOpen(false);
+          if (!ev.shiftKey) {
+            ev.preventDefault();
+          }
+        }
+
+        if (ev.currentTarget.value) {
+          if (ev.currentTarget.selectionEnd === 0) {
+            ev.currentTarget.selectionStart = 0;
+            ev.currentTarget.selectionEnd = ev.currentTarget.value.length;
+            ev.preventDefault();
+          }
+        }
+      }
+
+      if (ev.key === "Escape") {
+        if (open) {
+          setOpen(false);
+          ev.preventDefault();
+        }
+      }
+    },
+    [open, searchResults]
+  );
+
+  const handleSearchItemClick = React.useCallback(() => {
+    setOpen(false);
+    if (searchInputRef.current) {
+      searchInputRef.current.value = "";
+      focusRef.current = document.getElementById(bodyContentId);
+    }
+  }, [searchInputRef]);
+
+  useKeyDown("/", (ev) => {
+    if (
+      searchInputRef.current &&
+      searchInputRef.current !== document.activeElement
+    ) {
+      searchInputRef.current.focus();
+      ev.preventDefault();
+    }
+  });
+
+  return (
+    <Popover open={open} onOpenChange={setOpen} modal={true}>
+      <PopoverAnchor>
+        <StyledInputSearch
+          role="combobox"
+          aria-controls="search-results"
+          aria-expanded={open}
+          aria-haspopup="listbox"
+          ref={searchInputRef}
+          onChange={handleSearchInputChange}
+          onFocus={handleSearchInputFocus}
+          onKeyDown={handleKeyDown}
+          className={className}
+          label={t("Search")}
+          labelHidden
+        />
+      </PopoverAnchor>
+      <PopoverContent
+        id="search-results"
+        aria-label={t("Results")}
+        side="bottom"
+        align="start"
+        shrink
+        onEscapeKeyDown={handleEscapeList}
+        onOpenAutoFocus={(e) => e.preventDefault()}
+        onInteractOutside={(event) => {
+          const target = event.target as Element | null;
+          if (target === searchInputRef.current) {
+            event.preventDefault();
+          }
+        }}
+      >
+        <PaginatedList<SearchResult>
+          role="listbox"
+          options={{ query, snippetMinWords: 10, snippetMaxWords: 11 }}
+          items={cachedSearchResults}
+          fetch={performSearch}
+          onEscape={handleEscapeList}
+          empty={
+            <NoResults>{t("No results for {{query}}", { query })}</NoResults>
+          }
+          loading={<PlaceholderList count={3} header={{ height: 20 }} />}
+          renderItem={(item, index) => (
+            <SearchListItem
+              key={item.document.id}
+              shareId={shareId}
+              ref={index === 0 ? firstSearchItem : undefined}
+              document={item.document}
+              context={item.context}
+              highlight={cachedQuery}
+              onClick={handleSearchItemClick}
+            />
+          )}
+        />
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+const NoResults = styled(Empty)`
+  padding: 0 12px;
+  margin: 6px 0;
+`;
+
+const PlaceholderList = styled(Placeholder)`
+  padding: 6px 12px;
+`;
+
+const StyledInputSearch = styled(InputSearch)`
+  ${Outline} {
+    border-radius: 16px;
+  }
+`;
+
+export default observer(SearchPopover);

app/components/Sharing/Collection/AccessControlList.tsx

@@ -16,6 +16,7 @@ import Scrollable from "~/components/Scrollable";
 import useCurrentTeam from "~/hooks/useCurrentTeam";
 import useMaxHeight from "~/hooks/useMaxHeight";
 import usePolicy from "~/hooks/usePolicy";
+import useRequest from "~/hooks/useRequest";
 import useStores from "~/hooks/useStores";
 import type { Permission } from "~/types";
 import { EmptySelectValue } from "~/types";
@@ -37,12 +38,10 @@ type Props = {
   invitedInSession: string[];
   /** Whether the popover is visible. */
   visible: boolean;
-  /** Whether the share data is currently loading. */
-  loading: boolean;
 };
 
 export const AccessControlList = observer(
-  ({ collection, share, invitedInSession, visible, loading }: Props) => {
+  ({ collection, share, invitedInSession, visible }: Props) => {
     const { memberships, groupMemberships } = useStores();
     const team = useCurrentTeam();
     const can = usePolicy(collection);
@@ -50,13 +49,35 @@ export const AccessControlList = observer(
     const theme = useTheme();
     const collectionId = collection.id;
 
+    const { request: fetchMemberships, loading: membershipLoading } =
+      useRequest(
+        React.useCallback(
+          () => memberships.fetchAll({ id: collectionId }),
+          [memberships, collectionId]
+        )
+      );
+
+    const { request: fetchGroupMemberships, loading: groupMembershipLoading } =
+      useRequest(
+        React.useCallback(
+          () => groupMemberships.fetchAll({ collectionId }),
+          [groupMemberships, collectionId]
+        )
+      );
+
     const groupMembershipsInCollection =
       groupMemberships.inCollection(collectionId);
     const membershipsInCollection = memberships.inCollection(collectionId);
     const hasMemberships =
       groupMembershipsInCollection.length > 0 ||
       membershipsInCollection.length > 0;
-    const showLoading = !hasMemberships && loading;
+    const showLoading =
+      !hasMemberships && (membershipLoading || groupMembershipLoading);
+
+    React.useEffect(() => {
+      void fetchMemberships();
+      void fetchGroupMemberships();
+    }, [fetchMemberships, fetchGroupMemberships]);
 
     const containerRef = React.useRef<HTMLDivElement | null>(null);
     const publicAccessRef = React.useRef<HTMLDivElement | null>(null);

app/components/Sharing/Collection/SharePopover.tsx

@@ -18,7 +18,6 @@ import useCurrentTeam from "~/hooks/useCurrentTeam";
 import useKeyDown from "~/hooks/useKeyDown";
 import usePolicy from "~/hooks/usePolicy";
 import usePrevious from "~/hooks/usePrevious";
-import useShareDataLoader from "~/hooks/useShareDataLoader";
 import useStores from "~/hooks/useStores";
 import type { Permission } from "~/types";
 import { collectionPath, urlify } from "~/utils/routeHelpers";
@@ -36,22 +35,11 @@ type Props = {
   onRequestClose: () => void;
   /** Whether the popover is visible. */
   visible: boolean;
-  /** Whether the share data is currently loading, managed externally. */
-  loading?: boolean;
 };
 
-function SharePopover({
-  collection,
-  visible,
-  onRequestClose,
-  loading: externalLoading,
-}: Props) {
+function SharePopover({ collection, visible, onRequestClose }: Props) {
   const team = useCurrentTeam();
   const { groupMemberships, users, groups, memberships, shares } = useStores();
-  const { preload, loading: internalLoading } = useShareDataLoader({
-    collection,
-  });
-  const loading = externalLoading ?? internalLoading;
   const { t } = useTranslation();
   const can = usePolicy(collection);
   const [query, setQuery] = React.useState("");
@@ -106,12 +94,10 @@ function SharePopover({
 
   React.useEffect(() => {
     if (visible) {
-      if (externalLoading === undefined) {
-        preload();
-      }
+      void collection.share();
       setHasRendered(true);
     }
-  }, [visible, externalLoading, preload]);
+  }, [collection, visible]);
 
   React.useEffect(() => {
     if (prevPendingIds && pendingIds.length > prevPendingIds.length) {
@@ -382,7 +368,6 @@ function SharePopover({
           share={share}
           invitedInSession={invitedInSession}
           visible={visible}
-          loading={loading}
         />
       </div>
     </Wrapper>

app/components/Sharing/Document/AccessControlList.tsx

@@ -4,6 +4,7 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled, { useTheme } from "styled-components";
 import Squircle from "@shared/components/Squircle";
+import { Pagination } from "@shared/constants";
 import { s } from "@shared/styles";
 import { CollectionPermission, IconType } from "@shared/types";
 import { determineIconType } from "@shared/utils/icon";
@@ -42,8 +43,6 @@ type Props = {
   onRequestClose: () => void;
   /** Whether the popover is visible. */
   visible: boolean;
-  /** Whether the share data is currently loading. */
-  loading: boolean;
 };
 
 export const AccessControlList = observer(
@@ -54,14 +53,13 @@ export const AccessControlList = observer(
     sharedParent,
     onRequestClose,
     visible,
-    loading,
   }: Props) => {
     const { t } = useTranslation();
     const theme = useTheme();
     const collection = document.collection;
     const usersInCollection = useUsersInCollection(collection);
     const user = useCurrentUser();
-    const { groupMemberships } = useStores();
+    const { userMemberships, groupMemberships } = useStores();
     const collectionSharingDisabled = document.collection?.sharing === false;
     const team = useCurrentTeam();
     const can = usePolicy(document);
@@ -77,10 +75,36 @@ export const AccessControlList = observer(
       margin: 24,
     });
 
+    const { loading: userMembershipLoading, request: fetchUserMemberships } =
+      useRequest(
+        React.useCallback(
+          () =>
+            userMemberships.fetchDocumentMemberships({
+              id: documentId,
+              limit: Pagination.defaultLimit,
+            }),
+          [userMemberships, documentId]
+        )
+      );
+
+    const { loading: groupMembershipLoading, request: fetchGroupMemberships } =
+      useRequest(
+        React.useCallback(
+          () => groupMemberships.fetchAll({ documentId }),
+          [groupMemberships, documentId]
+        )
+      );
+
     const hasMemberships =
       groupMemberships.inDocument(documentId)?.length > 0 ||
       document.members.length > 0;
-    const showLoading = !hasMemberships && loading;
+    const showLoading =
+      !hasMemberships && (groupMembershipLoading || userMembershipLoading);
+
+    React.useEffect(() => {
+      void fetchUserMemberships();
+      void fetchGroupMemberships();
+    }, [fetchUserMemberships, fetchGroupMemberships]);
 
     React.useEffect(() => {
       calcMaxHeight();

app/components/Sharing/Document/DocumentMemberList.tsx

@@ -89,11 +89,7 @@ function DocumentMemberList({ document, invitedInSession }: Props) {
   const members = React.useMemo(
     () =>
       orderBy(
-        Array.from(
-          new Map(
-            document.members.map((memberUser) => [memberUser.id, memberUser])
-          ).values()
-        ),
+        document.members,
         (memberUser) =>
           (invitedInSession.includes(memberUser.id) ? "_" : "") +
           memberUser.name.toLocaleLowerCase(),
@@ -128,19 +124,12 @@ function DocumentMemberList({ document, invitedInSession }: Props) {
 
   return (
     <>
-      {Array.from(
-        new Map(
-          groupMemberships
-            .inDocument(document.id)
-            .map((membership) => [membership.group.id, membership])
-        ).values()
-      )
+      {groupMemberships
+        .inDocument(document.id)
         .sort((a, b) =>
           (
             (invitedInSession.includes(a.group.id) ? "_" : "") + a.group.name
-          ).localeCompare(
-            (invitedInSession.includes(b.group.id) ? "_" : "") + b.group.name
-          )
+          ).localeCompare(b.group.name)
         )
         .map((membership) => {
           const MaybeLink = membership?.source ? StyledLink : React.Fragment;

app/components/Sharing/Document/SharePopover.tsx

@@ -18,7 +18,6 @@ import useCurrentTeam from "~/hooks/useCurrentTeam";
 import useKeyDown from "~/hooks/useKeyDown";
 import usePolicy from "~/hooks/usePolicy";
 import usePrevious from "~/hooks/usePrevious";
-import useShareDataLoader from "~/hooks/useShareDataLoader";
 import useStores from "~/hooks/useStores";
 import type { Permission } from "~/types";
 import { documentPath, urlify } from "~/utils/routeHelpers";
@@ -36,16 +35,9 @@ type Props = {
   onRequestClose: () => void;
   /** Whether the popover is visible. */
   visible: boolean;
-  /** Whether the share data is currently loading, managed externally. */
-  loading?: boolean;
 };
 
-function SharePopover({
-  document,
-  onRequestClose,
-  visible,
-  loading: externalLoading,
-}: Props) {
+function SharePopover({ document, onRequestClose, visible }: Props) {
   const team = useCurrentTeam();
   const { t } = useTranslation();
   const can = usePolicy(document);
@@ -54,10 +46,6 @@ function SharePopover({
   const sharedParent = shares.getByDocumentParents(document);
   const [hasRendered, setHasRendered] = React.useState(visible);
   const { users, userMemberships, groups, groupMemberships } = useStores();
-  const { preload, loading: internalLoading } = useShareDataLoader({
-    document,
-  });
-  const loading = externalLoading ?? internalLoading;
   const [query, setQuery] = React.useState("");
   const [picker, showPicker, hidePicker] = useBoolean();
   const [invitedInSession, setInvitedInSession] = React.useState<string[]>([]);
@@ -91,14 +79,13 @@ function SharePopover({
     }
   );
 
+  // Fetch sharefocus the link button when the popover is opened
   React.useEffect(() => {
     if (visible) {
-      if (externalLoading === undefined) {
-        preload();
-      }
+      void document.share();
       setHasRendered(true);
     }
-  }, [visible, externalLoading, preload]);
+  }, [document, hidePicker, visible]);
 
   // Hide the picker when the popover is closed
   React.useEffect(() => {
@@ -390,7 +377,6 @@ function SharePopover({
           share={share}
           sharedParent={sharedParent}
           visible={visible}
-          loading={loading}
           onRequestClose={onRequestClose}
         />
       </div>

app/components/Sharing/components/Suggestions.tsx

@@ -14,7 +14,6 @@ import type User from "~/models/User";
 import ArrowKeyNavigation from "~/components/ArrowKeyNavigation";
 import type { IAvatar } from "~/components/Avatar";
 import { Avatar, GroupAvatar, AvatarSize } from "~/components/Avatar";
-import ButtonLink from "~/components/ButtonLink";
 import Empty from "~/components/Empty";
 import Placeholder from "~/components/List/Placeholder";
 import Scrollable from "~/components/Scrollable";
@@ -22,7 +21,6 @@ import useCurrentUser from "~/hooks/useCurrentUser";
 import useMaxHeight from "~/hooks/useMaxHeight";
 import useStores from "~/hooks/useStores";
 import useThrottledCallback from "~/hooks/useThrottledCallback";
-import { GroupMembersPopover } from "./GroupMembersPopover";
 import { InviteIcon, ListItem } from "./ListItem";
 
 type Suggestion = IAvatar & {
@@ -150,18 +148,9 @@ export const Suggestions = observer(
       if (suggestion instanceof Group) {
         return {
           title: suggestion.name,
-          subtitle: (
-            // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
-            <span onClick={(ev) => ev.stopPropagation()}>
-              <GroupMembersPopover group={suggestion}>
-                <StyledButtonLink>
-                  {t("{{ count }} member", {
-                    count: suggestion.memberCount,
-                  })}
-                </StyledButtonLink>
-              </GroupMembersPopover>
-            </span>
-          ),
+          subtitle: t("{{ count }} member", {
+            count: suggestion.memberCount,
+          }),
           image: <GroupAvatar group={suggestion} />,
         };
       }
@@ -204,8 +193,8 @@ export const Suggestions = observer(
             ...pending.map((suggestion) => (
               <PendingListItem
                 keyboardNavigation
-                key={suggestion.id}
                 {...getListItemProps(suggestion)}
+                key={suggestion.id}
                 onClick={() => removePendingId(suggestion.id)}
                 onKeyDown={(ev) => {
                   if (ev.key === "Enter") {
@@ -223,14 +212,12 @@ export const Suggestions = observer(
               />
             )),
             pending.length > 0 &&
-              (suggestionsWithPending.length > 0 || isEmpty) && (
-                <Separator key="separator" />
-              ),
+              (suggestionsWithPending.length > 0 || isEmpty) && <Separator />,
             ...suggestionsWithPending.map((suggestion) => (
               <ListItem
                 keyboardNavigation
-                key={suggestion.id}
                 {...getListItemProps(suggestion as User)}
+                key={suggestion.id}
                 onClick={() => addPendingId(suggestion.id)}
                 onKeyDown={(ev) => {
                   if (ev.key === "Enter") {
@@ -243,9 +230,7 @@ export const Suggestions = observer(
               />
             )),
             isEmpty && (
-              <Empty key="empty" style={{ marginTop: 22 }}>
-                {t("No matches")}
-              </Empty>
+              <Empty style={{ marginTop: 22 }}>{t("No matches")}</Empty>
             ),
           ]}
         </ArrowKeyNavigation>
@@ -279,13 +264,6 @@ const Separator = styled.div`
   margin: 12px 0;
 `;
 
-const StyledButtonLink = styled(ButtonLink)`
-  color: ${s("textTertiary")};
-  &:hover {
-    text-decoration: underline;
-  }
-`;
-
 const ScrollableContainer = styled(Scrollable)`
   padding: 12px 24px;
   margin: -12px -24px;

app/components/Sidebar/Right.tsx

@@ -8,23 +8,19 @@ import ErrorBoundary from "~/components/ErrorBoundary";
 import Flex from "~/components/Flex";
 import ResizeBorder from "~/components/Sidebar/components/ResizeBorder";
 import useStores from "~/hooks/useStores";
-import useWindowScrollbarWidth from "~/hooks/useWindowScrollbarWidth";
 import { sidebarAppearDuration } from "~/styles/animations";
 
 interface Props extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
   border?: boolean;
-  /** When true, skip the entrance animation and render at full width immediately. */
-  skipInitialAnimation?: boolean;
 }
 
-function Right({ children, border, className, skipInitialAnimation }: Props) {
+function Right({ children, border, className }: Props) {
   const theme = useTheme();
   const { ui } = useStores();
   const [isResizing, setResizing] = React.useState(false);
   const maxWidth = theme.sidebarMaxWidth;
   const minWidth = theme.sidebarMinWidth + 16; // padding
-  const windowScrollbarWidth = useWindowScrollbarWidth();
 
   const handleDrag = React.useCallback(
     (event: MouseEvent) => {
@@ -71,20 +67,16 @@ function Right({ children, border, className, skipInitialAnimation }: Props) {
 
   const style = React.useMemo(
     () => ({
-      width: windowScrollbarWidth
-        ? `${ui.sidebarRightWidth - windowScrollbarWidth}px`
-        : `${ui.sidebarRightWidth}px`,
+      width: `${ui.sidebarRightWidth}px`,
     }),
-    [ui.sidebarRightWidth, windowScrollbarWidth]
+    [ui.sidebarRightWidth]
   );
 
   const animationProps = {
-    initial: skipInitialAnimation
-      ? false
-      : {
-          width: 0,
-          opacity: 0.9,
-        },
+    initial: {
+      width: 0,
+      opacity: 0.9,
+    },
     animate: {
       transition: isResizing
         ? { duration: 0 }

app/components/Sidebar/Settings.tsx

@@ -31,7 +31,7 @@ function SettingsSidebar() {
 
   const groupedConfig = groupBy(
     configs.filter((item) =>
-      item.group === t("Integrations") && item.pluginId
+      item.group === "Integrations" && item.pluginId
         ? integrations.findByService(item.pluginId)
         : true
     ),
@@ -76,8 +76,7 @@ function SettingsSidebar() {
                     to={item.path}
                     onClickIntent={item.preload}
                     active={
-                      item.path.startsWith(settingsPath("templates")) ||
-                      item.path.startsWith(settingsPath("groups"))
+                      item.path.startsWith(settingsPath("templates"))
                         ? location.pathname.startsWith(item.path)
                         : undefined
                     }

app/components/Sidebar/Shared.tsx

@@ -1,15 +1,11 @@
-import { useKBar } from "kbar";
 import { observer } from "mobx-react";
-import { SearchIcon } from "outline-icons";
-import { useCallback, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
-import { s } from "@shared/styles";
-import { ProsemirrorHelper } from "@shared/utils/ProsemirrorHelper";
-import { metaDisplay } from "@shared/utils/keyboard";
+import { hover } from "@shared/styles";
 import type Share from "~/models/Share";
 import Flex from "~/components/Flex";
 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";
@@ -22,6 +18,8 @@ import Section from "./components/Section";
 import { SharedCollectionLink } from "./components/SharedCollectionLink";
 import { SharedDocumentLink } from "./components/SharedDocumentLink";
 import SidebarButton from "./components/SidebarButton";
+import { useEffect } from "react";
+import { ProsemirrorHelper } from "@shared/utils/ProsemirrorHelper";
 
 type Props = {
   share: Share;
@@ -32,7 +30,6 @@ function SharedSidebar({ share }: Props) {
   const user = useCurrentUser({ rejectOnEmpty: false });
   const { ui, documents, collections } = useStores();
   const { t } = useTranslation();
-  const { query } = useKBar();
 
   const teamAvailable = !!team?.name;
   const rootNode = share.tree;
@@ -42,10 +39,6 @@ function SharedSidebar({ share }: Props) {
     ? ProsemirrorHelper.isEmptyData(collection?.data)
     : false;
 
-  const handleOpenSearch = useCallback(() => {
-    query.toggle();
-  }, [query]);
-
   useEffect(() => {
     ui.tocVisible = share.showTOC;
   }, []);
@@ -55,7 +48,7 @@ function SharedSidebar({ share }: Props) {
   }
 
   return (
-    <Sidebar canCollapse={false}>
+    <StyledSidebar $hoverTransition={!teamAvailable} canCollapse={false}>
       {teamAvailable && (
         <SidebarButton
           title={team.name}
@@ -72,11 +65,9 @@ function SharedSidebar({ share }: Props) {
       )}
       <ScrollContainer topShadow flex>
         <TopSection>
-          <SearchButton onClick={handleOpenSearch}>
-            <SearchIcon size={20} />
-            <SearchLabel>{t("Search")}</SearchLabel>
-            <Shortcut>{metaDisplay}K</Shortcut>
-          </SearchButton>
+          <SearchWrapper>
+            <StyledSearchPopover shareId={shareId} />
+          </SearchWrapper>
         </TopSection>
         <Section>
           {share.collectionId ? (
@@ -99,7 +90,7 @@ function SharedSidebar({ share }: Props) {
           )}
         </Section>
       </ScrollContainer>
-    </Sidebar>
+    </StyledSidebar>
   );
 }
 
@@ -112,34 +103,43 @@ const TopSection = styled(Flex)`
   flex-shrink: 0;
 `;
 
-const SearchButton = styled.button`
-  display: flex;
-  align-items: center;
-  gap: 8px;
+const SearchWrapper = styled.div`
   width: 100%;
-  padding: 6px 12px;
+`;
+
+const StyledSearchPopover = styled(SearchPopover)`
+  width: 100%;
+  transition: width 100ms ease-out;
   margin: 8px 0;
-  border: 1px solid ${s("inputBorder")};
-  border-radius: 16px;
-  background: ${s("background")};
-  color: ${s("textTertiary")};
-  cursor: var(--pointer);
-  font-size: 14px;
-
-  &:hover {
-    border-color: ${s("inputBorderFocused")};
-    color: ${s("textSecondary")};
-  }
 `;
 
-const SearchLabel = styled.span`
-  flex-grow: 1;
-  text-align: left;
+const ToggleWrapper = styled.div`
+  position: absolute;
+  right: 0;
+  opacity: 0;
+  transform: translateX(10px);
+  transition:
+    opacity 100ms ease-out,
+    transform 100ms ease-out;
 `;
 
-const Shortcut = styled.span`
-  flex-shrink: 0;
-  font-size: 13px;
+const StyledSidebar = styled(Sidebar)<{ $hoverTransition: boolean }>`
+  ${({ $hoverTransition }) =>
+    $hoverTransition &&
+    `
+      @media (hover: hover) {
+        &:${hover} {
+        ${StyledSearchPopover} {
+          width: 85%;
+        }
+
+        ${ToggleWrapper} {
+          opacity: 1;
+          transform: translateX(0);
+          }
+        }
+      }
+    `}
 `;
 
 export default observer(SharedSidebar);

app/components/Sidebar/Sidebar.tsx

@@ -1,6 +1,5 @@
 import { observer } from "mobx-react";
 import * as React from "react";
-import { useWebHaptics } from "web-haptics/react";
 import { useLocation } from "react-router-dom";
 import styled, { css, useTheme } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
@@ -54,7 +53,6 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(function Sidebar_(
   const collapsed = ui.sidebarIsClosed && canCollapse;
   const maxWidth = theme.sidebarMaxWidth;
   const minWidth = theme.sidebarMinWidth + 16; // padding
-  const { trigger } = useWebHaptics();
 
   const [offset, setOffset] = React.useState(0);
   const [isHovering, setHovering] = React.useState(false);
@@ -226,11 +224,6 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(function Sidebar_(
     [width]
   );
 
-  const handleCloseSidebar = () => {
-    trigger("light");
-    ui.toggleMobileSidebar();
-  };
-
   return (
     <TooltipProvider>
       <Container
@@ -282,7 +275,7 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(function Sidebar_(
           onDoubleClick={ui.sidebarIsClosed ? undefined : handleReset}
         />
       </Container>
-      {ui.mobileSidebarVisible && <Backdrop onClick={handleCloseSidebar} />}
+      {ui.mobileSidebarVisible && <Backdrop onClick={ui.toggleMobileSidebar} />}
     </TooltipProvider>
   );
 });

app/components/Sidebar/components/CollectionLink.tsx

@@ -127,7 +127,7 @@ const CollectionLink: React.FC<Props> = ({
   });
 
   return (
-    <ActionContextProvider value={{ activeModels: [collection] }}>
+    <ActionContextProvider value={{ activeCollectionId: collection.id }}>
       <Relative ref={mergeRefs([parentRef, dropRef])}>
         <DropToImport collectionId={collection.id}>
           <SidebarLink
@@ -143,7 +143,7 @@ const CollectionLink: React.FC<Props> = ({
             icon={
               <CollectionIcon collection={collection} expanded={expanded} />
             }
-            $showActions={menuOpen}
+            showActions={menuOpen}
             isActiveDrop={isOver && canDrop}
             isActive={(
               match,

app/components/Sidebar/components/DocumentLink.tsx

@@ -265,30 +265,27 @@ function InnerDocumentLink(
       };
     });
 
-  const insertDraftChild = !!(
-    activeDocument?.isDraft &&
-    activeDocument?.isActive &&
-    activeDocument?.parentDocumentId === node.id
-  );
+  const nodeChildren = React.useMemo(() => {
+    const insertDraftDocument =
+      activeDocument?.isDraft &&
+      activeDocument?.isActive &&
+      activeDocument?.parentDocumentId === node.id;
 
-  // Only subscribe to asNavigationNode when this node is the parent of an
-  // active draft. This avoids every DocumentLink observer re-rendering on
-  // every title keystroke.
-  const draftNavNode = insertDraftChild
-    ? activeDocument?.asNavigationNode
-    : undefined;
-
-  const nodeChildren = React.useMemo(
-    () =>
-      collection && draftNavNode
-        ? sortNavigationNodes(
-            [draftNavNode, ...node.children],
-            collection.sort,
-            false
-          )
-        : node.children,
-    [draftNavNode, collection, node]
-  );
+    return collection && insertDraftDocument
+      ? sortNavigationNodes(
+          [activeDocument?.asNavigationNode, ...node.children],
+          collection.sort,
+          false
+        )
+      : node.children;
+  }, [
+    activeDocument?.isActive,
+    activeDocument?.isDraft,
+    activeDocument?.parentDocumentId,
+    activeDocument?.asNavigationNode,
+    collection,
+    node,
+  ]);
 
   const doc = documents.get(node.id);
   const title = doc?.title || node.title || t("Untitled");
@@ -419,7 +416,7 @@ function InnerDocumentLink(
   return (
     <ActionContextProvider
       value={{
-        activeModels: document ? [document] : [],
+        activeDocumentId: node.id,
       }}
     >
       <Relative ref={parentRef}>
@@ -454,7 +451,7 @@ function InnerDocumentLink(
                 isActiveDrop={isOverReparent && canDropToReparent}
                 depth={depth}
                 exact={false}
-                $showActions={menuOpen}
+                showActions={menuOpen}
                 scrollIntoViewIfNeeded={sidebarContext === "collections"}
                 isDraft={isDraft}
                 ref={ref}

app/components/Sidebar/components/SharedWithMeLink.tsx

@@ -170,7 +170,7 @@ function SharedWithMeLink({ membership, depth = 0 }: Props) {
                       NotificationEventType.AddUserToDocument
                   ).length > 0
                 }
-                $showActions={menuOpen}
+                showActions={menuOpen}
                 menu={
                   document && !isDragging ? (
                     <Fade>

app/components/Sidebar/components/SidebarButton.tsx

@@ -1,5 +1,4 @@
 import { MoreIcon } from "outline-icons";
-import { observer } from "mobx-react";
 import * as React from "react";
 import styled from "styled-components";
 import { extraArea, hover, s } from "@shared/styles";
@@ -19,46 +18,44 @@ export type SidebarButtonProps = React.ComponentProps<typeof Button> & {
   children?: React.ReactNode;
 };
 
-const SidebarButton = observer(
-  React.forwardRef<HTMLButtonElement, SidebarButtonProps>(
-    function SidebarButton_(
-      {
-        position = "top",
-        showMoreMenu,
-        image,
-        title,
-        children,
-        onClick,
-        ...rest
-      }: SidebarButtonProps,
-      ref
-    ) {
-      return (
-        <Container
-          justify="space-between"
-          align="center"
-          shrink={false}
+const SidebarButton = React.forwardRef<HTMLButtonElement, SidebarButtonProps>(
+  function SidebarButton_(
+    {
+      position = "top",
+      showMoreMenu,
+      image,
+      title,
+      children,
+      onClick,
+      ...rest
+    }: SidebarButtonProps,
+    ref
+  ) {
+    return (
+      <Container
+        justify="space-between"
+        align="center"
+        shrink={false}
+        $position={position}
+      >
+        <Button
+          {...rest}
+          onClick={onClick}
           $position={position}
+          as="button"
+          ref={ref}
+          role="button"
         >
-          <Button
-            {...rest}
-            onClick={onClick}
-            $position={position}
-            as="button"
-            ref={ref}
-            role="button"
-          >
-            <Content>
-              {image}
-              {title && <Title>{title}</Title>}
-            </Content>
-            {showMoreMenu && <StyledMoreIcon />}
-          </Button>
-          {children}
-        </Container>
-      );
-    }
-  )
+          <Content>
+            {image}
+            {title && <Title>{title}</Title>}
+          </Content>
+          {showMoreMenu && <StyledMoreIcon />}
+        </Button>
+        {children}
+      </Container>
+    );
+  }
 );
 
 const StyledMoreIcon = styled(MoreIcon)`

app/components/Sidebar/components/SidebarLink.tsx

@@ -40,7 +40,7 @@ type Props = Omit<NavLinkProps, "to"> & {
   /** Whether to show an unread badge indicator */
   unreadBadge?: boolean;
   /** Whether to show action buttons on hover */
-  $showActions?: boolean;
+  showActions?: boolean;
   /** Whether the link is disabled and non-interactive */
   disabled?: boolean;
   /** Whether the link is currently active */
@@ -81,7 +81,7 @@ function SidebarLink(
     isActiveDrop,
     isDraft,
     menu,
-    $showActions,
+    showActions,
     exact,
     href,
     depth,
@@ -152,7 +152,7 @@ function SidebarLink(
       $isActiveDrop={isActiveDrop}
       $isDraft={isDraft}
       $disabled={disabled}
-      style={active ? activeStyle : style}
+      style={style}
       activeStyle={isActiveDrop ? activeDropStyle : activeStyle}
       onClick={handleClick}
       onActiveClick={handleDisclosureClick}
@@ -183,7 +183,7 @@ function SidebarLink(
           {unreadBadge && <UnreadBadge style={unreadStyle} />}
         </Content>
       </ContextMenu>
-      {menu && <Actions $showActions={$showActions}>{menu}</Actions>}
+      {menu && <Actions showActions={showActions}>{menu}</Actions>}
     </Link>
   );
 }
@@ -205,9 +205,9 @@ const Content = styled.span`
   min-width: 0;
 `;
 
-const Actions = styled(EventBoundary)<{ $showActions?: boolean }>`
+const Actions = styled(EventBoundary)<{ showActions?: boolean }>`
   display: inline-flex;
-  visibility: ${(props) => (props.$showActions ? "visible" : "hidden")};
+  visibility: ${(props) => (props.showActions ? "visible" : "hidden")};
   position: absolute;
   top: 3px;
   right: 4px;

app/components/Sidebar/components/StarredLink.tsx

@@ -103,7 +103,7 @@ const StarredDocumentLink = observer(function StarredDocumentLink({
   return (
     <ActionContextProvider
       value={{
-        activeModels: [document],
+        activeDocumentId: document.id,
       }}
     >
       <Draggable key={star.id} ref={draggableRef} $isDragging={isDragging}>
@@ -124,7 +124,7 @@ const StarredDocumentLink = observer(function StarredDocumentLink({
           ) => !!match && location.state?.sidebarContext === sidebarContext}
           label={label}
           exact={false}
-          $showActions={menuOpen}
+          showActions={menuOpen}
           menu={
             document && !isDragging ? (
               <Fade>

app/components/Sidebar/hooks/useCollectionDocuments.ts

@@ -7,32 +7,38 @@ export default function useCollectionDocuments(
   collection: Collection | undefined,
   activeDocument: Document | undefined
 ) {
-  const insertDraftDocument = !!(
-    activeDocument &&
-    activeDocument.isActive &&
-    activeDocument.isDraft &&
-    activeDocument.collectionId === collection?.id &&
-    !activeDocument.parentDocumentId
+  const insertDraftDocument = useMemo(
+    () =>
+      activeDocument &&
+      activeDocument.isActive &&
+      activeDocument.isDraft &&
+      activeDocument.collectionId === collection?.id &&
+      !activeDocument.parentDocumentId,
+    [
+      activeDocument?.isActive,
+      activeDocument?.isDraft,
+      activeDocument?.collectionId,
+      activeDocument?.parentDocumentId,
+      collection?.id,
+    ]
   );
 
-  // Only subscribe to asNavigationNode when we actually need to insert a draft
-  // into the sorted list. This avoids every CollectionLinkChildren observer
-  // re-rendering on every title keystroke.
-  const draftNavNode = insertDraftDocument
-    ? activeDocument?.asNavigationNode
-    : undefined;
-
   return useMemo(() => {
     if (!collection?.sortedDocuments) {
       return undefined;
     }
 
-    return draftNavNode
+    return insertDraftDocument && activeDocument
       ? sortNavigationNodes(
-          [draftNavNode, ...collection.sortedDocuments],
+          [activeDocument.asNavigationNode, ...collection.sortedDocuments],
           collection.sort,
           false
         )
       : collection.sortedDocuments;
-  }, [draftNavNode, collection?.sortedDocuments, collection?.sort]);
+  }, [
+    insertDraftDocument,
+    activeDocument?.asNavigationNode,
+    collection?.sortedDocuments,
+    collection?.sort,
+  ]);
 }

app/components/Star.tsx

@@ -37,9 +37,8 @@ function Star({ size, document, collection, color, ...rest }: Props) {
   return (
     <ActionContextProvider
       value={{
-        activeModels: [document, collection].filter(
-          (m): m is Document | Collection => !!m
-        ),
+        activeDocumentId: document?.id,
+        activeCollectionId: collection?.id,
       }}
     >
       <NudeButton

app/components/Switch.tsx

@@ -28,7 +28,6 @@ interface Props extends Omit<
   disabled?: boolean;
   /** Callback when the switch state changes */
   onChange?: (checked: boolean) => void;
-  inForm?: boolean;
 }
 
 function Switch(
@@ -36,7 +35,6 @@ function Switch(
     width = 32,
     height = 18,
     labelPosition = "left",
-    inForm = true,
     label,
     disabled,
     className,
@@ -73,7 +71,7 @@ function Switch(
 
   if (label) {
     return (
-      <Wrapper $inForm={inForm}>
+      <Wrapper>
         <Label
           disabled={disabled}
           htmlFor={props.id}
@@ -102,8 +100,8 @@ function Switch(
   return component;
 }
 
-const Wrapper = styled.div<{ $inForm?: boolean }>`
-  padding-bottom: ${(props) => (props.$inForm ? 8 : 0)}px;
+const Wrapper = styled.div`
+  padding-bottom: 8px;
   ${undraggableOnDesktop()}
 `;
 

app/components/Tab.tsx

@@ -95,13 +95,6 @@ const transition = {
   damping: 30,
 };
 
-/** Restrict shared layout animation to the X axis only. */
-const horizontalOnly = (transform: Record<string, string>, generated: string) =>
-  generated.replace(
-    /translate3d\(([^,]+),\s*[^,]+,\s*([^)]+)\)/,
-    "translate3d($1, 0px, $2)"
-  );
-
 const Tab: React.FC<Props> = (props: Props) => {
   const { children, exact, exactQueryString } = props;
   const theme = useTheme();
@@ -119,7 +112,6 @@ const Tab: React.FC<Props> = (props: Props) => {
             layoutId="underline"
             initial={false}
             transition={transition}
-            transformTemplate={horizontalOnly}
           />
         )}
       </TabButton>
@@ -148,7 +140,6 @@ const Tab: React.FC<Props> = (props: Props) => {
                 layoutId="underline"
                 initial={false}
                 transition={transition}
-                transformTemplate={horizontalOnly}
               />
             )}
         </>

app/components/Table.tsx

@@ -26,7 +26,6 @@ import Flex from "~/components/Flex";
 import NudeButton from "~/components/NudeButton";
 import PlaceholderText from "~/components/PlaceholderText";
 import usePrevious from "~/hooks/usePrevious";
-import { transparentize } from "polished";
 
 const HEADER_HEIGHT = 40;
 
@@ -235,13 +234,7 @@ function Table<TData>({
               </TR>
             );
 
-            return decorateRow ? (
-              <React.Fragment key={row.id}>
-                {decorateRow(row.original, baseRow)}
-              </React.Fragment>
-            ) : (
-              baseRow
-            );
+            return decorateRow ? decorateRow(row.original, baseRow) : baseRow;
           })}
         </TBody>
         {showPlaceholder && (
@@ -337,8 +330,7 @@ const THead = styled.div<{ $topPos: number }>`
   color: ${s("textSecondary")};
   font-weight: 500;
 
-  border-bottom: 1px solid
-    ${(props) => transparentize(0.3, props.theme.divider)};
+  border-bottom: 1px solid ${s("divider")};
   background: ${s("background")};
 `;
 
@@ -352,17 +344,12 @@ const TR = styled.div<{ $columns: string }>`
   display: grid;
   grid-template-columns: ${({ $columns }) => `${$columns}`};
   align-items: center;
-  border-bottom: 1px solid
-    ${(props) => transparentize(0.3, props.theme.divider)};
+  border-bottom: 1px solid ${s("divider")};
   overflow: hidden;
 
   &:last-child {
     border-bottom: 0;
   }
-
-  &:hover ${NudeButton}[aria-haspopup="menu"] {
-    opacity: 1;
-  }
 `;
 
 const TH = styled.span`
@@ -408,17 +395,11 @@ const TD = styled.span`
 
   ${NudeButton}[aria-haspopup="menu"] {
     vertical-align: middle;
-    opacity: 0;
-    transition: opacity 100ms ease-in-out;
 
     &:hover,
     &[aria-expanded="true"] {
       background: ${s("sidebarControlHoverBackground")};
     }
-
-    &[aria-expanded="true"] {
-      opacity: 1;
-    }
   }
 `;
 

app/components/Tabs.tsx

@@ -1,4 +1,4 @@
-import { LayoutGroup } from "framer-motion";
+import { AnimateSharedLayout } from "framer-motion";
 import { transparentize } from "polished";
 import * as React from "react";
 import styled from "styled-components";
@@ -84,13 +84,13 @@ const Tabs: React.FC = ({ children }: Props) => {
   }, [width, updateShadows]);
 
   return (
-    <LayoutGroup>
+    <AnimateSharedLayout>
       <Sticky>
         <Nav ref={ref} onScroll={updateShadows} $shadowVisible={shadowVisible}>
           {children}
         </Nav>
       </Sticky>
-    </LayoutGroup>
+    </AnimateSharedLayout>
   );
 };
 

app/components/Template/TemplateForm.tsx

@@ -1,103 +0,0 @@
-import { observer } from "mobx-react";
-import { InputIcon, ShapesIcon } from "outline-icons";
-import React, { useRef } from "react";
-import { Trans, useTranslation } from "react-i18next";
-import styled from "styled-components";
-import type { ProsemirrorData } from "@shared/types";
-import type Template from "~/models/Template";
-import Editor from "~/scenes/Document/components/Editor";
-import { DocumentContextProvider } from "~/components/DocumentContext";
-import LoadingIndicator from "~/components/LoadingIndicator";
-import Notice from "~/components/Notice";
-import useBoolean from "~/hooks/useBoolean";
-import usePolicy from "~/hooks/usePolicy";
-import useStores from "~/hooks/useStores";
-
-export const TemplateForm = observer(function TemplateForm_({
-  handleSubmit,
-  template,
-}: {
-  handleSubmit: (template: Template) => void;
-  template: Template;
-}) {
-  const { dialogs } = useStores();
-  const { t } = useTranslation();
-  const can = usePolicy(template);
-  const dataRef = useRef(template.data);
-  const ref = useRef(null);
-  const [isUploading, handleStartUpload, handleStopUpload] = useBoolean();
-  const readOnly = !can.update && !template.isNew;
-
-  const handleChangeTitle = (title: string) => {
-    template.title = title;
-  };
-
-  const handleChangeIcon = (icon: string, color: string) => {
-    template.icon = icon;
-    template.color = color;
-  };
-
-  const handleChange = (value: (asString: boolean) => ProsemirrorData) => {
-    dataRef.current = value(false);
-    template.data = dataRef.current;
-  };
-
-  const handleSave = (options: { autosave?: boolean }) => {
-    if (options.autosave) {
-      return;
-    }
-    handleSubmit(template);
-  };
-
-  const handleCancel = () => {
-    dialogs.closeAllModals();
-  };
-
-  if (!template) {
-    return null;
-  }
-
-  return (
-    <DocumentContextProvider>
-      <React.Suspense fallback={null}>
-        {isUploading && <LoadingIndicator />}
-        <Notice
-          icon={<ShapesIcon />}
-          description={
-            <Trans>
-              Highlight some text and use the <PlaceholderIcon /> control to add
-              placeholders that can be filled out when creating new documents
-            </Trans>
-          }
-        >
-          {t("You’re editing a template")}
-        </Notice>
-        <Editor
-          id={template.id}
-          ref={ref}
-          isDraft={false}
-          document={template}
-          value={readOnly ? template.data : undefined}
-          defaultValue={template.data}
-          onFileUploadStart={handleStartUpload}
-          onFileUploadStop={handleStopUpload}
-          onChangeTitle={handleChangeTitle}
-          onChangeIcon={handleChangeIcon}
-          onSave={handleSave}
-          onCancel={handleCancel}
-          onChange={handleChange}
-          readOnly={readOnly}
-          canUpdate={can.update}
-          autoFocus={template.createdAt === template.updatedAt}
-          template
-        />
-      </React.Suspense>
-    </DocumentContextProvider>
-  );
-});
-
-const PlaceholderIcon = styled(InputIcon)`
-  position: relative;
-  top: 6px;
-  margin-top: -6px;
-`;

app/components/TemplatizeDialog/Label.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+import styled from "styled-components";
+import Flex from "~/components/Flex";
+
+const Label = ({ icon, value }: { icon: React.ReactNode; value: string }) => (
+  <Flex align="center" gap={4}>
+    <IconWrapper>{icon}</IconWrapper>
+    {value}
+  </Flex>
+);
+
+const IconWrapper = styled.span`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 24px;
+  width: 24px;
+  overflow: hidden;
+  flex-shrink: 0;
+`;
+
+export default Label;

app/components/TemplatizeDialog/SelectLocation.tsx

@@ -49,7 +49,7 @@ const SelectLocation = ({ defaultCollectionId, onSelect }: Props) => {
       collections.orderedData.reduce<Option[]>((memo, collection) => {
         const canCollection = policies.abilities(collection.id);
 
-        if (canCollection.createTemplate) {
+        if (canCollection.createDocument) {
           memo.push({
             type: "item",
             label: collection.name,

app/components/TemplatizeDialog/index.tsx

@@ -8,6 +8,7 @@ import ConfirmationDialog from "~/components/ConfirmationDialog";
 import Flex from "~/components/Flex";
 import Switch from "~/components/Switch";
 import useStores from "~/hooks/useStores";
+import { documentPath } from "~/utils/routeHelpers";
 import SelectLocation from "./SelectLocation";
 
 type Props = {
@@ -17,7 +18,7 @@ type Props = {
 function DocumentTemplatizeDialog({ documentId }: Props) {
   const history = useHistory();
   const { t } = useTranslation();
-  const { documents, templates } = useStores();
+  const { documents } = useStores();
   const document = documents.get(documentId);
   invariant(document, "Document must exist");
 
@@ -27,17 +28,15 @@ function DocumentTemplatizeDialog({ documentId }: Props) {
   );
 
   const handleSubmit = React.useCallback(async () => {
-    const template = await templates.templatize({
-      id: documentId,
+    const template = await document?.templatize({
       collectionId,
       publish,
     });
-
     if (template) {
-      history.push(template.path);
+      history.push(documentPath(template));
       toast.success(t("Template created, go ahead and customize it"));
     }
-  }, [t, templates, documentId, history, collectionId, publish]);
+  }, [t, document, history, collectionId, publish]);
 
   return (
     <ConfirmationDialog

app/components/Toasts.tsx

@@ -1,28 +1,11 @@
 import { observer } from "mobx-react";
-import * as React from "react";
-import { Toaster, useSonner } from "sonner";
+import { Toaster } from "sonner";
 import styled, { useTheme } from "styled-components";
-import { useWebHaptics } from "web-haptics/react";
 import useStores from "~/hooks/useStores";
 
 function Toasts() {
   const { ui } = useStores();
   const theme = useTheme();
-  const { toasts } = useSonner();
-  const { trigger } = useWebHaptics();
-  const prevCountRef = React.useRef(toasts.length);
-
-  React.useEffect(() => {
-    if (toasts.length > prevCountRef.current) {
-      const latest = toasts[toasts.length - 1];
-      if (latest.type === "error") {
-        void trigger("error");
-      } else if (latest.type === "success") {
-        void trigger("success");
-      }
-    }
-    prevCountRef.current = toasts.length;
-  }, [toasts, trigger]);
 
   return (
     <StyledToaster

app/components/Tooltip.tsx

@@ -2,7 +2,7 @@ import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { transparentize } from "polished";
 import * as React from "react";
 import styled, { keyframes } from "styled-components";
-import { s, depths } from "@shared/styles";
+import { s } from "@shared/styles";
 import useMobile from "~/hooks/useMobile";
 import { useTooltipContext } from "./TooltipContext";
 
@@ -267,7 +267,7 @@ const StyledContent = styled(TooltipPrimitive.Content)`
   white-space: normal;
   outline: 0;
   padding: 5px 9px;
-  z-index: ${depths.tooltip};
+  z-index: 9999;
   max-width: calc(100vw - 10px);
 
   /* Animation */

app/components/primitives/Drawer.tsx

@@ -40,7 +40,7 @@ const DrawerContent = React.forwardRef<
             transition: { bounce: 0, duration: 0.2 },
           }}
         >
-          <StyledInnerContent column ref={measureRef} {...rest}>
+          <StyledInnerContent ref={measureRef} {...rest}>
             {children}
           </StyledInnerContent>
         </StyledContent>
@@ -58,9 +58,9 @@ const DrawerTitle = React.forwardRef<
   const { hidden, children, ...rest } = props;
 
   const title = (
-    <StyledText size="medium" weight="bold" as={TitleWrapper} justify="center">
+    <Text size="medium" weight="bold" as={TitleWrapper} justify="center">
       {children}
-    </StyledText>
+    </Text>
   );
 
   return (
@@ -75,10 +75,6 @@ const DrawerTitle = React.forwardRef<
 });
 DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
 
-const StyledText = styled(Text)`
-  flex-shrink: 0;
-`;
-
 /** Styled components. */
 const StyledContent = styled(m.div)`
   z-index: ${depths.menu};
@@ -96,7 +92,7 @@ const StyledContent = styled(m.div)`
   background: ${s("menuBackground")};
 `;
 
-const StyledInnerContent = styled(Flex)`
+const StyledInnerContent = styled.div`
   padding: 6px;
   height: 100%;
 `;

app/components/primitives/Popover.tsx

@@ -129,7 +129,7 @@ const StyledContent = styled(PopoverPrimitive.Content)<StyledContentProps>`
     		`}
 
   &[data-state="open"] {
-    animation: ${fadeAndScaleIn} 150ms cubic-bezier(0.08, 0.82, 0.17, 1);
+    animation: ${fadeAndScaleIn} 150ms cubic-bezier(0.08, 0.82, 0.17, 1); // ease-out-circ
   }
 `;
 

app/components/primitives/components/Menu.tsx

@@ -67,7 +67,6 @@ const BaseMenuItemCSS = css<BaseMenuItemProps>`
     !props.disabled &&
     `
       &[data-highlighted],
-      &[data-state="open"],
       &:focus-visible {
         color: ${props.theme.accentText};
         background: ${props.$dangerous ? props.theme.danger : props.theme.accent};

app/editor/components/BlockMenu.tsx

@@ -1,126 +1,17 @@
-import { DocumentIcon, ShapesIcon } from "outline-icons";
-import cloneDeep from "lodash/cloneDeep";
-import { observer } from "mobx-react";
-import { useCallback, useMemo } from "react";
-import { useTranslation } from "react-i18next";
-import Icon from "@shared/components/Icon";
-import type { MenuItem } from "@shared/editor/types";
-import { ProsemirrorHelper } from "@shared/utils/ProsemirrorHelper";
-import { TextHelper } from "@shared/utils/TextHelper";
-import useCurrentUser from "~/hooks/useCurrentUser";
+import { useCallback } from "react";
 import useDictionary from "~/hooks/useDictionary";
-import useStores from "~/hooks/useStores";
 import getMenuItems from "../menus/block";
 import { useEditor } from "./EditorContext";
 import type { Props as SuggestionsMenuProps } from "./SuggestionsMenu";
 import SuggestionsMenu from "./SuggestionsMenu";
 import SuggestionsMenuItem from "./SuggestionsMenuItem";
 
-/**
- * Hook that returns a template menu item with children for inserting template
- * content into the editor, or undefined if no templates are available.
- */
-function useTemplateMenuItem(): MenuItem | undefined {
-  const { t } = useTranslation();
-  const user = useCurrentUser({ rejectOnEmpty: false });
-  const { documents, templates: templatesStore } = useStores();
-  const editor = useEditor();
-  const documentId = editor.props.id;
-  const document = documentId ? documents.get(documentId) : undefined;
-  const collectionId = document?.collectionId;
-
-  return useMemo(() => {
-    if (!user) {
-      return undefined;
-    }
-
-    const allTemplates = templatesStore.orderedData.filter(
-      (template) => template.isActive
-    );
-    const hasTemplates = allTemplates.some(
-      (template) =>
-        template.isWorkspaceTemplate || template.collectionId === collectionId
-    );
-
-    if (!hasTemplates) {
-      return undefined;
-    }
-
-    const toMenuItem = (template: (typeof allTemplates)[0]): MenuItem => ({
-      name: "noop",
-      title: TextHelper.replaceTemplateVariables(
-        template.titleWithDefault,
-        user
-      ),
-      icon: template.icon ? (
-        <Icon
-          value={template.icon}
-          initial={template.initial}
-          color={template.color ?? undefined}
-        />
-      ) : (
-        <DocumentIcon />
-      ),
-      keywords: template.titleWithDefault,
-      onClick: () => {
-        const data = cloneDeep(template.data);
-        ProsemirrorHelper.replaceTemplateVariables(data, user);
-        editor.insertContent(data);
-      },
-    });
-
-    const children = (): MenuItem[] => {
-      const collectionTemplates = allTemplates.filter(
-        (template) =>
-          !template.isWorkspaceTemplate &&
-          template.collectionId === collectionId
-      );
-      const workspaceTemplates = allTemplates.filter(
-        (tmpl) => tmpl.isWorkspaceTemplate
-      );
-
-      const items: MenuItem[] = collectionTemplates.map(toMenuItem);
-
-      if (collectionTemplates.length && workspaceTemplates.length) {
-        items.push({ name: "separator" });
-      }
-
-      if (workspaceTemplates.length) {
-        for (const template of workspaceTemplates) {
-          items.push(toMenuItem(template));
-        }
-      }
-
-      return items;
-    };
-
-    return {
-      name: "noop",
-      title: t("Templates"),
-      icon: <ShapesIcon />,
-      keywords: "template",
-      children,
-    } satisfies MenuItem;
-  }, [user, templatesStore.orderedData, collectionId, editor, t]);
-}
-
 type Props = Omit<SuggestionsMenuProps, "renderMenuItem" | "items"> &
   Required<Pick<SuggestionsMenuProps, "embeds">>;
 
 function BlockMenu(props: Props) {
   const dictionary = useDictionary();
   const { elementRef } = useEditor();
-  const templateMenuItem = useTemplateMenuItem();
-
-  const items = useMemo(() => {
-    const baseItems = getMenuItems(dictionary, elementRef);
-
-    if (!templateMenuItem) {
-      return baseItems;
-    }
-
-    return [...baseItems, { name: "separator" } as MenuItem, templateMenuItem];
-  }, [dictionary, elementRef, templateMenuItem]);
 
   const renderMenuItem = useCallback(
     (item, _index, options) => (
@@ -129,7 +20,6 @@ function BlockMenu(props: Props) {
         icon={item.icon}
         title={item.title}
         shortcut={item.shortcut}
-        disclosure={options.disclosure}
       />
     ),
     []
@@ -141,9 +31,9 @@ function BlockMenu(props: Props) {
       filterable
       trigger="/"
       renderMenuItem={renderMenuItem}
-      items={items}
+      items={getMenuItems(dictionary, elementRef)}
     />
   );
 }
 
-export default observer(BlockMenu);
+export default BlockMenu;

app/editor/components/EmojiMenu.tsx

@@ -1,5 +1,4 @@
 import capitalize from "lodash/capitalize";
-import { observer } from "mobx-react";
 import { useCallback, useMemo, useEffect } from "react";
 import { emojiMartToGemoji, snakeCase } from "@shared/editor/lib/emoji";
 import { search as emojiSearch } from "@shared/utils/emoji";
@@ -39,6 +38,7 @@ const EmojiMenu = (props: Props) => {
         .map((item) => {
           // We snake_case the shortcode for backwards compatability with gemoji to
           // avoid multiple formats being written into documents.
+          // @ts-expect-error emojiMartToGemoji key
           const id = emojiMartToGemoji[item.id] || item.id;
           const type = determineIconType(id);
           const value = type === IconType.Custom ? id : snakeCase(id);
@@ -76,4 +76,4 @@ const EmojiMenu = (props: Props) => {
   );
 };
 
-export default observer(EmojiMenu);
+export default EmojiMenu;

app/editor/components/FindAndReplace.tsx

@@ -375,10 +375,6 @@ export default function FindAndReplace({
         minWidth={420}
         scrollable={false}
         onPointerDownOutside={() => setLocalOpen(false)}
-        onFocusOutside={(event) => {
-          event.preventDefault();
-          inputRef.current?.focus();
-        }}
         style={{ marginRight: 16, marginTop: 60 }}
       >
         <Content column>