fix: remove transaction override to prevent savepoint conflicts

The transaction-based approach was conflicting with the application's own transaction middleware, causing 'SAVEPOINT can only be used in transaction blocks' errors. Keeping the core performance improvement of removing expensive CASCADE operations while maintaining Jest configuration optimizations for better parallelization.
refactor: focus on transaction rollback optimization only
2026-06-13 19:35:02 +03:00 · 2025-07-16 14:08:21 +00:00 · 2025-07-16 13:57:39 +00:00 · 2025-07-16 13:39:51 +00:00
520 changed files with 10602 additions and 17101 deletions
@@ -6,7 +6,6 @@ __mocks__
 .DS_Store
 .env*
 .eslint*
-.oxlintrc*
 .log
 Makefile
 Procfile
@@ -211,10 +211,6 @@ GITHUB_APP_PRIVATE_KEY=
 LINEAR_CLIENT_ID=
 LINEAR_CLIENT_SECRET=

-# The GitLab integration allows previewing issue and merge request links as rich mentions
-GITLAB_CLIENT_ID=
-GITLAB_CLIENT_SECRET=
-
 # For a complete Slack integration with search and posting to channels the
 # following configs are also needed in addition to Slack authentication:
 # DOCS: https://docs.getoutline.com/s/hosting/doc/slack-G2mc8DOJHk
@@ -0,0 +1 @@
+server/migrations/*.js
@@ -0,0 +1,183 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "sourceType": "module",
+    "extraFileExtensions": [
+      ".json"
+    ],
+    "project": "./tsconfig.json",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:import/recommended",
+    "plugin:import/typescript",
+    "prettier"
+  ],
+  "plugins": [
+    "es",
+    "react",
+    "@typescript-eslint",
+    "eslint-plugin-import",
+    "eslint-plugin-node",
+    "eslint-plugin-react",
+    "eslint-plugin-lodash"
+  ],
+  "rules": {
+    "no-restricted-imports": [
+      "error",
+      {
+        "paths": [
+          {
+            "name": "reakit/Menu",
+            "importNames": [
+              "useMenuState"
+            ],
+            "message": "Do not use useMenuState from reakit/Menu. Use useMenuState instead."
+          }
+        ]
+      }
+    ],
+    "eqeqeq": 2,
+    "curly": 2,
+    "no-console": "error",
+    "arrow-body-style": [
+      "error",
+      "as-needed"
+    ],
+    "spaced-comment": "error",
+    "object-shorthand": "error",
+    "no-mixed-operators": "off",
+    "no-useless-escape": "off",
+    "no-shadow": "off",
+    "es/no-regexp-lookbehind-assertions": "error",
+    "react/react-in-jsx-scope": "off",
+    "react/self-closing-comp": [
+      "error",
+      {
+        "component": true,
+        "html": true
+      }
+    ],
+    "@typescript-eslint/no-shadow": [
+      "warn",
+      {
+        "allow": [
+          "transaction"
+        ],
+        "hoist": "all",
+        "ignoreTypeValueShadow": true
+      }
+    ],
+    "@typescript-eslint/no-require-imports": "off",
+    "@typescript-eslint/no-explicit-any": "warn",
+    "@typescript-eslint/no-floating-promises": "error",
+    "@typescript-eslint/await-thenable": "error",
+    "@typescript-eslint/no-misused-promises": [
+      "error",
+      {
+        "checksVoidReturn": false
+      }
+    ],
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      {
+        "argsIgnorePattern": "^_",
+        "caughtErrorsIgnorePattern": "^_",
+        "args": "after-used",
+        "ignoreRestSiblings": true
+      }
+    ],
+    "padding-line-between-statements": [
+      "error",
+      {
+        "blankLine": "always",
+        "prev": "*",
+        "next": "export"
+      }
+    ],
+    "lines-between-class-members": [
+      "error",
+      "always",
+      {
+        "exceptAfterSingleLine": true
+      }
+    ],
+    "lodash/import-scope": [
+      "error",
+      "method"
+    ],
+    "import/no-named-as-default": "off",
+    "import/no-named-as-default-member": "off",
+    "import/newline-after-import": 2,
+    "import/order": [
+      "error",
+      {
+        "alphabetize": {
+          "order": "asc"
+        },
+        "pathGroups": [
+          {
+            "pattern": "@shared/**",
+            "group": "external",
+            "position": "after"
+          },
+          {
+            "pattern": "@server/**",
+            "group": "external",
+            "position": "after"
+          },
+          {
+            "pattern": "~/stores",
+            "group": "external",
+            "position": "after"
+          },
+          {
+            "pattern": "~/stores/**",
+            "group": "external",
+            "position": "after"
+          },
+          {
+            "pattern": "~/models/**",
+            "group": "external",
+            "position": "after"
+          },
+          {
+            "pattern": "~/scenes/**",
+            "group": "external",
+            "position": "after"
+          },
+          {
+            "pattern": "~/components/**",
+            "group": "external",
+            "position": "after"
+          },
+          {
+            "pattern": "~/**",
+            "group": "external",
+            "position": "after"
+          }
+        ]
+      }
+    ]
+  },
+  "settings": {
+    "react": {
+      "createClass": "createReactClass",
+      "pragma": "React",
+      "version": "detect"
+    },
+    "import/parsers": {
+      "@typescript-eslint/parser": [
+        ".ts",
+        ".tsx"
+      ]
+    },
+    "import/resolver": {
+      "typescript": {}
+    }
+  }
+}
@@ -25,14 +25,15 @@ jobs:
        node-version: [20.x, 22.x]

    steps:
-      - uses: actions/checkout@v4
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v4
-        with:
-          node-version: ${{ matrix.node-version }}
-          cache: "yarn"
-      - name: Install dependencies
-        run: yarn install --frozen-lockfile --prefer-offline
+    - uses: actions/checkout@v4
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v4
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'yarn'
+
+    - name: Install dependencies
+      run: yarn install --frozen-lockfile

  lint:
    needs: build
@@ -43,7 +44,7 @@ jobs:
        with:
          node-version: 22.x
          cache: "yarn"
-      - run: yarn install --frozen-lockfile --prefer-offline
+      - run: yarn install --frozen-lockfile
      - run: yarn lint

  types:
@@ -55,13 +56,12 @@ jobs:
        with:
          node-version: 22.x
          cache: "yarn"
-      - run: yarn install --frozen-lockfile --prefer-offline
+      - run: yarn install --frozen-lockfile
      - run: yarn tsc

  changes:
    runs-on: ubuntu-latest
    outputs:
-      config: ${{ steps.filter.outputs.config }}
      server: ${{ steps.filter.outputs.server }}
      app: ${{ steps.filter.outputs.app }}
    steps:
@@ -70,9 +70,6 @@ jobs:
        id: filter
        with:
          filters: |
-            config:
-              - '.github/**'
-              - 'vite.config.ts'
            server:
              - 'server/**'
              - 'shared/**'
@@ -86,7 +83,7 @@ jobs:

  test:
    needs: [build, changes]
-    if: ${{ needs.changes.outputs.app == 'true' || needs.changes.outputs.config == 'true' }}
+    if: ${{ needs.changes.outputs.app == 'true' }}
    runs-on: ubuntu-latest
    strategy:
      matrix:
@@ -97,12 +94,12 @@ jobs:
        with:
          node-version: 22.x
          cache: "yarn"
-      - run: yarn install --frozen-lockfile --prefer-offline
+      - run: yarn install --frozen-lockfile
      - run: yarn test:${{ matrix.test-group }}

  test-server:
    needs: [build, changes]
-    if: ${{ needs.changes.outputs.server == 'true' || needs.changes.outputs.config == 'true' }}
+    if: ${{ needs.changes.outputs.server == 'true' }}
    runs-on: ubuntu-latest
    services:
      postgres:
@@ -119,9 +116,19 @@ jobs:
          --health-timeout 5s
          --health-retries 5

+      redis:
+        image: redis:5.0
+        ports:
+          - 6379:6379
+        options: >-
+          --health-cmd "redis-cli ping"
+          --health-interval 10s
+          --health-timeout 5s
+          --health-retries 5
+
    strategy:
      matrix:
-        shard: [1, 2, 3, 4]
+        shard: [1, 2, 3]

    steps:
      - uses: actions/checkout@v4
@@ -129,7 +136,7 @@ jobs:
        with:
          node-version: 22.x
          cache: "yarn"
-      - run: yarn install --frozen-lockfile --prefer-offline
+      - run: yarn install --frozen-lockfile
      - run: yarn sequelize db:migrate
      - name: Run server tests
        run: |
@@ -146,7 +153,7 @@ jobs:
        with:
          node-version: 22.x
          cache: "yarn"
-      - run: yarn install --frozen-lockfile --prefer-offline
+      - run: yarn install --frozen-lockfile
      - name: Set environment to production
        run: echo "NODE_ENV=production" >> $GITHUB_ENV
      - run: yarn vite:build
@@ -21,7 +21,7 @@ jobs:
        with:
          node-version: 20.x
          cache: "yarn"
-      - run: yarn install --frozen-lockfile --prefer-offline
+      - run: yarn install --frozen-lockfile
      - run: yarn lint --fix

      - name: Commit changes
@@ -1,6 +1,7 @@
 {
-  "workerIdleMemoryLimit": "0.75",
-  "maxWorkers": "50%",
+  "workerIdleMemoryLimit": "0.5",
+  "maxWorkers": "75%",
+  "testTimeout": 30000,
  "projects": [
    {
      "displayName": "server",
@@ -12,6 +13,7 @@
      },
      "setupFiles": ["<rootDir>/__mocks__/console.js"],
      "setupFilesAfterEnv": ["<rootDir>/server/test/setup.ts"],
+      "globalSetup": "<rootDir>/server/test/globalSetup.js",
      "globalTeardown": "<rootDir>/server/test/globalTeardown.js",
      "testEnvironment": "node"
    },
@@ -1,102 +0,0 @@
-{
-  "$schema": "./node_modules/oxlint/configuration_schema.json",
-  "ignorePatterns": [
-    "build/**",
-    "node_modules/**",
-    "public/**",
-    "server/migrations/**",
-    "server/scripts/**",
-    "patches/**",
-    "*.d.ts"
-  ],
-  "rules": {
-    "for-direction": "error",
-    "no-async-promise-executor": "error",
-    "no-case-declarations": "error",
-    "no-class-assign": "error",
-    "no-compare-neg-zero": "error",
-    "no-cond-assign": "error",
-    "no-const-assign": "error",
-    "no-constant-binary-expression": "error",
-    "no-constant-condition": "error",
-    "no-control-regex": "error",
-    "no-debugger": "error",
-    "no-delete-var": "error",
-    "no-dupe-class-members": "error",
-    "no-dupe-else-if": "error",
-    "no-dupe-keys": "error",
-    "no-duplicate-case": "error",
-    "no-empty": "error",
-    "no-empty-character-class": "error",
-    "no-empty-pattern": "error",
-    "no-empty-static-block": "error",
-    "no-ex-assign": "error",
-    "no-explicit-any": "warn",
-    "no-extra-boolean-cast": "error",
-    "no-fallthrough": "error",
-    "no-func-assign": "error",
-    "no-global-assign": "error",
-    "no-import-assign": "error",
-    "no-invalid-regexp": "error",
-    "no-irregular-whitespace": "error",
-    "no-loss-of-precision": "error",
-    "no-new-native-nonconstructor": "error",
-    "no-nonoctal-decimal-escape": "error",
-    "no-obj-calls": "error",
-    "no-prototype-builtins": "error",
-    "no-redeclare": "error",
-    "no-regex-spaces": "error",
-    "no-self-assign": "error",
-    "no-setter-return": "error",
-    "no-shadow-restricted-names": "error",
-    "no-sparse-arrays": "error",
-    "no-this-before-super": "error",
-    "no-unexpected-multiline": "error",
-    "no-unsafe-finally": "error",
-    "no-unsafe-negation": "error",
-    "no-unsafe-optional-chaining": "error",
-    "no-unused-labels": "error",
-    "no-unused-private-class-members": "error",
-    "no-unused-vars": "error",
-    "no-useless-backreference": "error",
-    "no-useless-catch": "error",
-    "no-useless-escape": "error",
-    "no-with": "error",
-    "require-yield": "error",
-    "use-isnan": "error",
-    "valid-typeof": "error"
-  },
-  "overrides": [
-    {
-      "files": ["**/*.{js,jsx,ts,tsx}"],
-      "rules": {
-        "eqeqeq": "error",
-        "curly": "error",
-        "no-console": "error",
-        "arrow-body-style": ["error", "as-needed"],
-        "no-useless-escape": "off",
-        "react/react-in-jsx-scope": "off",
-        "react/self-closing-comp": [
-          "error",
-          {
-            "component": true,
-            "html": true
-          }
-        ],
-        "@typescript-eslint/no-require-imports": "off",
-        "import/no-named-as-default": "off",
-        "import/no-named-as-default-member": "off",
-        "no-unused-vars": [
-          "error",
-          {
-            "argsIgnorePattern": "^_",
-            "caughtErrorsIgnorePattern": "^_",
-            "args": "after-used",
-            "ignoreRestSiblings": true
-          }
-        ]
-      },
-      "plugins": ["eslint", "oxc", "react", "typescript", "import"]
-    }
-  ]
-}
@@ -1,4 +1,4 @@
-require("@dotenvx/dotenvx").config({
+require("dotenv").config({
  path: process.env.NODE_ENV === "test" ? ".env.test" : ".env",
 });

@@ -3,7 +3,7 @@ Business Source License 1.1
 Parameters

 Licensor:             General Outline, Inc.
-Licensed Work:        Outline 0.86.1
+Licensed Work:        Outline 0.85.0
                      The Licensed Work is (c) 2025 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:          2029-08-09
+Change Date:          2029-07-03

 Change License:       Apache License, Version 2.0

@@ -8,7 +8,7 @@ build:
 	docker compose build --pull outline

 test:
-	docker compose up -d postgres
+	docker compose up -d redis postgres
 	NODE_ENV=test yarn sequelize db:drop
 	NODE_ENV=test yarn sequelize db:create
 	NODE_ENV=test yarn sequelize db:migrate
@@ -0,0 +1,17 @@
+{
+  "extends": [
+    "../.eslintrc",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended"
+  ],
+  "plugins": [
+    "eslint-plugin-react-hooks"
+  ],
+  "rules": {
+    "react/react-in-jsx-scope": "off"
+  },
+  "env": {
+    "jest": true,
+    "browser": true
+  }
+}
@@ -1,34 +0,0 @@
-{
-  "extends": ["../.oxlintrc.json"],
-  "plugins": ["oxc", "eslint", "typescript", "react"],
-  "overrides": [
-    {
-      "files": ["**/*.{jsx,tsx}"],
-      "rules": {
-        "no-restricted-imports": [
-          "error",
-          {
-            "patterns": [
-              {
-                "group": ["mime-types"],
-                "message": "Do not use the mime-types package in the browser."
-              }
-            ],
-            "paths": [
-              {
-                "name": "reakit/Menu",
-                "importNames": ["useMenuState"],
-                "message": "Do not use useMenuState from reakit/Menu. Use useMenuState instead."
-              }
-            ]
-          }
-        ]
-      },
-      "plugins": ["import"]
-    }
-  ],
-  "env": {
-    "jest": true,
-    "browser": true
-  }
-}
@@ -1,9 +1,7 @@
-import { PlusIcon, TrashIcon } from "outline-icons";
+import { PlusIcon } from "outline-icons";
 import stores from "~/stores";
-import ApiKey from "~/models/ApiKey";
 import ApiKeyNew from "~/scenes/ApiKeyNew";
-import ApiKeyRevokeDialog from "~/scenes/Settings/components/ApiKeyRevokeDialog";
-import { createAction, createActionV2 } from "..";
+import { createAction } from "..";
 import { SettingsSection } from "../sections";

 export const createApiKey = createAction({
@@ -24,37 +22,3 @@ export const createApiKey = createAction({
    });
  },
 });
-
-export const revokeApiKeyFactory = ({ apiKey }: { apiKey: ApiKey }) =>
-  createActionV2({
-    name: ({ t, isContextMenu }) =>
-      isContextMenu
-        ? apiKey.isExpired
-          ? t("Delete")
-          : `${t("Revoke")}…`
-        : t("Revoke API key"),
-    analyticsName: "Revoke API key",
-    section: SettingsSection,
-    icon: <TrashIcon />,
-    keywords: "revoke delete remove",
-    dangerous: true,
-    perform: async ({ t, event }) => {
-      event?.preventDefault();
-      event?.stopPropagation();
-
-      if (apiKey.isExpired) {
-        await apiKey.delete();
-        return;
-      }
-
-      stores.dialogs.openModal({
-        title: t("Revoke token"),
-        content: (
-          <ApiKeyRevokeDialog
-            onSubmit={stores.dialogs.closeAllModals}
-            apiKey={apiKey}
-          />
-        ),
-      });
-    },
-  });
@@ -2,8 +2,6 @@ import {
  ArchiveIcon,
  CollectionIcon,
  EditIcon,
-  ExportIcon,
-  NewDocumentIcon,
  PadlockIcon,
  PlusIcon,
  RestoreIcon,
@@ -24,19 +22,11 @@ import ConfirmationDialog from "~/components/ConfirmationDialog";
 import DynamicCollectionIcon from "~/components/Icons/CollectionIcon";
 import SharePopover from "~/components/Sharing/Collection/SharePopover";
 import { getHeaderExpandedKey } from "~/components/Sidebar/components/Header";
-import {
-  createAction,
-  createActionV2,
-  createInternalLinkActionV2,
-} from "~/actions";
+import { createAction } from "~/actions";
 import { ActiveCollectionSection, CollectionSection } from "~/actions/sections";
 import { setPersistedState } from "~/hooks/usePersistedState";
-import {
-  newDocumentPath,
-  newTemplatePath,
-  searchPath,
-} from "~/utils/routeHelpers";
-import ExportDialog from "~/components/ExportDialog";
+import history from "~/utils/history";
+import { newTemplatePath, searchPath } from "~/utils/routeHelpers";

 const ColorCollectionIcon = ({ collection }: { collection: Collection }) => (
  <DynamicCollectionIcon collection={collection} />
@@ -80,7 +70,7 @@ export const createCollection = createAction({
  },
 });

-export const editCollection = createActionV2({
+export const editCollection = createAction({
  name: ({ t, isContextMenu }) =>
    isContextMenu ? `${t("Edit")}…` : t("Edit collection"),
  analyticsName: "Edit collection",
@@ -106,7 +96,7 @@ export const editCollection = createActionV2({
  },
 });

-export const editCollectionPermissions = createActionV2({
+export const editCollectionPermissions = createAction({
  name: ({ t, isContextMenu }) =>
    isContextMenu ? `${t("Permissions")}…` : t("Collection permissions"),
  analyticsName: "Collection permissions",
@@ -138,7 +128,7 @@ export const editCollectionPermissions = createActionV2({
  },
 });

-export const searchInCollection = createInternalLinkActionV2({
+export const searchInCollection = createAction({
  name: ({ t }) => t("Search in collection"),
  analyticsName: "Search collection",
  section: ActiveCollectionSection,
@@ -156,20 +146,13 @@ export const searchInCollection = createInternalLinkActionV2({

    return stores.policies.abilities(activeCollectionId).readDocument;
  },
-  to: ({ activeCollectionId, sidebarContext }) => {
-    const [pathname, search] = searchPath({
-      collectionId: activeCollectionId,
-    }).split("?");

-    return {
-      pathname,
-      search,
-      state: { sidebarContext },
-    };
+  perform: ({ activeCollectionId }) => {
+    history.push(searchPath({ collectionId: activeCollectionId }));
  },
 });

-export const starCollection = createActionV2({
+export const starCollection = createAction({
  name: ({ t }) => t("Star"),
  analyticsName: "Star collection",
  section: ActiveCollectionSection,
@@ -196,7 +179,7 @@ export const starCollection = createActionV2({
  },
 });

-export const unstarCollection = createActionV2({
+export const unstarCollection = createAction({
  name: ({ t }) => t("Unstar"),
  analyticsName: "Unstar collection",
  section: ActiveCollectionSection,
@@ -222,7 +205,7 @@ export const unstarCollection = createActionV2({
  },
 });

-export const subscribeCollection = createActionV2({
+export const subscribeCollection = createAction({
  name: ({ t }) => t("Subscribe"),
  analyticsName: "Subscribe to collection",
  section: ActiveCollectionSection,
@@ -235,7 +218,6 @@ export const subscribeCollection = createActionV2({
    const collection = stores.collections.get(activeCollectionId);

    return (
-      !!collection?.isActive &&
      !collection?.isSubscribed &&
      stores.policies.abilities(activeCollectionId).subscribe
    );
@@ -253,7 +235,7 @@ export const subscribeCollection = createActionV2({
  },
 });

-export const unsubscribeCollection = createActionV2({
+export const unsubscribeCollection = createAction({
  name: ({ t }) => t("Unsubscribe"),
  analyticsName: "Unsubscribe from collection",
  section: ActiveCollectionSection,
@@ -266,7 +248,6 @@ export const unsubscribeCollection = createActionV2({
    const collection = stores.collections.get(activeCollectionId);

    return (
-      !!collection?.isActive &&
      !!collection?.isSubscribed &&
      stores.policies.abilities(activeCollectionId).unsubscribe
    );
@@ -284,10 +265,10 @@ export const unsubscribeCollection = createActionV2({
  },
 });

-export const archiveCollection = createActionV2({
+export const archiveCollection = createAction({
  name: ({ t }) => `${t("Archive")}…`,
  analyticsName: "Archive collection",
-  section: ActiveCollectionSection,
+  section: CollectionSection,
  icon: <ArchiveIcon />,
  visible: ({ activeCollectionId, stores }) => {
    if (!activeCollectionId) {
@@ -325,7 +306,7 @@ export const archiveCollection = createActionV2({
  },
 });

-export const restoreCollection = createActionV2({
+export const restoreCollection = createAction({
  name: ({ t }) => t("Restore"),
  analyticsName: "Restore collection",
  section: CollectionSection,
@@ -350,7 +331,7 @@ export const restoreCollection = createActionV2({
  },
 });

-export const deleteCollection = createActionV2({
+export const deleteCollection = createAction({
  name: ({ t }) => `${t("Delete")}…`,
  analyticsName: "Delete collection",
  section: ActiveCollectionSection,
@@ -384,65 +365,7 @@ export const deleteCollection = createActionV2({
  },
 });

-export const exportCollection = createActionV2({
-  name: ({ t }) => `${t("Export")}…`,
-  analyticsName: "Export collection",
-  section: ActiveCollectionSection,
-  icon: <ExportIcon />,
-  visible: ({ currentTeamId, activeCollectionId, stores }) => {
-    if (!currentTeamId || !activeCollectionId) {
-      return false;
-    }
-
-    return (
-      !!stores.policies.abilities(currentTeamId).createExport &&
-      !!stores.policies.abilities(activeCollectionId).export
-    );
-  },
-  perform: async ({ activeCollectionId, stores, t }) => {
-    if (!activeCollectionId) {
-      return;
-    }
-    const collection = stores.collections.get(activeCollectionId);
-    if (!collection) {
-      return;
-    }
-
-    stores.dialogs.openModal({
-      title: t("Export collection"),
-      content: (
-        <ExportDialog
-          collection={collection}
-          onSubmit={stores.dialogs.closeAllModals}
-        />
-      ),
-    });
-  },
-});
-
-export const createDocument = createInternalLinkActionV2({
-  name: ({ t }) => t("New document"),
-  analyticsName: "New document",
-  section: ActiveCollectionSection,
-  icon: <NewDocumentIcon />,
-  keywords: "new create document",
-  visible: ({ activeCollectionId, stores }) =>
-    !!(
-      !!activeCollectionId &&
-      stores.policies.abilities(activeCollectionId).createDocument
-    ),
-  to: ({ activeCollectionId, sidebarContext }) => {
-    const [pathname, search] = newDocumentPath(activeCollectionId).split("?");
-
-    return {
-      pathname,
-      search,
-      state: { sidebarContext },
-    };
-  },
-});
-
-export const createTemplate = createInternalLinkActionV2({
+export const createTemplate = createAction({
  name: ({ t }) => t("New template"),
  analyticsName: "New template",
  section: ActiveCollectionSection,
@@ -453,14 +376,13 @@ export const createTemplate = createInternalLinkActionV2({
      !!activeCollectionId &&
      stores.policies.abilities(activeCollectionId).createDocument
    ),
-  to: ({ activeCollectionId, sidebarContext }) => {
-    const [pathname, search] = newTemplatePath(activeCollectionId).split("?");
-
-    return {
-      pathname,
-      search,
-      state: { sidebarContext },
-    };
+  perform: ({ activeCollectionId, event }) => {
+    if (!activeCollectionId) {
+      return;
+    }
+    event?.preventDefault();
+    event?.stopPropagation();
+    history.push(newTemplatePath(activeCollectionId));
  },
 });

@@ -1,11 +1,12 @@
 import { DoneIcon, SmileyIcon, TrashIcon } from "outline-icons";
 import { toast } from "sonner";
+import stores from "~/stores";
 import Comment from "~/models/Comment";
 import CommentDeleteDialog from "~/components/CommentDeleteDialog";
 import ViewReactionsDialog from "~/components/Reactions/ViewReactionsDialog";
 import history from "~/utils/history";
-import { createActionV2 } from "..";
-import { ActiveDocumentSection } from "../sections";
+import { createAction } from "..";
+import { DocumentSection } from "../sections";

 export const deleteCommentFactory = ({
  comment,
@@ -14,15 +15,15 @@ export const deleteCommentFactory = ({
  comment: Comment;
  onDelete: () => void;
 }) =>
-  createActionV2({
+  createAction({
    name: ({ t }) => `${t("Delete")}…`,
    analyticsName: "Delete comment",
-    section: ActiveDocumentSection,
+    section: DocumentSection,
    icon: <TrashIcon />,
    keywords: "trash",
    dangerous: true,
-    visible: ({ stores }) => stores.policies.abilities(comment.id).delete,
-    perform: ({ t, stores, event }) => {
+    visible: () => stores.policies.abilities(comment.id).delete,
+    perform: ({ t, event }) => {
      event?.preventDefault();
      event?.stopPropagation();

@@ -40,12 +41,12 @@ export const resolveCommentFactory = ({
  comment: Comment;
  onResolve: () => void;
 }) =>
-  createActionV2({
+  createAction({
    name: ({ t }) => t("Mark as resolved"),
    analyticsName: "Resolve thread",
-    section: ActiveDocumentSection,
+    section: DocumentSection,
    icon: <DoneIcon outline />,
-    visible: ({ stores }) =>
+    visible: () =>
      stores.policies.abilities(comment.id).resolve &&
      stores.policies.abilities(comment.documentId).update,
    perform: async ({ t }) => {
@@ -72,12 +73,12 @@ export const unresolveCommentFactory = ({
  comment: Comment;
  onUnresolve: () => void;
 }) =>
-  createActionV2({
+  createAction({
    name: ({ t }) => t("Mark as unresolved"),
    analyticsName: "Unresolve thread",
-    section: ActiveDocumentSection,
+    section: DocumentSection,
    icon: <DoneIcon outline />,
-    visible: ({ stores }) =>
+    visible: () =>
      stores.policies.abilities(comment.id).unresolve &&
      stores.policies.abilities(comment.documentId).update,
    perform: async () => {
@@ -101,15 +102,15 @@ export const viewCommentReactionsFactory = ({
 }: {
  comment: Comment;
 }) =>
-  createActionV2({
+  createAction({
    name: ({ t }) => `${t("View reactions")}`,
    analyticsName: "View comment reactions",
-    section: ActiveDocumentSection,
+    section: DocumentSection,
    icon: <SmileyIcon />,
-    visible: ({ stores }) =>
+    visible: () =>
      stores.policies.abilities(comment.id).read &&
      comment.reactions.length > 0,
-    perform: ({ t, stores, event }) => {
+    perform: ({ t, event }) => {
      event?.preventDefault();
      event?.stopPropagation();

@@ -1,4 +1,3 @@
-import Storage from "@shared/utils/Storage";
 import copy from "copy-to-clipboard";
 import {
  BeakerIcon,
@@ -128,17 +127,6 @@ export const clearIndexedDB = createAction({
  },
 });

-export const clearStorage = createAction({
-  name: ({ t }) => t("Clear local storage"),
-  icon: <TrashIcon />,
-  keywords: "cache clear localstorage",
-  section: DeveloperSection,
-  perform: ({ t }) => {
-    Storage.clear();
-    toast.success(t("Local storage cleared"));
-  },
-});
-
 export const createTestUsers = createAction({
  name: "Create 10 test users",
  icon: <UserIcon />,
@@ -213,7 +201,6 @@ export const developer = createAction({
    createToast,
    createTestUsers,
    clearIndexedDB,
-    clearStorage,
    startTyping,
  ],
 });
@@ -26,12 +26,11 @@ import {
  PublishIcon,
  CommentIcon,
  CopyIcon,
+  EyeIcon,
  PadlockIcon,
  GlobeIcon,
  LogoutIcon,
  CaseSensitiveIcon,
-  RestoreIcon,
-  EditIcon,
 } from "outline-icons";
 import { toast } from "sonner";
 import Icon from "@shared/components/Icon";
@@ -53,13 +52,7 @@ import MarkdownIcon from "~/components/Icons/MarkdownIcon";
 import SharePopover from "~/components/Sharing/Document";
 import { getHeaderExpandedKey } from "~/components/Sidebar/components/Header";
 import DocumentTemplatizeDialog from "~/components/TemplatizeDialog";
-import {
-  createAction,
-  createActionV2,
-  createActionV2Group,
-  createActionV2WithChildren,
-  createInternalLinkActionV2,
-} from "~/actions";
+import { createAction } from "~/actions";
 import {
  ActiveDocumentSection,
  DocumentSection,
@@ -69,6 +62,7 @@ import env from "~/env";
 import { setPersistedState } from "~/hooks/usePersistedState";
 import history from "~/utils/history";
 import {
+  documentInsightsPath,
  documentHistoryPath,
  homePath,
  newDocumentPath,
@@ -77,12 +71,7 @@ import {
  documentPath,
  urlify,
  trashPath,
-  documentEditPath,
 } from "~/utils/routeHelpers";
-import capitalize from "lodash/capitalize";
-import CollectionIcon from "~/components/Icons/CollectionIcon";
-import { ActionV2, ActionV2Group, ActionV2Separator } from "~/types";
-import Insights from "~/scenes/Document/components/Insights";

 export const openDocument = createAction({
  name: ({ t }) => t("Open document"),
@@ -114,38 +103,6 @@ export const openDocument = createAction({
  },
 });

-export const editDocument = createInternalLinkActionV2({
-  name: ({ t }) => t("Edit"),
-  analyticsName: "Edit document",
-  section: ActiveDocumentSection,
-  keywords: "edit",
-  icon: <EditIcon />,
-  visible: ({ activeDocumentId, 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 && !document?.template
-    );
-  },
-  to: ({ activeDocumentId, stores }) => {
-    const document = activeDocumentId
-      ? stores.documents.get(activeDocumentId)
-      : undefined;
-    if (!document) {
-      return "";
-    }
-
-    return documentEditPath(document);
-  },
-});
-
 export const createDocument = createAction({
  name: ({ t }) => t("New document"),
  analyticsName: "New document",
@@ -184,7 +141,7 @@ export const createDraftDocument = createAction({
    }),
 });

-export const createDocumentFromTemplate = createInternalLinkActionV2({
+export const createDocumentFromTemplate = createAction({
  name: ({ t }) => t("New from template"),
  analyticsName: "New document",
  section: DocumentSection,
@@ -214,24 +171,16 @@ export const createDocumentFromTemplate = createInternalLinkActionV2({
    }
    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 },
-    };
-  },
+  perform: ({ activeCollectionId, activeDocumentId, sidebarContext }) =>
+    history.push(
+      newDocumentPath(activeCollectionId, { templateId: activeDocumentId }),
+      {
+        sidebarContext,
+      }
+    ),
 });

-export const createNestedDocument = createInternalLinkActionV2({
+export const createNestedDocument = createAction({
  name: ({ t }) => t("New nested document"),
  analyticsName: "New document",
  section: ActiveDocumentSection,
@@ -242,19 +191,13 @@ export const createNestedDocument = createInternalLinkActionV2({
    !!activeDocumentId &&
    stores.policies.abilities(currentTeamId).createDocument &&
    stores.policies.abilities(activeDocumentId).createChildDocument,
-  to: ({ activeDocumentId, sidebarContext }) => {
-    const [pathname, search] =
-      newNestedDocumentPath(activeDocumentId).split("?");
-
-    return {
-      pathname,
-      search,
-      state: { sidebarContext },
-    };
-  },
+  perform: ({ activeDocumentId, sidebarContext }) =>
+    history.push(newNestedDocumentPath(activeDocumentId), {
+      sidebarContext,
+    }),
 });

-export const starDocument = createActionV2({
+export const starDocument = createAction({
  name: ({ t }) => t("Star"),
  analyticsName: "Star document",
  section: ActiveDocumentSection,
@@ -280,7 +223,7 @@ export const starDocument = createActionV2({
  },
 });

-export const unstarDocument = createActionV2({
+export const unstarDocument = createAction({
  name: ({ t }) => t("Unstar"),
  analyticsName: "Unstar document",
  section: ActiveDocumentSection,
@@ -306,7 +249,7 @@ export const unstarDocument = createActionV2({
  },
 });

-export const publishDocument = createActionV2({
+export const publishDocument = createAction({
  name: ({ t }) => t("Publish"),
  analyticsName: "Publish document",
  section: ActiveDocumentSection,
@@ -348,7 +291,7 @@ export const publishDocument = createActionV2({
  },
 });

-export const unpublishDocument = createActionV2({
+export const unpublishDocument = createAction({
  name: ({ t }) => t("Unpublish"),
  analyticsName: "Unpublish document",
  section: ActiveDocumentSection,
@@ -379,27 +322,11 @@ export const unpublishDocument = createActionV2({
  },
 });

-export const subscribeDocument = createActionV2({
+export const subscribeDocument = createAction({
  name: ({ t }) => t("Subscribe"),
  analyticsName: "Subscribe to document",
  section: ActiveDocumentSection,
  icon: <SubscribeIcon />,
-  tooltip: ({ activeCollectionId, isContextMenu, stores, t }) => {
-    if (!isContextMenu || !activeCollectionId) {
-      return undefined;
-    }
-
-    return stores.collections.get(activeCollectionId)?.isSubscribed
-      ? t("Subscription inherited from collection")
-      : undefined;
-  },
-  disabled: ({ activeCollectionId, isContextMenu, stores }) => {
-    if (!isContextMenu || !activeCollectionId) {
-      return false;
-    }
-
-    return !!stores.collections.get(activeCollectionId)?.isSubscribed;
-  },
  visible: ({ activeDocumentId, stores }) => {
    if (!activeDocumentId) {
      return false;
@@ -408,7 +335,6 @@ export const subscribeDocument = createActionV2({
    const document = stores.documents.get(activeDocumentId);

    return (
-      !!document?.isActive &&
      !document?.collection?.isSubscribed &&
      !document?.isSubscribed &&
      stores.policies.abilities(activeDocumentId).subscribe
@@ -425,27 +351,11 @@ export const subscribeDocument = createActionV2({
  },
 });

-export const unsubscribeDocument = createActionV2({
+export const unsubscribeDocument = createAction({
  name: ({ t }) => t("Unsubscribe"),
  analyticsName: "Unsubscribe from document",
  section: ActiveDocumentSection,
  icon: <UnsubscribeIcon />,
-  tooltip: ({ activeCollectionId, isContextMenu, stores, t }) => {
-    if (!isContextMenu || !activeCollectionId) {
-      return undefined;
-    }
-
-    return stores.collections.get(activeCollectionId)?.isSubscribed
-      ? t("Subscription inherited from collection")
-      : undefined;
-  },
-  disabled: ({ activeCollectionId, isContextMenu, stores }) => {
-    if (!isContextMenu || !activeCollectionId) {
-      return false;
-    }
-
-    return !!stores.collections.get(activeCollectionId)?.isSubscribed;
-  },
  visible: ({ activeDocumentId, stores }) => {
    if (!activeDocumentId) {
      return false;
@@ -454,10 +364,9 @@ export const unsubscribeDocument = createActionV2({
    const document = stores.documents.get(activeDocumentId);

    return (
-      !!document?.isActive &&
-      (!!document?.collection?.isSubscribed ||
-        (!!document?.isSubscribed &&
-          stores.policies.abilities(activeDocumentId).unsubscribe))
+      !!document?.collection?.isSubscribed ||
+      (!!document?.isSubscribed &&
+        stores.policies.abilities(activeDocumentId).unsubscribe)
    );
  },
  perform: async ({ activeDocumentId, stores, currentUserId, t }) => {
@@ -473,7 +382,7 @@ export const unsubscribeDocument = createActionV2({
  },
 });

-export const shareDocument = createActionV2({
+export const shareDocument = createAction({
  name: ({ t }) => `${t("Permissions")}…`,
  analyticsName: "Share document",
  section: ActiveDocumentSection,
@@ -506,7 +415,7 @@ export const shareDocument = createActionV2({
  },
 });

-export const downloadDocumentAsHTML = createActionV2({
+export const downloadDocumentAsHTML = createAction({
  name: ({ t }) => t("HTML"),
  analyticsName: "Download document as HTML",
  section: ActiveDocumentSection,
@@ -525,7 +434,7 @@ export const downloadDocumentAsHTML = createActionV2({
  },
 });

-export const downloadDocumentAsPDF = createActionV2({
+export const downloadDocumentAsPDF = createAction({
  name: ({ t }) => t("PDF"),
  analyticsName: "Download document as PDF",
  section: ActiveDocumentSection,
@@ -533,11 +442,9 @@ export const downloadDocumentAsPDF = createActionV2({
  icon: <DownloadIcon />,
  iconInContextMenu: false,
  visible: ({ activeDocumentId, stores }) =>
-    !!(
-      activeDocumentId &&
-      stores.policies.abilities(activeDocumentId).download &&
-      env.PDF_EXPORT_ENABLED
-    ),
+    !!activeDocumentId &&
+    stores.policies.abilities(activeDocumentId).download &&
+    env.PDF_EXPORT_ENABLED,
  perform: ({ activeDocumentId, t, stores }) => {
    if (!activeDocumentId) {
      return;
@@ -551,7 +458,7 @@ export const downloadDocumentAsPDF = createActionV2({
  },
 });

-export const downloadDocumentAsMarkdown = createActionV2({
+export const downloadDocumentAsMarkdown = createAction({
  name: ({ t }) => t("Markdown"),
  analyticsName: "Download document as Markdown",
  section: ActiveDocumentSection,
@@ -570,7 +477,7 @@ export const downloadDocumentAsMarkdown = createActionV2({
  },
 });

-export const downloadDocument = createActionV2WithChildren({
+export const downloadDocument = createAction({
  name: ({ t, isContextMenu }) =>
    isContextMenu ? t("Download") : t("Download document"),
  analyticsName: "Download document",
@@ -586,7 +493,7 @@ export const downloadDocument = createActionV2WithChildren({
  ],
 });

-export const copyDocumentAsMarkdown = createActionV2({
+export const copyDocumentAsMarkdown = createAction({
  name: ({ t }) => t("Copy as Markdown"),
  section: ActiveDocumentSection,
  keywords: "clipboard",
@@ -605,7 +512,7 @@ export const copyDocumentAsMarkdown = createActionV2({
  },
 });

-export const copyDocumentAsPlainText = createActionV2({
+export const copyDocumentAsPlainText = createAction({
  name: ({ t }) => t("Copy as text"),
  section: ActiveDocumentSection,
  keywords: "clipboard",
@@ -624,7 +531,7 @@ export const copyDocumentAsPlainText = createActionV2({
  },
 });

-export const copyDocumentShareLink = createActionV2({
+export const copyDocumentShareLink = createAction({
  name: ({ t }) => t("Copy public link"),
  section: ActiveDocumentSection,
  keywords: "clipboard share",
@@ -645,7 +552,7 @@ export const copyDocumentShareLink = createActionV2({
  },
 });

-export const copyDocumentLink = createActionV2({
+export const copyDocumentLink = createAction({
  name: ({ t }) => t("Copy link"),
  section: ActiveDocumentSection,
  keywords: "clipboard",
@@ -663,7 +570,7 @@ export const copyDocumentLink = createActionV2({
  },
 });

-export const copyDocument = createActionV2WithChildren({
+export const copyDocument = createAction({
  name: ({ t }) => t("Copy"),
  analyticsName: "Copy document",
  section: ActiveDocumentSection,
@@ -677,7 +584,7 @@ export const copyDocument = createActionV2WithChildren({
  ],
 });

-export const duplicateDocument = createActionV2({
+export const duplicateDocument = createAction({
  name: ({ t, isContextMenu }) =>
    isContextMenu ? t("Duplicate") : t("Duplicate document"),
  analyticsName: "Duplicate document",
@@ -713,7 +620,7 @@ export const duplicateDocument = createActionV2({
 * Pin a document to a collection. Pinned documents will be displayed at the top
 * of the collection for all collection members to see.
 */
-export const pinDocumentToCollection = createActionV2({
+export const pinDocumentToCollection = createAction({
  name: ({ activeDocumentId = "", t, stores }) => {
    const selectedDocument = stores.documents.get(activeDocumentId);
    const collectionName = selectedDocument
@@ -758,7 +665,7 @@ export const pinDocumentToCollection = createActionV2({
 * Pin a document to team home. Pinned documents will be displayed at the top
 * of the home screen for all team members to see.
 */
-export const pinDocumentToHome = createActionV2({
+export const pinDocumentToHome = createAction({
  name: ({ t }) => t("Pin to home"),
  analyticsName: "Pin document to home",
  section: ActiveDocumentSection,
@@ -790,7 +697,7 @@ export const pinDocumentToHome = createActionV2({
  },
 });

-export const pinDocument = createActionV2WithChildren({
+export const pinDocument = createAction({
  name: ({ t }) => t("Pin"),
  analyticsName: "Pin document",
  section: ActiveDocumentSection,
@@ -798,7 +705,7 @@ export const pinDocument = createActionV2WithChildren({
  children: [pinDocumentToCollection, pinDocumentToHome],
 });

-export const searchInDocument = createInternalLinkActionV2({
+export const searchInDocument = createAction({
  name: ({ t }) => t("Search in document"),
  analyticsName: "Search document",
  section: ActiveDocumentSection,
@@ -811,24 +718,12 @@ export const searchInDocument = createInternalLinkActionV2({
    const document = stores.documents.get(activeDocumentId);
    return !!document?.isActive;
  },
-  to: ({ activeDocumentId, sidebarContext }) => {
-    if (!activeDocumentId) {
-      return "";
-    }
-
-    const [pathname, search] = searchPath({
-      documentId: activeDocumentId,
-    }).split("?");
-
-    return {
-      pathname,
-      search,
-      state: { sidebarContext },
-    };
+  perform: ({ activeDocumentId }) => {
+    history.push(searchPath({ documentId: activeDocumentId }));
  },
 });

-export const printDocument = createActionV2({
+export const printDocument = createAction({
  name: ({ t, isContextMenu }) =>
    isContextMenu ? t("Print") : t("Print document"),
  analyticsName: "Print document",
@@ -840,7 +735,7 @@ export const printDocument = createActionV2({
  },
 });

-export const importDocument = createActionV2({
+export const importDocument = createAction({
  name: ({ t }) => t("Import document"),
  analyticsName: "Import document",
  section: DocumentSection,
@@ -887,7 +782,7 @@ export const importDocument = createActionV2({
  },
 });

-export const createTemplateFromDocument = createActionV2({
+export const createTemplateFromDocument = createAction({
  name: ({ t }) => t("Templatize"),
  analyticsName: "Templatize document",
  section: ActiveDocumentSection,
@@ -949,7 +844,7 @@ export const searchDocumentsForQuery = (query: string) =>
    visible: ({ location }) => location.pathname !== searchPath(),
  });

-export const moveTemplateToWorkspace = createActionV2({
+export const moveTemplateToWorkspace = createAction({
  name: ({ t }) => t("Move to workspace"),
  analyticsName: "Move template to workspace",
  section: DocumentSection,
@@ -979,7 +874,7 @@ export const moveTemplateToWorkspace = createActionV2({
  },
 });

-export const moveDocumentToCollection = createActionV2({
+export const moveDocumentToCollection = createAction({
  name: ({ activeDocumentId, stores, t }) => {
    if (!activeDocumentId) {
      return t("Move");
@@ -1016,7 +911,7 @@ export const moveDocumentToCollection = createActionV2({
  },
 });

-export const moveDocument = createActionV2({
+export const moveDocument = createAction({
  name: ({ t }) => t("Move"),
  analyticsName: "Move document",
  section: ActiveDocumentSection,
@@ -1035,7 +930,7 @@ export const moveDocument = createActionV2({
  perform: moveDocumentToCollection.perform,
 });

-export const moveTemplate = createActionV2WithChildren({
+export const moveTemplate = createAction({
  name: ({ t }) => t("Move"),
  analyticsName: "Move document",
  section: ActiveDocumentSection,
@@ -1054,7 +949,7 @@ export const moveTemplate = createActionV2WithChildren({
  children: [moveTemplateToWorkspace, moveDocumentToCollection],
 });

-export const archiveDocument = createActionV2({
+export const archiveDocument = createAction({
  name: ({ t }) => `${t("Archive")}…`,
  analyticsName: "Archive document",
  section: ActiveDocumentSection,
@@ -1094,102 +989,7 @@ export const archiveDocument = createActionV2({
  },
 });

-export const restoreDocument = createActionV2({
-  name: ({ t }) => `${t("Restore")}`,
-  analyticsName: "Restore document",
-  section: ActiveDocumentSection,
-  icon: <RestoreIcon />,
-  visible: ({ activeDocumentId, stores }) => {
-    const document = activeDocumentId
-      ? stores.documents.get(activeDocumentId)
-      : undefined;
-    if (!document) {
-      return false;
-    }
-
-    const collection = document.collectionId
-      ? stores.collections.get(document.collectionId)
-      : undefined;
-    const can = stores.policies.abilities(document.id);
-
-    return (
-      !!(document.isWorkspaceTemplate || collection?.isActive) &&
-      !!(can.restore || can.unarchive)
-    );
-  },
-  perform: async ({ t, stores, activeDocumentId }) => {
-    const document = activeDocumentId
-      ? stores.documents.get(activeDocumentId)
-      : undefined;
-    if (!document) {
-      return;
-    }
-
-    await document.restore();
-    toast.success(
-      t("{{ documentName }} restored", {
-        documentName: capitalize(document.noun),
-      })
-    );
-  },
-});
-
-export const restoreDocumentToCollection = createActionV2WithChildren({
-  name: ({ t }) => `${t("Restore")}…`,
-  analyticsName: "Restore document",
-  section: ActiveDocumentSection,
-  icon: <RestoreIcon />,
-  visible: ({ stores, activeDocumentId }) => {
-    const document = activeDocumentId
-      ? stores.documents.get(activeDocumentId)
-      : undefined;
-    if (!document) {
-      return false;
-    }
-
-    const can = stores.policies.abilities(document.id);
-    const collection = document.collectionId
-      ? stores.collections.get(document.collectionId)
-      : undefined;
-
-    return (
-      !(document.isWorkspaceTemplate || collection?.isActive) &&
-      !!(can.restore || can.unarchive)
-    );
-  },
-  children: ({ t, activeDocumentId, stores }) => {
-    const { collections, documents, policies } = stores;
-
-    const document = activeDocumentId
-      ? documents.get(activeDocumentId)
-      : undefined;
-    if (!document) {
-      return [];
-    }
-
-    const actions = collections.orderedData.map((collection) => {
-      const can = policies.abilities(collection.id);
-      return createActionV2({
-        name: collection.name,
-        section: ActiveDocumentSection,
-        icon: <CollectionIcon collection={collection} />,
-        visible: can.createDocument,
-        perform: async () => {
-          await document.restore({ collectionId: collection.id });
-          toast.success(
-            t("{{ documentName }} restored", {
-              documentName: capitalize(document.noun),
-            })
-          );
-        },
-      });
-    });
-
-    return [createActionV2Group({ name: t("Choose a collection"), actions })];
-  },
-});
-
-export const deleteDocument = createActionV2({
+export const deleteDocument = createAction({
  name: ({ t }) => `${t("Delete")}…`,
  analyticsName: "Delete document",
  section: ActiveDocumentSection,
@@ -1223,7 +1023,7 @@ export const deleteDocument = createActionV2({
  },
 });

-export const permanentlyDeleteDocument = createActionV2({
+export const permanentlyDeleteDocument = createAction({
  name: ({ t }) => t("Permanently delete"),
  analyticsName: "Permanently delete document",
  section: ActiveDocumentSection,
@@ -1278,7 +1078,7 @@ export const permanentlyDeleteDocumentsInTrash = createAction({
  },
 });

-export const openDocumentComments = createActionV2({
+export const openDocumentComments = createAction({
  name: ({ t }) => t("Comments"),
  analyticsName: "Open comments",
  section: ActiveDocumentSection,
@@ -1301,7 +1101,7 @@ export const openDocumentComments = createActionV2({
  },
 });

-export const openDocumentHistory = createInternalLinkActionV2({
+export const openDocumentHistory = createAction({
  name: ({ t }) => t("History"),
  analyticsName: "Open document history",
  section: ActiveDocumentSection,
@@ -1310,25 +1110,19 @@ export const openDocumentHistory = createInternalLinkActionV2({
    const can = stores.policies.abilities(activeDocumentId ?? "");
    return !!activeDocumentId && can.listRevisions;
  },
-  to: ({ activeDocumentId, stores, sidebarContext }) => {
-    const document = activeDocumentId
-      ? stores.documents.get(activeDocumentId)
-      : undefined;
-    if (!document) {
-      return "";
+  perform: ({ activeDocumentId, stores }) => {
+    if (!activeDocumentId) {
+      return;
    }
-
-    const [pathname, search] = documentHistoryPath(document).split("?");
-
-    return {
-      pathname,
-      search,
-      state: { sidebarContext },
-    };
+    const document = stores.documents.get(activeDocumentId);
+    if (!document) {
+      return;
+    }
+    history.push(documentHistoryPath(document));
  },
 });

-export const openDocumentInsights = createActionV2({
+export const openDocumentInsights = createAction({
  name: ({ t }) => t("Insights"),
  analyticsName: "Open document insights",
  section: ActiveDocumentSection,
@@ -1346,22 +1140,50 @@ export const openDocumentInsights = createActionV2({
      !document?.isDeleted
    );
  },
-  perform: ({ activeDocumentId, stores, t }) => {
+  perform: ({ activeDocumentId, stores }) => {
+    if (!activeDocumentId) {
+      return;
+    }
+    const document = stores.documents.get(activeDocumentId);
+    if (!document) {
+      return;
+    }
+    history.push(documentInsightsPath(document));
+  },
+});
+
+export const toggleViewerInsights = createAction({
+  name: ({ t, stores, activeDocumentId }) => {
    const document = activeDocumentId
      ? stores.documents.get(activeDocumentId)
      : undefined;
+    return document?.insightsEnabled
+      ? t("Disable viewer insights")
+      : t("Enable viewer insights");
+  },
+  analyticsName: "Toggle viewer insights",
+  section: ActiveDocumentSection,
+  icon: <EyeIcon />,
+  visible: ({ activeDocumentId, stores }) => {
+    const can = stores.policies.abilities(activeDocumentId ?? "");
+    return can.updateInsights;
+  },
+  perform: async ({ activeDocumentId, stores }) => {
+    if (!activeDocumentId) {
+      return;
+    }
+    const document = stores.documents.get(activeDocumentId);
    if (!document) {
      return;
    }

-    stores.dialogs.openModal({
-      title: t("Insights"),
-      content: <Insights document={document} />,
+    await document.save({
+      insightsEnabled: !document.insightsEnabled,
    });
  },
 });

-export const leaveDocument = createActionV2({
+export const leaveDocument = createAction({
  name: ({ t }) => t("Leave document"),
  analyticsName: "Leave document",
  section: ActiveDocumentSection,
@@ -1397,27 +1219,6 @@ export const leaveDocument = createActionV2({
  },
 });

-export const applyTemplateFactory = ({
-  actions,
-}: {
-  actions: (ActionV2 | ActionV2Group | ActionV2Separator)[];
-}) =>
-  createActionV2WithChildren({
-    name: ({ t }) => t("Apply template"),
-    analyticsName: "Apply template",
-    section: ActiveDocumentSection,
-    icon: <ShapesIcon />,
-    visible: ({ activeDocumentId, stores }) => {
-      const { policies } = stores;
-      const can = activeDocumentId
-        ? policies.abilities(activeDocumentId)
-        : undefined;
-
-      return !!can?.update;
-    },
-    children: actions,
-  });
-
 export const rootDocumentActions = [
  openDocument,
  archiveDocument,
@@ -1,28 +0,0 @@
-import { TrashIcon } from "outline-icons";
-import stores from "~/stores";
-import { createAction } from "..";
-import { SettingsSection } from "../sections";
-import Integration from "~/models/Integration";
-import { IntegrationType } from "@shared/types";
-import { DisconnectAnalyticsDialog } from "~/components/DisconnectAnalyticsDialog";
-
-export const disconnectAnalyticsIntegrationFactory = (
-  integration?: Integration<IntegrationType.Analytics>
-) =>
-  createAction({
-    name: ({ t }) => t("Disconnect analytics"),
-    analyticsName: "Disconnect analytics",
-    section: SettingsSection,
-    icon: <TrashIcon />,
-    keywords: "disconnect",
-    visible: () => !!integration,
-    perform: ({ t, event }) => {
-      event?.preventDefault();
-      event?.stopPropagation();
-
-      stores.dialogs.openModal({
-        title: t("Disconnect analytics"),
-        content: <DisconnectAnalyticsDialog integration={integration!} />,
-      });
-    },
-  });
@@ -12,19 +12,13 @@ import {
  BrowserIcon,
  ShapesIcon,
  DraftsIcon,
-  BugIcon,
 } from "outline-icons";
 import { UrlHelper } from "@shared/utils/UrlHelper";
 import { isMac } from "@shared/utils/browser";
 import stores from "~/stores";
 import SearchQuery from "~/models/SearchQuery";
 import KeyboardShortcuts from "~/scenes/KeyboardShortcuts";
-import {
-  createAction,
-  createActionV2,
-  createExternalLinkActionV2,
-  createInternalLinkActionV2,
-} from "~/actions";
+import { createAction } from "~/actions";
 import { NavigationSection, RecentSearchesSection } from "~/actions/sections";
 import Desktop from "~/utils/Desktop";
 import isCloudHosted from "~/utils/isCloudHosted";
@@ -103,7 +97,7 @@ export const navigateToSettings = createAction({
  to: settingsPath(),
 });

-export const navigateToWorkspaceSettings = createInternalLinkActionV2({
+export const navigateToWorkspaceSettings = createAction({
  name: ({ t }) => t("Settings"),
  analyticsName: "Navigate to workspace settings",
  section: NavigationSection,
@@ -112,7 +106,7 @@ export const navigateToWorkspaceSettings = createInternalLinkActionV2({
  to: settingsPath("details"),
 });

-export const navigateToProfileSettings = createInternalLinkActionV2({
+export const navigateToProfileSettings = createAction({
  name: ({ t }) => t("Profile"),
  analyticsName: "Navigate to profile settings",
  section: NavigationSection,
@@ -130,9 +124,8 @@ export const navigateToTemplateSettings = createAction({
  to: settingsPath("templates"),
 });

-export const navigateToNotificationSettings = createInternalLinkActionV2({
-  name: ({ t, isContextMenu }) =>
-    isContextMenu ? t("Notification settings") : t("Notifications"),
+export const navigateToNotificationSettings = createAction({
+  name: ({ t }) => t("Notifications"),
  analyticsName: "Navigate to notification settings",
  section: NavigationSection,
  iconInContextMenu: false,
@@ -140,7 +133,7 @@ export const navigateToNotificationSettings = createInternalLinkActionV2({
  to: settingsPath("notifications"),
 });

-export const navigateToAccountPreferences = createInternalLinkActionV2({
+export const navigateToAccountPreferences = createAction({
  name: ({ t }) => t("Preferences"),
  analyticsName: "Navigate to account preferences",
  section: NavigationSection,
@@ -149,24 +142,28 @@ export const navigateToAccountPreferences = createInternalLinkActionV2({
  to: settingsPath("preferences"),
 });

-export const openDocumentation = createExternalLinkActionV2({
+export const openDocumentation = createAction({
  name: ({ t }) => t("Documentation"),
  analyticsName: "Open documentation",
  section: NavigationSection,
  iconInContextMenu: false,
  icon: <OpenIcon />,
-  url: UrlHelper.guide,
-  target: "_blank",
+  to: {
+    url: UrlHelper.guide,
+    target: "_blank",
+  },
 });

-export const openAPIDocumentation = createExternalLinkActionV2({
+export const openAPIDocumentation = createAction({
  name: ({ t }) => t("API documentation"),
  analyticsName: "Open API documentation",
  section: NavigationSection,
  iconInContextMenu: false,
  icon: <OpenIcon />,
-  url: UrlHelper.developers,
-  target: "_blank",
+  to: {
+    url: UrlHelper.developers,
+    target: "_blank",
+  },
 });

 export const toggleSidebar = createAction({
@@ -177,37 +174,41 @@ export const toggleSidebar = createAction({
  perform: () => stores.ui.toggleCollapsedSidebar(),
 });

-export const openFeedbackUrl = createExternalLinkActionV2({
+export const openFeedbackUrl = createAction({
  name: ({ t }) => t("Send us feedback"),
  analyticsName: "Open feedback",
  section: NavigationSection,
  iconInContextMenu: false,
  icon: <EmailIcon />,
-  url: UrlHelper.contact,
-  target: "_blank",
+  to: {
+    url: UrlHelper.contact,
+    target: "_blank",
+  },
 });

-export const openBugReportUrl = createExternalLinkActionV2({
+export const openBugReportUrl = createAction({
  name: ({ t }) => t("Report a bug"),
  analyticsName: "Open bug report",
  section: NavigationSection,
-  iconInContextMenu: false,
-  icon: <BugIcon />,
-  url: UrlHelper.github,
-  target: "_blank",
+  to: {
+    url: UrlHelper.github,
+    target: "_blank",
+  },
 });

-export const openChangelog = createExternalLinkActionV2({
+export const openChangelog = createAction({
  name: ({ t }) => t("Changelog"),
  analyticsName: "Open changelog",
  section: NavigationSection,
  iconInContextMenu: false,
  icon: <OpenIcon />,
-  url: UrlHelper.changelog,
-  target: "_blank",
+  to: {
+    url: UrlHelper.changelog,
+    target: "_blank",
+  },
 });

-export const openKeyboardShortcuts = createActionV2({
+export const openKeyboardShortcuts = createAction({
  name: ({ t }) => t("Keyboard shortcuts"),
  analyticsName: "Open keyboard shortcuts",
  section: NavigationSection,
@@ -238,7 +239,7 @@ export const downloadApp = createAction({
  },
 });

-export const logout = createActionV2({
+export const logout = createAction({
  name: ({ t }) => t("Log out"),
  analyticsName: "Log out",
  section: NavigationSection,
@@ -1,5 +1,5 @@
 import { ArchiveIcon, MarkAsReadIcon } from "outline-icons";
-import { createAction, createActionV2 } from "..";
+import { createAction } from "..";
 import { NotificationSection } from "../sections";

 export const markNotificationsAsRead = createAction({
@@ -12,7 +12,7 @@ export const markNotificationsAsRead = createAction({
  visible: ({ stores }) => stores.notifications.approximateUnreadCount > 0,
 });

-export const markNotificationsAsArchived = createActionV2({
+export const markNotificationsAsArchived = createAction({
  name: ({ t }) => t("Archive all notifications"),
  analyticsName: "Mark notifications as archived",
  section: NotificationSection,
@@ -3,7 +3,7 @@ import { LinkIcon, RestoreIcon, TrashIcon } from "outline-icons";
 import { matchPath } from "react-router-dom";
 import { toast } from "sonner";
 import stores from "~/stores";
-import { createAction, createActionV2 } from "~/actions";
+import { createAction } from "~/actions";
 import { RevisionSection } from "~/actions/sections";
 import history from "~/utils/history";
 import {
@@ -11,7 +11,7 @@ import {
  matchDocumentHistory,
 } from "~/utils/routeHelpers";

-export const restoreRevision = createActionV2({
+export const restoreRevision = createAction({
  name: ({ t }) => t("Restore"),
  analyticsName: "Restore revision",
  icon: <RestoreIcon />,
@@ -73,7 +73,7 @@ export const deleteRevision = createAction({
  },
 });

-export const copyLinkToRevision = createActionV2({
+export const copyLinkToRevision = createAction({
  name: ({ t }) => t("Copy link"),
  analyticsName: "Copy link to revision",
  icon: <LinkIcon />,
@@ -1,48 +1,50 @@
 import { SunIcon, MoonIcon, BrowserIcon } from "outline-icons";
+import stores from "~/stores";
 import { Theme } from "~/stores/UiStore";
-import { createActionV2, createActionV2WithChildren } from "~/actions";
+import { createAction } from "~/actions";
 import { SettingsSection } from "~/actions/sections";

-export const changeToDarkTheme = createActionV2({
+export const changeToDarkTheme = createAction({
  name: ({ t }) => t("Dark"),
  analyticsName: "Change to dark theme",
  icon: <MoonIcon />,
  iconInContextMenu: false,
  keywords: "theme dark night",
  section: SettingsSection,
-  selected: ({ stores }) => stores.ui.theme === "dark",
-  perform: ({ stores }) => stores.ui.setTheme(Theme.Dark),
+  selected: () => stores.ui.theme === "dark",
+  perform: () => stores.ui.setTheme(Theme.Dark),
 });

-export const changeToLightTheme = createActionV2({
+export const changeToLightTheme = createAction({
  name: ({ t }) => t("Light"),
  analyticsName: "Change to light theme",
  icon: <SunIcon />,
  iconInContextMenu: false,
  keywords: "theme light day",
  section: SettingsSection,
-  selected: ({ stores }) => stores.ui.theme === "light",
-  perform: ({ stores }) => stores.ui.setTheme(Theme.Light),
+  selected: () => stores.ui.theme === "light",
+  perform: () => stores.ui.setTheme(Theme.Light),
 });

-export const changeToSystemTheme = createActionV2({
+export const changeToSystemTheme = createAction({
  name: ({ t }) => t("System"),
  analyticsName: "Change to system theme",
  icon: <BrowserIcon />,
  iconInContextMenu: false,
  keywords: "theme system default",
  section: SettingsSection,
-  selected: ({ stores }) => stores.ui.theme === "system",
-  perform: ({ stores }) => stores.ui.setTheme(Theme.System),
+  selected: () => stores.ui.theme === "system",
+  perform: () => stores.ui.setTheme(Theme.System),
 });

-export const changeTheme = createActionV2WithChildren({
+export const changeTheme = createAction({
  name: ({ t, isContextMenu }) =>
    isContextMenu ? t("Appearance") : t("Change theme"),
  analyticsName: "Change theme",
  placeholder: ({ t }) => t("Change theme to"),
-  icon: ({ stores }) =>
-    stores.ui.resolvedTheme === "light" ? <SunIcon /> : <MoonIcon />,
+  icon: function _Icon() {
+    return stores.ui.resolvedTheme === "light" ? <SunIcon /> : <MoonIcon />;
+  },
  keywords: "appearance display",
  section: SettingsSection,
  children: [changeToLightTheme, changeToDarkTheme, changeToSystemTheme],
@@ -1,59 +0,0 @@
-import copy from "copy-to-clipboard";
-import Share from "~/models/Share";
-import { createActionV2, createInternalLinkActionV2 } from "..";
-import { ArrowIcon, CopyIcon, TrashIcon } from "outline-icons";
-import { ShareSection } from "../sections";
-import env from "~/env";
-import { toast } from "sonner";
-
-export const copyShareUrlFactory = ({ share }: { share: Share }) =>
-  createActionV2({
-    name: ({ t }) => t("Copy link"),
-    analyticsName: "Copy share link",
-    section: ShareSection,
-    icon: <CopyIcon />,
-    perform: ({ t }) => {
-      copy(share.url, {
-        debug: env.ENVIRONMENT !== "production",
-        format: "text/plain",
-      });
-      toast.success(t("Share link copied"));
-    },
-  });
-
-export const goToShareSourceFactory = ({ share }: { share: Share }) =>
-  createInternalLinkActionV2({
-    name: ({ t }) =>
-      share.collectionId ? t("Go to collection") : t("Go to document"),
-    analyticsName: "Go to share source",
-    section: ShareSection,
-    icon: <ArrowIcon />,
-    to: {
-      pathname: share.sourcePathWithFallback,
-      state: { sidebarContext: "collections" }, // optimistic preference of "collections"
-    },
-  });
-
-export const revokeShareFactory = ({
-  share,
-  can,
-}: {
-  share: Share;
-  can: Record<string, boolean>;
-}) =>
-  createActionV2({
-    name: ({ t }) => t("Revoke link"),
-    analyticsName: "Revoke share",
-    section: ShareSection,
-    icon: <TrashIcon />,
-    dangerous: true,
-    visible: !!can.revoke,
-    perform: async ({ t, stores }) => {
-      try {
-        await stores.shares.revoke(share);
-        toast.message(t("Share link revoked"));
-      } catch (err) {
-        toast.error(err.message);
-      }
-    },
-  });
@@ -5,24 +5,20 @@ import RootStore from "~/stores/RootStore";
 import { LoginDialog } from "~/scenes/Login/components/LoginDialog";
 import TeamNew from "~/scenes/TeamNew";
 import TeamLogo from "~/components/TeamLogo";
-import {
-  createActionV2,
-  createActionV2WithChildren,
-  createExternalLinkActionV2,
-} from "~/actions";
-import { ActionContext, ExternalLinkActionV2 } from "~/types";
+import { createAction } from "~/actions";
+import { ActionContext } from "~/types";
 import Desktop from "~/utils/Desktop";
 import { TeamSection } from "../sections";

 export const switchTeamsList = ({ stores }: { stores: RootStore }) =>
-  stores.auth.availableTeams?.map<ExternalLinkActionV2>((session) =>
-    createExternalLinkActionV2({
-      id: `switch-${session.id}`,
-      name: session.name,
-      analyticsName: "Switch workspace",
-      section: TeamSection,
-      keywords: "change switch workspace organization team",
-      icon: (
+  stores.auth.availableTeams?.map((session) => ({
+    id: `switch-${session.id}`,
+    name: session.name,
+    analyticsName: "Switch workspace",
+    section: TeamSection,
+    keywords: "change switch workspace organization team",
+    icon: function _Icon() {
+      return (
        <StyledTeamLogo
          alt={session.name}
          model={{
@@ -33,15 +29,16 @@ export const switchTeamsList = ({ stores }: { stores: RootStore }) =>
          }}
          size={24}
        />
-      ),
-      visible: ({ currentTeamId }: ActionContext) =>
-        currentTeamId !== session.id,
+      );
+    },
+    visible: ({ currentTeamId }: ActionContext) => currentTeamId !== session.id,
+    to: {
      url: session.url,
      target: "_self",
-    })
-  ) ?? [];
+    },
+  })) ?? [];

-export const switchTeam = createActionV2WithChildren({
+export const switchTeam = createAction({
  name: ({ t }) => t("Switch workspace"),
  placeholder: ({ t }) => t("Select a workspace"),
  analyticsName: "Switch workspace",
@@ -52,7 +49,7 @@ export const switchTeam = createActionV2WithChildren({
  children: switchTeamsList,
 });

-export const createTeam = createActionV2({
+export const createTeam = createAction({
  name: ({ t }) => `${t("New workspace")}…`,
  analyticsName: "New workspace",
  keywords: "create change switch workspace organization team",
@@ -68,13 +65,14 @@ export const createTeam = createActionV2({
    if (user) {
      stores.dialogs.openModal({
        title: t("Create a workspace"),
+        fullscreen: true,
        content: <TeamNew user={user} />,
      });
    }
  },
 });

-export const desktopLoginTeam = createActionV2({
+export const desktopLoginTeam = createAction({
  name: ({ t }) => t("Login to workspace"),
  analyticsName: "Login to workspace",
  keywords: "change switch workspace organization team",
@@ -8,7 +8,7 @@ import {
  UserChangeRoleDialog,
  UserDeleteDialog,
 } from "~/components/UserDialogs";
-import { createAction, createActionV2 } from "~/actions";
+import { createAction } from "~/actions";
 import { UserSection } from "~/actions/sections";

 export const inviteUser = createAction({
@@ -28,7 +28,7 @@ export const inviteUser = createAction({
 });

 export const updateUserRoleActionFactory = (user: User, role: UserRole) =>
-  createActionV2({
+  createAction({
    name: ({ t }) =>
      UserRoleHelper.isRoleHigher(role, user!.role)
        ? `${t("Promote to {{ role }}", {
@@ -63,7 +63,7 @@ export const updateUserRoleActionFactory = (user: User, role: UserRole) =>
  });

 export const deleteUserActionFactory = (userId: string) =>
-  createActionV2({
+  createAction({
    name: ({ t }) => `${t("Delete user")}…`,
    analyticsName: "Delete user",
    keywords: "leave",
@@ -1,4 +1,3 @@
-import { LocationDescriptor } from "history";
 import flattenDeep from "lodash/flattenDeep";
 import { toast } from "sonner";
 import { Optional } from "utility-types";
@@ -6,24 +5,16 @@ import { v4 as uuidv4 } from "uuid";
 import {
  Action,
  ActionContext,
-  ActionV2,
-  ActionV2Group,
-  ActionV2Separator as TActionV2Separator,
-  ActionV2Variant,
-  ActionV2WithChildren,
-  ExternalLinkActionV2,
-  InternalLinkActionV2,
+  CommandBarAction,
  MenuExternalLink,
  MenuInternalLink,
-  MenuItem,
  MenuItemButton,
  MenuItemWithChildren,
 } from "~/types";
 import Analytics from "~/utils/Analytics";
 import history from "~/utils/history";
-import { Action as KbarAction } from "kbar";

-export function resolve<T>(value: any, context: ActionContext): T {
+function resolve<T>(value: any, context: ActionContext): T {
  return typeof value === "function" ? value(context) : value;
 }

@@ -32,7 +23,7 @@ export function createAction(definition: Optional<Action, "id">): Action {
    ...definition,
    perform: definition.perform
      ? (context) => {
-          // We must use the specific analytics name here as the action name is
+          // We muse use the specific analytics name here as the action name is
          // translated and potentially contains user strings.
          if (definition.analyticsName) {
            Analytics.track("perform_action", definition.analyticsName, {
@@ -112,7 +103,7 @@ export function actionToMenuItem(
 export function actionToKBar(
  action: Action,
  context: ActionContext
-): KbarAction[] {
+): CommandBarAction[] {
  if (typeof action.visible === "function" && !action.visible(context)) {
    return [];
  }
@@ -172,281 +163,3 @@ export async function performAction(action: Action, context: ActionContext) {

  return result;
 }
-
-/** Actions V2 */
-
-export const ActionV2Separator: TActionV2Separator = {
-  type: "action_separator",
-};
-
-export function createActionV2(
-  definition: Optional<Omit<ActionV2, "type" | "variant">, "id">
-): ActionV2 {
-  return {
-    ...definition,
-    type: "action",
-    variant: "action",
-    perform: definition.perform
-      ? (context) => {
-          // We must use the specific analytics name here as the action name is
-          // translated and potentially contains user strings.
-          if (definition.analyticsName) {
-            Analytics.track("perform_action", definition.analyticsName, {
-              context: context.isButton
-                ? "button"
-                : context.isCommandBar
-                  ? "commandbar"
-                  : "contextmenu",
-            });
-          }
-          return definition.perform(context);
-        }
-      : () => {},
-    id: definition.id ?? uuidv4(),
-  };
-}
-
-export function createInternalLinkActionV2(
-  definition: Optional<Omit<InternalLinkActionV2, "type" | "variant">, "id">
-): InternalLinkActionV2 {
-  return {
-    ...definition,
-    type: "action",
-    variant: "internal_link",
-    id: definition.id ?? uuidv4(),
-  };
-}
-
-export function createExternalLinkActionV2(
-  definition: Optional<Omit<ExternalLinkActionV2, "type" | "variant">, "id">
-): ExternalLinkActionV2 {
-  return {
-    ...definition,
-    type: "action",
-    variant: "external_link",
-    id: definition.id ?? uuidv4(),
-  };
-}
-
-export function createActionV2WithChildren(
-  definition: Optional<Omit<ActionV2WithChildren, "type" | "variant">, "id">
-): ActionV2WithChildren {
-  return {
-    ...definition,
-    type: "action",
-    variant: "action_with_children",
-    id: definition.id ?? uuidv4(),
-  };
-}
-
-export function createActionV2Group(
-  definition: Omit<ActionV2Group, "type">
-): ActionV2Group {
-  return {
-    ...definition,
-    type: "action_group",
-  };
-}
-
-export function createRootMenuAction(
-  actions: (ActionV2Variant | ActionV2Group | TActionV2Separator)[]
-): ActionV2WithChildren {
-  return {
-    id: uuidv4(),
-    type: "action",
-    variant: "action_with_children",
-    name: "root_action",
-    section: "Root",
-    children: actions,
-  };
-}
-
-export function actionV2ToMenuItem(
-  action: ActionV2Variant | ActionV2Group | TActionV2Separator,
-  context: ActionContext
-): MenuItem {
-  switch (action.type) {
-    case "action": {
-      const title = resolve<string>(action.name, context);
-      const visible = resolve<boolean>(action.visible, context) ?? true;
-      const disabled = resolve<boolean>(action.disabled, context);
-      const icon =
-        !!action.icon && action.iconInContextMenu !== false
-          ? resolve<React.ReactNode>(action.icon, context)
-          : undefined;
-
-      switch (action.variant) {
-        case "action":
-          return {
-            type: "button",
-            title,
-            icon,
-            visible,
-            disabled,
-            tooltip: resolve<React.ReactChild>(action.tooltip, context),
-            selected: resolve<boolean>(action.selected, context),
-            dangerous: action.dangerous,
-            onClick: () => performActionV2(action, context),
-          };
-
-        case "internal_link": {
-          const to = resolve<LocationDescriptor>(action.to, context);
-          return {
-            type: "route",
-            title,
-            icon,
-            visible,
-            disabled,
-            to,
-          };
-        }
-
-        case "external_link":
-          return {
-            type: "link",
-            title,
-            icon,
-            visible,
-            disabled,
-            href: action.target
-              ? { url: action.url, target: action.target }
-              : action.url,
-          };
-
-        case "action_with_children": {
-          const children = resolve<
-            (ActionV2Variant | ActionV2Group | TActionV2Separator)[]
-          >(action.children, context);
-          const subMenuItems = children.map((a) =>
-            actionV2ToMenuItem(a, context)
-          );
-          return {
-            type: "submenu",
-            title,
-            icon,
-            items: subMenuItems,
-            disabled,
-            visible: visible && hasVisibleItems(subMenuItems),
-          };
-        }
-
-        default:
-          throw Error("invalid action variant");
-      }
-    }
-
-    case "action_group": {
-      const groupItems = action.actions.map((a) =>
-        actionV2ToMenuItem(a, context)
-      );
-      return {
-        type: "group",
-        title: resolve<string>(action.name, context),
-        visible: hasVisibleItems(groupItems),
-        items: groupItems,
-      };
-    }
-
-    case "action_separator":
-      return { type: "separator" };
-  }
-}
-
-export function actionV2ToKBar(
-  action: ActionV2Variant,
-  context: ActionContext
-): KbarAction[] {
-  const visible = resolve<boolean>(action.visible, context);
-  if (visible === false) {
-    return [];
-  }
-
-  const name = resolve<string>(action.name, context);
-  const icon = resolve<React.ReactElement>(action.icon, context);
-  const section = resolve<string>(action.section, context);
-
-  const sectionPriority =
-    typeof action.section !== "string" && "priority" in action.section
-      ? ((action.section.priority as number) ?? 0)
-      : 0;
-
-  const priority = (1 + (action.priority ?? 0)) * (1 + (sectionPriority ?? 0));
-
-  switch (action.variant) {
-    case "action":
-    case "internal_link":
-    case "external_link": {
-      return [
-        {
-          id: action.id,
-          name,
-          section,
-          keywords: action.keywords,
-          shortcut: action.shortcut,
-          icon,
-          priority,
-          perform: () => performActionV2(action, context),
-        },
-      ];
-    }
-
-    case "action_with_children": {
-      const resolvedChildren = resolve<ActionV2Variant[]>(
-        action.children,
-        context
-      );
-      const children = resolvedChildren
-        .map((a) => actionV2ToKBar(a, context))
-        .flat()
-        .filter(Boolean);
-
-      return [
-        {
-          id: action.id,
-          name,
-          section,
-          keywords: action.keywords,
-          shortcut: action.shortcut,
-          icon,
-          priority,
-        },
-        ...children.map((child) => ({
-          ...child,
-          parent: child.parent ?? action.id,
-        })),
-      ];
-    }
-
-    default:
-      throw Error("invalid action variant");
-  }
-}
-
-export async function performActionV2(
-  action: Exclude<ActionV2Variant, ActionV2WithChildren>,
-  context: ActionContext
-) {
-  const perform =
-    action.variant === "action"
-      ? () => action.perform(context)
-      : action.variant === "internal_link"
-        ? () => history.push(resolve<LocationDescriptor>(action.to, context))
-        : () => window.open(action.url, action.target);
-
-  const result = perform();
-
-  if (result instanceof Promise) {
-    return result.catch((err: Error) => {
-      toast.error(err.message);
-    });
-  }
-
-  return result;
-}
-
-function hasVisibleItems(items: MenuItem[]) {
-  const applicableTypes = ["button", "link", "route", "group", "submenu"];
-  return items.some(
-    (item) => applicableTypes.includes(item.type) && item.visible
-  );
-}
@@ -36,14 +36,10 @@ export const NavigationSection = ({ t }: ActionContext) => t("Navigation");

 export const NotificationSection = ({ t }: ActionContext) => t("Notification");

-export const GroupSection = ({ t }: ActionContext) => t("Groups");
-
 export const UserSection = ({ t }: ActionContext) => t("People");

 UserSection.priority = 0.5;

-export const ShareSection = ({ t }: ActionContext) => t("Share");
-
 export const TeamSection = ({ t }: ActionContext) => t("Workspace");

 export const RecentSearchesSection = ({ t }: ActionContext) =>
@@ -1,14 +1,9 @@
-/* oxlint-disable react/prop-types */
+/* eslint-disable react/prop-types */
 import * as React from "react";
 import Tooltip, { Props as TooltipProps } from "~/components/Tooltip";
-import { performAction, performActionV2, resolve } from "~/actions";
+import { performAction } from "~/actions";
 import useIsMounted from "~/hooks/useIsMounted";
-import {
-  Action,
-  ActionContext,
-  ActionV2Variant,
-  ActionV2WithChildren,
-} from "~/types";
+import { Action, ActionContext } from "~/types";

 export type Props = React.HTMLAttributes<HTMLButtonElement> & {
  /** Show the button in a disabled state */
@@ -16,7 +11,7 @@ export type Props = React.HTMLAttributes<HTMLButtonElement> & {
  /** Hide the button entirely if action is not applicable */
  hideOnActionDisabled?: boolean;
  /** Action to use on button */
-  action?: Action | Exclude<ActionV2Variant, ActionV2WithChildren>;
+  action?: Action;
  /** Context of action, must be provided with action */
  context?: ActionContext;
  /** If tooltip props are provided the button will be wrapped in a tooltip */
@@ -45,8 +40,8 @@ const ActionButton = React.forwardRef<HTMLButtonElement, Props>(
    const actionContext = { ...context, isButton: true };

    if (
-      action.visible &&
-      !resolve<boolean>(action.visible, actionContext) &&
+      action?.visible &&
+      !action.visible(actionContext) &&
      hideOnActionDisabled
    ) {
      return null;
@@ -68,10 +63,7 @@ const ActionButton = React.forwardRef<HTMLButtonElement, Props>(
            ? (ev) => {
                ev.preventDefault();
                ev.stopPropagation();
-                const response =
-                  "variant" in action
-                    ? performActionV2(action, actionContext)
-                    : performAction(action, actionContext);
+                const response = performAction(action, actionContext);
                if (response?.finally) {
                  setExecuting(true);
                  void response.finally(
@@ -1,4 +1,4 @@
-/* oxlint-disable prefer-rest-params */
+/* eslint-disable prefer-rest-params */
 /* global ga */
 import escape from "lodash/escape";
 import * as React from "react";
@@ -27,6 +27,7 @@ import {
  settingsPath,
  matchDocumentHistory,
  matchDocumentSlug as slug,
+  matchDocumentInsights,
 } from "~/utils/routeHelpers";
 import { DocumentContextProvider } from "./DocumentContext";
 import Fade from "./Fade";
@@ -38,7 +39,9 @@ const DocumentComments = lazyWithRetry(
 const DocumentHistory = lazyWithRetry(
  () => import("~/scenes/Document/components/History")
 );
-
+const DocumentInsights = lazyWithRetry(
+  () => import("~/scenes/Document/components/Insights")
+);
 const CommandBar = lazyWithRetry(() => import("~/components/CommandBar"));

 type Props = {
@@ -95,7 +98,12 @@ const AuthenticatedLayout: React.FC = ({ children }: Props) => {
    !!matchPath(location.pathname, {
      path: matchDocumentHistory,
    }) && can.listRevisions;
+  const showInsights =
+    !!matchPath(location.pathname, {
+      path: matchDocumentInsights,
+    }) && can.listViews;
  const showComments =
+    !showInsights &&
    !showHistory &&
    can.comment &&
    ui.activeDocumentId &&
@@ -107,11 +115,12 @@ const AuthenticatedLayout: React.FC = ({ children }: Props) => {
      initial={false}
      key={ui.activeDocumentId ? "active" : "inactive"}
    >
-      {(showHistory || showComments) && (
+      {(showHistory || showInsights || showComments) && (
        <Route path={`/doc/${slug}`}>
          <SidebarRight>
            <React.Suspense fallback={null}>
              {showHistory && <DocumentHistory />}
+              {showInsights && <DocumentInsights />}
              {showComments && <DocumentComments />}
            </React.Suspense>
          </SidebarRight>
@@ -1,4 +1,5 @@
 import styled from "styled-components";
+import breakpoint from "styled-components-breakpoint";
 import { depths, s } from "@shared/styles";
 import env from "~/env";
 import OutlineIcon from "./Icons/OutlineIcon";
@@ -9,7 +10,7 @@ type Props = {

 function Branding({ href = env.URL }: Props) {
  return (
-    <Link href={href} target="_blank">
+    <Link href={href}>
      <OutlineIcon size={20} />
      &nbsp;{env.APP_NAME}
    </Link>
@@ -32,16 +33,18 @@ const Link = styled.a`
    fill: ${s("text")};
  }

-  z-index: ${depths.sidebar + 1};
-  background: ${s("sidebarBackground")};
-  position: fixed;
-  bottom: 0;
-  right: 0;
-  padding: 16px;
+  ${breakpoint("tablet")`
+    z-index: ${depths.sidebar + 1};
+    background: ${s("sidebarBackground")};
+    position: fixed;
+    bottom: 0;
+    right: 0;
+    padding: 16px;

-  &:hover {
-    background: ${s("sidebarControlHoverBackground")};
-  }
+    &:hover {
+      background: ${s("sidebarControlHoverBackground")};
+    }
+  `};
 `;

 export default Branding;
@@ -6,89 +6,55 @@ import { s, ellipsis } from "@shared/styles";
 import Flex from "~/components/Flex";
 import BreadcrumbMenu from "~/menus/BreadcrumbMenu";
 import { undraggableOnDesktop } from "~/styles";
-import { InternalLinkActionV2, MenuInternalLink } from "~/types";
-import { actionV2ToMenuItem } from "~/actions";
-import useActionContext from "~/hooks/useActionContext";
-import { useComputed } from "~/hooks/useComputed";
-
-type TopLevelAction =
-  | InternalLinkActionV2
-  | { type: "menu"; actions: InternalLinkActionV2[] };
+import { MenuInternalLink } from "~/types";

 type Props = React.PropsWithChildren<{
-  actions: InternalLinkActionV2[];
+  items: MenuInternalLink[];
  max?: number;
  highlightFirstItem?: boolean;
 }>;

 function Breadcrumb(
-  { actions, highlightFirstItem, children, max = 2 }: Props,
+  { items, highlightFirstItem, children, max = 2 }: Props,
  ref: React.RefObject<HTMLDivElement> | null
 ) {
-  const actionContext = useActionContext({ isContextMenu: true });
-
-  const visibleActions = useComputed(
-    () =>
-      actions.filter((action) =>
-        typeof action.visible === "function"
-          ? action.visible(actionContext)
-          : (action.visible ?? true)
-      ),
-    [actions, actionContext]
-  );
-  const totalVisibleActions = visibleActions.length;
-
-  const topLevelActions: TopLevelAction[] = [...visibleActions];
+  const totalItems = items.length;
+  const topLevelItems: MenuInternalLink[] = [...items];
+  let overflowItems;

  // chop middle breadcrumbs and present a "..." menu instead
-  if (totalVisibleActions > max) {
+  if (totalItems > max) {
    const halfMax = Math.floor(max / 2);
-    const menuActions = topLevelActions.splice(
-      halfMax,
-      totalVisibleActions - max
-    ) as InternalLinkActionV2[];
+    overflowItems = topLevelItems.splice(halfMax, totalItems - max);

-    topLevelActions.splice(halfMax, 0, {
-      type: "menu",
-      actions: menuActions,
+    topLevelItems.splice(halfMax, 0, {
+      to: "",
+      type: "route",
+      title: <BreadcrumbMenu items={overflowItems as MenuInternalLink[]} />,
    });
  }

-  const toBreadcrumb = React.useCallback(
-    (action: TopLevelAction, index: number) => {
-      if (action.type === "menu") {
-        return <BreadcrumbMenu key="menu" actions={action.actions} />;
-      }
-
-      const item = actionV2ToMenuItem(
-        action,
-        actionContext
-      ) as MenuInternalLink;
-
-      return (
-        <>
-          {item.icon}
-          <Item
-            to={item.to}
-            $withIcon={!!item.icon}
-            $highlight={!!highlightFirstItem && index === 0}
-          >
-            {item.title}
-          </Item>
-        </>
-      );
-    },
-    [actionContext, highlightFirstItem]
-  );
-
  return (
    <Flex justify="flex-start" align="center" ref={ref}>
-      {topLevelActions.map((action, index) => (
-        <React.Fragment key={action.type === "menu" ? "menu" : `item-${index}`}>
-          {toBreadcrumb(action, index)}
-          {index !== topLevelActions.length - 1 || !!children ? (
-            <Slash />
-          ) : null}
+      {topLevelItems.map((item, index) => (
+        <React.Fragment
+          key={
+            (typeof item.to === "string" ? item.to : item.to.pathname) || index
+          }
+        >
+          {item.icon}
+          {item.to ? (
+            <Item
+              to={item.to}
+              $withIcon={!!item.icon}
+              $highlight={!!highlightFirstItem && index === 0}
+            >
+              {item.title}
+            </Item>
+          ) : (
+            item.title
+          )}
+          {index !== topLevelItems.length - 1 || !!children ? <Slash /> : null}
        </React.Fragment>
      ))}
      {children}
@@ -125,8 +125,8 @@ function Collaborators(props: Props) {

      return (
        <AvatarWithPresence
-          key={collaborator.id}
          {...rest}
+          key={collaborator.id}
          user={collaborator}
          isPresent={isPresent}
          isEditing={isEditing}
@@ -148,10 +148,6 @@ function Collaborators(props: Props) {
    [presentIds, editingIds, observingUserId, currentUserId, handleAvatarClick]
  );

-  if (!document.insightsEnabled) {
-    return null;
-  }
-
  return (
    <Popover>
      <PopoverTrigger>
@@ -125,8 +125,6 @@ export const CollectionForm = observer(function CollectionForm_({
    [setFocus, setValue, values.icon]
  );

-  const initial = values.name.charAt(0).toUpperCase();
-
  return (
    <form onSubmit={formHandleSubmit(handleSubmit)}>
      <Text as="p">
@@ -147,7 +145,7 @@ export const CollectionForm = observer(function CollectionForm_({
              <StyledIconPicker
                icon={values.icon}
                color={values.color ?? iconColor}
-                initial={initial}
+                initial={values.name[0]}
                popoverPosition="right"
                onOpen={setHasOpenedIconPicker}
                onChange={handleIconChange}
@@ -3,10 +3,9 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import Collection from "~/models/Collection";
 import CollectionIcon from "~/components/Icons/CollectionIcon";
+import { MenuInternalLink } from "~/types";
 import { archivePath, collectionPath } from "~/utils/routeHelpers";
 import Breadcrumb from "./Breadcrumb";
-import { createInternalLinkActionV2 } from "~/actions";
-import { ActiveCollectionSection } from "~/actions/sections";

 type Props = {
  collection: Collection;
@@ -15,24 +14,32 @@ type Props = {
 export const CollectionBreadcrumb: React.FC<Props> = ({ collection }) => {
  const { t } = useTranslation();

-  const actions = React.useMemo(
-    () => [
-      createInternalLinkActionV2({
-        name: t("Archive"),
-        section: ActiveCollectionSection,
-        icon: <ArchiveIcon />,
-        visible: collection.isArchived,
-        to: archivePath(),
-      }),
-      createInternalLinkActionV2({
-        name: collection.name,
-        section: ActiveCollectionSection,
-        icon: <CollectionIcon collection={collection} expanded />,
-        to: collectionPath(collection.path),
-      }),
-    ],
-    [collection, t]
-  );
+  const items = React.useMemo(() => {
+    const collectionNode: MenuInternalLink = {
+      type: "route",
+      title: collection.name,
+      icon: <CollectionIcon collection={collection} expanded />,
+      to: collectionPath(collection.path),
+    };

-  return <Breadcrumb actions={actions} highlightFirstItem />;
+    const category: MenuInternalLink | undefined = collection.isArchived
+      ? {
+          type: "route",
+          icon: <ArchiveIcon />,
+          title: t("Archive"),
+          to: archivePath(),
+        }
+      : undefined;
+
+    const output = [];
+    if (category) {
+      output.push(category);
+    }
+
+    output.push(collectionNode);
+
+    return output;
+  }, [collection, t]);
+
+  return <Breadcrumb items={items} highlightFirstItem />;
 };
@@ -233,12 +233,6 @@ function Template({ items, actions, context, showIcons, ...menu }: Props) {
          );
        }

-        // This should never be reached for Reakit dropdown menu.
-        // Added for exhaustiveness check.
-        if (item.type === "group") {
-          return null;
-        }
-
        const _exhaustiveCheck: never = item;
        return _exhaustiveCheck;
      })}
@@ -119,7 +119,7 @@ const ContextMenu: React.FC<Props> = ({
      >
        {(props) => (
          <InnerContextMenu
-            // oxlint-disable-next-line @typescript-eslint/no-explicit-any
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
            menuProps={props as any}
            {...rest}
            isSubMenu={isSubMenu}
@@ -6,8 +6,6 @@ import useStores from "~/hooks/useStores";
 function Dialogs() {
  const { dialogs } = useStores();
  const { guide, modalStack } = dialogs;
-  const modals = [...modalStack];
-
  return (
    <>
      {guide ? (
@@ -19,10 +17,11 @@ function Dialogs() {
          {guide.content}
        </Guide>
      ) : undefined}
-      {modals.map(([id, modal]) => (
+      {[...modalStack].map(([id, modal]) => (
        <Modal
          key={id}
          isOpen={modal.isOpen}
+          fullscreen={modal.fullscreen ?? false}
          onRequestClose={() => {
            modal.onClose?.();
            dialogs.closeModal(id);
@@ -1,50 +0,0 @@
-import { Trans, useTranslation } from "react-i18next";
-import ConfirmationDialog from "~/components/ConfirmationDialog";
-import Text from "~/components/Text";
-import { IntegrationType } from "@shared/types";
-import Integration from "~/models/Integration";
-import useStores from "~/hooks/useStores";
-import { useHistory } from "react-router-dom";
-import { settingsPath } from "~/utils/routeHelpers";
-import { observer } from "mobx-react";
-import capitalize from "lodash/capitalize";
-
-type Props = {
-  integration: Integration<IntegrationType.Analytics>;
-};
-
-export const DisconnectAnalyticsDialog = observer(({ integration }: Props) => {
-  const { t } = useTranslation();
-  const { dialogs } = useStores();
-  const history = useHistory();
-
-  const handleSubmit = async () => {
-    await integration.delete();
-    history.push(settingsPath("integrations"));
-    dialogs.closeAllModals();
-  };
-
-  return (
-    <ConfirmationDialog
-      onSubmit={handleSubmit}
-      submitText={t("Disconnect")}
-      savingText={`${t("Disconnecting")}…`}
-      danger
-    >
-      <Text as="p" type="secondary">
-        <Trans
-          defaults="Are you sure you want to disconnect the <em>{{ service }}</em> integration?"
-          values={{
-            service: capitalize(integration.service),
-          }}
-          components={{
-            em: <strong />,
-          }}
-        />
-      </Text>
-      <Text as="p" type="secondary">
-        <Trans defaults="This will stop sending analytics events to the configured instance." />
-      </Text>
-    </ConfirmationDialog>
-  );
-});
@@ -11,9 +11,8 @@ import CollectionIcon from "~/components/Icons/CollectionIcon";
 import { useLocationSidebarContext } from "~/hooks/useLocationSidebarContext";
 import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
+import { MenuInternalLink } from "~/types";
 import { archivePath, settingsPath, trashPath } from "~/utils/routeHelpers";
-import { createInternalLinkActionV2 } from "~/actions";
-import { ActiveDocumentSection } from "~/actions/sections";

 type Props = {
  children?: React.ReactNode;
@@ -28,12 +27,46 @@ type Props = {
  maxDepth?: number;
 };

+function useCategory(document: Document): MenuInternalLink | null {
+  const { t } = useTranslation();
+
+  if (document.isDeleted) {
+    return {
+      type: "route",
+      icon: <TrashIcon />,
+      title: t("Trash"),
+      to: trashPath(),
+    };
+  }
+
+  if (document.isArchived) {
+    return {
+      type: "route",
+      icon: <ArchiveIcon />,
+      title: t("Archive"),
+      to: archivePath(),
+    };
+  }
+
+  if (document.template) {
+    return {
+      type: "route",
+      icon: <ShapesIcon />,
+      title: t("Templates"),
+      to: settingsPath("templates"),
+    };
+  }
+
+  return null;
+}
+
 function DocumentBreadcrumb(
  { document, children, onlyText, reverse = false, maxDepth }: Props,
  ref: React.RefObject<HTMLDivElement> | null
 ) {
  const { collections } = useStores();
  const { t } = useTranslation();
+  const category = useCategory(document);
  const sidebarContext = useLocationSidebarContext();
  const collection = document.collectionId
    ? collections.get(document.collectionId)
@@ -45,91 +78,69 @@ function DocumentBreadcrumb(
    void document.loadRelations({ withoutPolicies: true });
  }, [document]);

+  let collectionNode: MenuInternalLink | undefined;
+
+  if (collection && can.readDocument) {
+    collectionNode = {
+      type: "route",
+      title: collection.name,
+      icon: <CollectionIcon collection={collection} expanded />,
+      to: {
+        pathname: collection.path,
+        state: { sidebarContext },
+      },
+    };
+  } else if (document.isCollectionDeleted) {
+    collectionNode = {
+      type: "route",
+      title: t("Deleted Collection"),
+      icon: undefined,
+      to: "",
+    };
+  }
+
  const path = document.pathTo.slice(0, -1);

-  const actions = React.useMemo(() => {
+  const items = React.useMemo(() => {
+    const output: MenuInternalLink[] = [];
+
    if (depth === 0) {
-      return [];
+      return output;
    }

-    const outputActions = [
-      createInternalLinkActionV2({
-        name: t("Trash"),
-        section: ActiveDocumentSection,
-        icon: <TrashIcon />,
-        visible: document.isDeleted,
-        to: trashPath(),
-      }),
-      createInternalLinkActionV2({
-        name: t("Archive"),
-        section: ActiveDocumentSection,
-        icon: <ArchiveIcon />,
-        visible: document.isArchived,
-        to: archivePath(),
-      }),
-      createInternalLinkActionV2({
-        name: t("Templates"),
-        section: ActiveDocumentSection,
-        icon: <ShapesIcon />,
-        visible: document.template,
-        to: settingsPath("templates"),
-      }),
-      createInternalLinkActionV2({
-        name: collection?.name,
-        section: ActiveDocumentSection,
-        icon: collection ? (
-          <CollectionIcon collection={collection} expanded />
-        ) : undefined,
-        visible: !!(collection && can.readDocument),
-        to: collection
-          ? {
-              pathname: collection.path,
-              state: { sidebarContext },
-            }
-          : "",
-      }),
-      createInternalLinkActionV2({
-        name: t("Deleted Collection"),
-        section: ActiveDocumentSection,
-        visible: document.isCollectionDeleted,
-        to: "",
-      }),
-      ...path.map((node) => {
-        const title = node.title || t("Untitled");
-        return createInternalLinkActionV2({
-          name: node.icon ? (
-            <>
-              <StyledIcon value={node.icon} color={node.color} /> {title}
-            </>
-          ) : (
-            title
-          ),
-          section: ActiveDocumentSection,
-          to: {
-            pathname: node.url,
-            state: { sidebarContext },
-          },
-        });
-      }),
-    ];
+    if (category) {
+      output.push(category);
+    }
+    if (collectionNode) {
+      output.push(collectionNode);
+    }
+
+    path.forEach((node: NavigationNode) => {
+      const title = node.title || t("Untitled");
+      output.push({
+        type: "route",
+        title: node.icon ? (
+          <>
+            <StyledIcon value={node.icon} color={node.color} /> {title}
+          </>
+        ) : (
+          title
+        ),
+        to: {
+          pathname: node.url,
+          state: { sidebarContext },
+        },
+      });
+    });

    return reverse
      ? depth !== undefined
-        ? outputActions.slice(-depth)
-        : outputActions
+        ? output.slice(-depth)
+        : output
      : depth !== undefined
-        ? outputActions.slice(0, depth)
-        : outputActions;
-  }, [
-    t,
-    document,
-    collection,
-    can.readDocument,
-    sidebarContext,
-    path,
-    reverse,
-    depth,
-  ]);
+        ? output.slice(0, depth)
+        : output;
+  }, [t, path, category, sidebarContext, collectionNode, reverse, depth]);

  if (!collections.isLoaded) {
    return null;
@@ -165,7 +176,7 @@ function DocumentBreadcrumb(
  }

  return (
-    <Breadcrumb actions={actions} ref={ref} highlightFirstItem>
+    <Breadcrumb items={items} ref={ref} highlightFirstItem>
      {children}
    </Breadcrumb>
  );
@@ -123,7 +123,6 @@ function DocumentCard(props: Props) {
              <DocumentSquircle
                icon={document.icon}
                color={document.color ?? undefined}
-                initial={document.initial}
              />
            ) : (
              <Squircle
@@ -195,22 +194,17 @@ const ReadingTime = ({ document }: { document: Document }) => {
 const DocumentSquircle = ({
  icon,
  color,
-  initial,
 }: {
  icon: string;
  color?: string;
-  initial?: string;
 }) => {
  const theme = useTheme();
  const iconType = determineIconType(icon)!;
  const squircleColor = iconType === IconType.SVG ? color : theme.slateLight;
-  const style = {
-    "--background": squircleColor,
-  } as React.CSSProperties;

  return (
-    <Squircle color={squircleColor} style={style}>
-      <Icon value={icon} color={theme.white} initial={initial} forceColor />
+    <Squircle color={squircleColor}>
+      <Icon value={icon} color={theme.white} forceColor />
    </Squircle>
  );
 };
@@ -1,3 +1,4 @@
+import flatten from "lodash/flatten";
 import { observer } from "mobx-react";
 import * as React from "react";
 import { Trans, useTranslation } from "react-i18next";
@@ -10,6 +11,7 @@ import Button from "~/components/Button";
 import DocumentExplorer from "~/components/DocumentExplorer";
 import useCollectionTrees from "~/hooks/useCollectionTrees";
 import useStores from "~/hooks/useStores";
+import { flattenTree } from "~/utils/tree";
 import Switch from "./Switch";
 import Text from "./Text";

@@ -30,7 +32,7 @@ function DocumentCopy({ document, onSubmit }: Props) {
  );

  const items = React.useMemo(() => {
-    const nodes = collectionTrees.filter((node) =>
+    const nodes = flatten(collectionTrees.map(flattenTree)).filter((node) =>
      node.collectionId
        ? policies.get(node.collectionId)?.abilities.createDocument
        : true
@@ -76,32 +78,34 @@ function DocumentCopy({ document, onSubmit }: Props) {
        onSelect={selectPath}
        defaultValue={document.parentDocumentId || document.collectionId || ""}
      />
-      {!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>
-      )}
+      <OptionsContainer>
+        {!document.isTemplate && (
+          <>
+            {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}>
        <StyledText type="secondary">
          {selectedPath ? (
@@ -123,11 +127,9 @@ function DocumentCopy({ document, onSubmit }: Props) {
 }

 const OptionsContainer = styled.div`
-  border-top: 1px solid ${(props) => props.theme.horizontalRule};
-  padding: 16px 24px 0;
-  margin-bottom: -1px;
-  background: ${(props) => props.theme.modalBackground};
-  z-index: 1;
+  margin: 16px 0 8px 0;
+  padding-left: 24px;
+  padding-right: 24px;
 `;

 export default observer(DocumentCopy);
@@ -15,7 +15,7 @@ import scrollIntoView from "scroll-into-view-if-needed";
 import styled, { useTheme } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import Icon from "@shared/components/Icon";
-import { NavigationNode } from "@shared/types";
+import { NavigationNode, NavigationNodeType } from "@shared/types";
 import { isModKey } from "@shared/utils/keyboard";
 import DocumentExplorerNode from "~/components/DocumentExplorerNode";
 import DocumentExplorerSearchResult from "~/components/DocumentExplorerSearchResult";
@@ -26,8 +26,7 @@ import InputSearch from "~/components/InputSearch";
 import Text from "~/components/Text";
 import useMobile from "~/hooks/useMobile";
 import useStores from "~/hooks/useStores";
-import { ancestors, descendants, flattenTree } from "~/utils/tree";
-import flatten from "lodash/flatten";
+import { ancestors, descendants } from "~/utils/tree";

 type Props = {
  /** Action taken upon submission of selected item, could be publish, move etc. */
@@ -81,7 +80,7 @@ function DocumentExplorer({ onSubmit, onSelect, items, defaultValue }: Props) {

  const searchIndex = React.useMemo(
    () =>
-      new FuzzySearch(flatten(items.map(flattenTree)), ["title"], {
+      new FuzzySearch(items, ["title"], {
        caseSensitive: false,
      }),
    [items]
@@ -126,7 +125,11 @@ function DocumentExplorer({ onSubmit, onSelect, items, defaultValue }: Props) {

    return searchTerm
      ? searchIndex.search(searchTerm)
-      : items.flatMap(includeDescendants);
+      : items
+          .concat(
+            items.filter((item) => item.type === NavigationNodeType.Collection)
+          )
+          .flatMap(includeDescendants);
  }

  const nodes = getNodes();
@@ -134,7 +137,6 @@ function DocumentExplorer({ onSubmit, onSelect, items, defaultValue }: Props) {
    (min, node) => (node.depth ? Math.min(min, node.depth) : min),
    Infinity
  );
-  const normalizedBaseDepth = baseDepth === Infinity ? 0 : baseDepth;

  const scrollNodeIntoView = React.useCallback(
    (node: number) => {
@@ -308,7 +310,7 @@ function DocumentExplorer({ onSubmit, onSelect, items, defaultValue }: Props) {
          expanded={isExpanded(index)}
          icon={renderedIcon}
          title={title}
-          depth={(node.depth ?? 0) - normalizedBaseDepth}
+          depth={(node.depth ?? 0) - baseDepth}
          hasChildren={hasChildren(index)}
          ref={itemRefs[index]}
        />
@@ -33,6 +33,7 @@ type Props = {
  showParentDocuments?: boolean;
  showCollection?: boolean;
  showPublished?: boolean;
+  showPin?: boolean;
  showDraft?: boolean;
  showTemplate?: boolean;
 };
@@ -67,6 +68,7 @@ function DocumentListItem(
    showParentDocuments,
    showCollection,
    showPublished,
+    showPin,
    showDraft = true,
    showTemplate,
    highlight,
@@ -105,11 +107,7 @@ function DocumentListItem(
        <Heading dir={document.dir}>
          {document.icon && (
            <>
-              <Icon
-                value={document.icon}
-                color={document.color ?? undefined}
-                initial={document.initial}
-              />
+              <Icon value={document.icon} color={document.color ?? undefined} />
              &nbsp;
            </>
          )}
@@ -154,8 +152,10 @@ function DocumentListItem(
      <Actions>
        <DocumentMenu
          document={document}
+          showPin={showPin}
          onOpen={handleMenuOpen}
          onClose={handleMenuClose}
+          modal={false}
        />
      </Actions>
    </DocumentLink>
@@ -201,7 +201,6 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
            grow={props.grow}
            style={props.style}
            editorStyle={props.editorStyle}
-            commenting={!!props.onClickCommentMark}
          >
            <div className="ProseMirror">
              {paragraphs.map((paragraph, index) => (
@@ -13,9 +13,6 @@ import Text from "~/components/Text";
 import env from "~/env";
 import Logger from "~/utils/Logger";
 import isCloudHosted from "~/utils/isCloudHosted";
-import Storage from "@shared/utils/Storage";
-import { deleteAllDatabases } from "~/utils/developer";
-import Flex from "./Flex";

 type Props = WithTranslation & {
  /** Whether to reload the page if a chunk fails to load. */
@@ -26,9 +23,6 @@ type Props = WithTranslation & {
  component?: React.ComponentType | string;
 };

-const ERROR_TRACKING_KEY = "error-boundary-tracking";
-const ERROR_TRACKING_WINDOW_MS = 5 * 60 * 1000; // 5 minutes
-
@observer
 class ErrorBoundary extends React.Component<Props> {
  @observable
@@ -37,13 +31,6 @@ class ErrorBoundary extends React.Component<Props> {
  @observable
  showDetails = false;

-  @observable
-  isRepeatedError = false;
-
-  componentDidMount() {
-    this.checkForPreviousErrors();
-  }
-
  componentDidCatch(error: Error) {
    this.error = error;

@@ -59,47 +46,9 @@ class ErrorBoundary extends React.Component<Props> {
      return;
    }

-    this.trackError();
    Logger.error("ErrorBoundary", error);
  }

-  private checkForPreviousErrors = () => {
-    try {
-      const stored = Storage.get(ERROR_TRACKING_KEY);
-      if (!stored) {
-        return;
-      }
-
-      const errors: number[] = JSON.parse(stored);
-      const cutoff = Date.now() - ERROR_TRACKING_WINDOW_MS;
-      const recentErrors = errors.filter((timestamp) => timestamp > cutoff);
-
-      this.isRepeatedError = recentErrors.length > 0;
-    } catch (err) {
-      Logger.warn("Failed to parse stored errors for error boundary", { err });
-    }
-  };
-
-  private trackError = () => {
-    try {
-      const stored = Storage.get(ERROR_TRACKING_KEY);
-      const errors: number[] = stored ? JSON.parse(stored) : [];
-      const cutoff = Date.now() - ERROR_TRACKING_WINDOW_MS;
-
-      // Filter out old errors and add current one
-      const updatedErrors = [
-        ...errors.filter((timestamp) => timestamp > cutoff),
-        Date.now(),
-      ];
-
-      Storage.set(ERROR_TRACKING_KEY, JSON.stringify(updatedErrors));
-
-      this.isRepeatedError = updatedErrors.length > 1;
-    } catch (err) {
-      Logger.warn("Failed to track error in error boundary", { err });
-    }
-  };
-
  handleReload = () => {
    window.location.reload();
  };
@@ -112,12 +61,6 @@ class ErrorBoundary extends React.Component<Props> {
    window.open(isCloudHosted ? UrlHelper.contact : UrlHelper.github);
  };

-  handleClearCache = async () => {
-    await deleteAllDatabases();
-    Storage.clear();
-    window.location.reload();
-  };
-
  render() {
    const { t, component: Component = CenteredContent, showTitle } = this.props;

@@ -164,46 +107,29 @@ class ErrorBoundary extends React.Component<Props> {
              </Heading>
            </>
          )}
-
-          {this.isRepeatedError ? (
-            <Text as="p" type="secondary">
-              <Trans>
-                An error has occurred multiple times recently. If it continues
-                please try clearing the cache or using a different browser.
-              </Trans>
-            </Text>
-          ) : (
-            <Text as="p" type="secondary">
-              <Trans
-                defaults="Sorry, an unrecoverable error occurred{{notified}}. Please try reloading the page, it may have been a temporary glitch."
-                values={{
-                  notified: isReported
-                    ? ` – ${t("our engineers have been notified")}`
-                    : undefined,
-                }}
-              />
-            </Text>
-          )}
-          {this.showDetails && <Pre>{error.stack}</Pre>}
-          <Flex gap={8} wrap>
-            {this.isRepeatedError && (
-              <Button onClick={this.handleClearCache}>
-                <Trans>Clear cache + reload</Trans>
-              </Button>
-            )}
-            <Button onClick={this.handleReload} neutral={this.isRepeatedError}>
-              {t("Reload")}
-            </Button>
+          <Text as="p" type="secondary">
+            <Trans
+              defaults="Sorry, an unrecoverable error occurred{{notified}}. Please try reloading the page, it may have been a temporary glitch."
+              values={{
+                notified: isReported
+                  ? ` – ${t("our engineers have been notified")}`
+                  : undefined,
+              }}
+            />
+          </Text>
+          {this.showDetails && <Pre>{error.toString()}</Pre>}
+          <p>
+            <Button onClick={this.handleReload}>{t("Reload")}</Button>{" "}
            {this.showDetails ? (
              <Button onClick={this.handleReportBug} neutral>
-                <Trans>Report a bug</Trans>
+                <Trans>Report a bug</Trans>…
              </Button>
            ) : (
              <Button onClick={this.handleShowDetails} neutral>
                <Trans>Show detail</Trans>…
              </Button>
            )}
-          </Flex>
+          </p>
        </Component>
      );
    }
@@ -1,14 +1,9 @@
 import * as React from "react";
-import * as Dialog from "@radix-ui/react-dialog";
+import { Dialog, DialogBackdrop, useDialogState } from "reakit/Dialog";
 import styled from "styled-components";
 import { depths, s } from "@shared/styles";
 import Scrollable from "~/components/Scrollable";
-import {
-  fadeIn,
-  fadeOut,
-  fadeInAndSlideLeft,
-  fadeOutAndSlideRight,
-} from "~/styles/animations";
+import usePrevious from "~/hooks/usePrevious";

 type Props = {
  children?: React.ReactNode;
@@ -23,33 +18,55 @@ const Guide: React.FC<Props> = ({
  title = "Untitled",
  onRequestClose,
  ...rest
-}: Props) => (
-  <Dialog.Root open={isOpen} onOpenChange={(open) => !open && onRequestClose()}>
-    <Dialog.Portal>
-      <StyledOverlay>
-        <Scene
-          onEscapeKeyDown={onRequestClose}
-          onPointerDownOutside={onRequestClose}
-          aria-describedby={undefined}
-          {...rest}
-        >
-          <Content>
-            {title && <Header>{title}</Header>}
-            {children}
-          </Content>
-        </Scene>
-      </StyledOverlay>
-    </Dialog.Portal>
-  </Dialog.Root>
-);
+}: Props) => {
+  const dialog = useDialogState({
+    animated: 250,
+  });
+  const wasOpen = usePrevious(isOpen);

-const Header = styled(Dialog.Title)`
+  React.useEffect(() => {
+    if (!wasOpen && isOpen) {
+      dialog.show();
+    }
+
+    if (wasOpen && !isOpen) {
+      dialog.hide();
+    }
+  }, [dialog, wasOpen, isOpen]);
+
+  return (
+    <DialogBackdrop {...dialog}>
+      {(backdropProps) => (
+        <Backdrop {...backdropProps}>
+          <Dialog
+            {...dialog}
+            aria-label={title}
+            preventBodyScroll
+            hideOnEsc
+            hide={onRequestClose}
+          >
+            {(dialogProps) => (
+              <Scene {...dialogProps} {...rest}>
+                <Content>
+                  {title && <Header>{title}</Header>}
+                  {children}
+                </Content>
+              </Scene>
+            )}
+          </Dialog>
+        </Backdrop>
+      )}
+    </DialogBackdrop>
+  );
+};
+
+const Header = styled.h1`
  font-size: 18px;
  margin-top: 0;
  margin-bottom: 1em;
 `;

-const StyledOverlay = styled(Dialog.Overlay)`
+const Backdrop = styled.div`
  position: fixed;
  top: 0;
  left: 0;
@@ -57,37 +74,37 @@ const StyledOverlay = styled(Dialog.Overlay)`
  bottom: 0;
  background-color: ${s("backdrop")} !important;
  z-index: ${depths.overlay};
+  transition: opacity 200ms ease-in-out;
+  opacity: 0;

-  &[data-state="open"] {
-    animation: ${fadeIn} 200ms ease;
-  }
-
-  &[data-state="closed"] {
-    animation: ${fadeOut} 200ms ease;
+  &[data-enter] {
+    opacity: 1;
  }
 `;

-const Scene = styled(Dialog.Content)`
+const Scene = styled.div`
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  margin: 12px;
-  display: flex;
  z-index: ${depths.modal};
+  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 350px;
  background: ${s("background")};
  border-radius: 8px;
  outline: none;
+  opacity: 0;
+  transform: translateX(16px);
+  transition:
+    transform 250ms ease,
+    opacity 250ms ease;

-  &[data-state="open"] {
-    animation: ${fadeInAndSlideLeft} 200ms ease;
-  }
-
-  &[data-state="closed"] {
-    animation: ${fadeOutAndSlideRight} 200ms ease;
+  &[data-enter] {
+    opacity: 1;
+    transform: translateX(0px);
  }
 `;

@@ -6,7 +6,7 @@ import * as React from "react";
 import { mergeRefs } from "react-merge-refs";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
-import useMeasure from "react-use-measure";
+import { useComponentSize } from "@shared/hooks/useComponentSize";
 import { depths, s } from "@shared/styles";
 import { supportsPassiveListener } from "@shared/utils/browser";
 import Button from "~/components/Button";
@@ -38,8 +38,8 @@ function Header(
  const { ui } = useStores();
  const isMobile = useMobile();
  const hasMobileSidebar = hasSidebar && isMobile;
-  const [internalMeasureRef, size] = useMeasure();
-  const [breadcrumbsMeasureRef, breadcrumbsSize] = useMeasure();
+  const internalRef = React.useRef<HTMLDivElement | null>(null);
+  const breadcrumbsRef = React.useRef<HTMLDivElement | null>(null);
  const passThrough = !actions && !left && !title;

  const [isScrolled, setScrolled] = React.useState(false);
@@ -62,22 +62,19 @@ function Header(
    });
  }, []);

-  const setBreadcrumbRef = React.useCallback(
-    (node: HTMLDivElement | null) => {
-      if (node?.firstElementChild) {
-        breadcrumbsMeasureRef(node.firstElementChild as HTMLDivElement);
-      }
-    },
-    [breadcrumbsMeasureRef]
-  );
+  const setBreadcrumbRef = React.useCallback((node: HTMLDivElement | null) => {
+    breadcrumbsRef.current = node?.firstElementChild as HTMLDivElement;
+  }, []);

+  const size = useComponentSize(internalRef);
+  const breadcrumbsSize = useComponentSize(breadcrumbsRef);
  const breadcrumbMakesCompact = breadcrumbsSize.width > size.width / 3;
  const isCompact = size.width < 1000 || breadcrumbMakesCompact;

  return (
    <TooltipProvider>
      <Wrapper
-        ref={mergeRefs([ref, internalMeasureRef])}
+        ref={mergeRefs([ref, internalRef])}
        align="center"
        shrink={false}
        className={className}
@@ -30,15 +30,10 @@ const HoverPreviewIssue = React.forwardRef(function _HoverPreviewIssue(
 ) {
  const authorName = author.name;
  const urlObj = new URL(url);
-  let service;
-
-  if (urlObj.hostname === "github.com") {
-    service = IntegrationService.GitHub;
-  } else if (urlObj.hostname === "gitlab.com") {
-    service = IntegrationService.GitLab;
-  } else {
-    service = IntegrationService.Linear;
-  }
+  const service =
+    urlObj.hostname === "github.com"
+      ? IntegrationService.GitHub
+      : IntegrationService.Linear;

  return (
    <Preview as="a" href={url} target="_blank" rel="noopener noreferrer">
@@ -136,7 +136,6 @@ const CustomColor = ({
        maxLength={7}
        value={value}
        onChange={handleInputChange}
-        autoFocus
      />
    </Flex>
  );
@@ -136,12 +136,11 @@ const EmojiPanel = ({
        freqEmojis,
      });

-  React.useLayoutEffect(() => {
-    if (!panelActive) {
-      return;
+  React.useEffect(() => {
+    if (scrollableRef.current) {
+      scrollableRef.current.scrollTop = 0;
    }
-    scrollableRef.current?.scroll({ top: 0 });
-    requestAnimationFrame(() => searchRef.current?.focus());
+    searchRef.current?.focus();
  }, [panelActive]);

  return (
@@ -155,12 +155,11 @@ const IconPanel = ({
        baseIcons,
      ];

-  React.useLayoutEffect(() => {
-    if (!panelActive) {
-      return;
+  React.useEffect(() => {
+    if (scrollableRef.current) {
+      scrollableRef.current.scrollTop = 0;
    }
-    scrollableRef.current?.scroll({ top: 0 });
-    requestAnimationFrame(() => searchRef.current?.focus());
+    searchRef.current?.focus();
  }, [panelActive]);

  return (
@@ -1,17 +1,14 @@
-import { useMemo, useCallback, useState } from "react";
+import { useMemo, useCallback } from "react";
 import { useTranslation } from "react-i18next";
+import { Menu, MenuButton, MenuItem } from "reakit";
 import styled from "styled-components";
-import { s, hover } from "@shared/styles";
+import { depths, s, hover } from "@shared/styles";
 import { EmojiSkinTone } from "@shared/types";
 import { getEmojiVariants } from "@shared/utils/emoji";
 import { Emoji } from "~/components/Emoji";
 import Flex from "~/components/Flex";
 import NudeButton from "~/components/NudeButton";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "~/components/primitives/Popover";
+import { useMenuState } from "~/hooks/useMenuState";
 import { IconButton } from "./IconButton";

 const SkinTonePicker = ({
@@ -22,61 +19,62 @@ const SkinTonePicker = ({
  onChange: (skin: EmojiSkinTone) => void;
 }) => {
  const { t } = useTranslation();
-  const [open, setOpen] = useState(false);

  const handEmojiVariants = useMemo(() => getEmojiVariants({ id: "hand" }), []);

+  const menu = useMenuState({
+    placement: "bottom-end",
+  });
+
  const handleSkinClick = useCallback(
-    (emojiSkin: EmojiSkinTone) => {
-      setOpen(false);
+    (emojiSkin) => {
+      menu.hide();
      onChange(emojiSkin);
    },
-    [onChange]
+    [menu, onChange]
  );

  const menuItems = useMemo(
    () =>
-      Object.values(EmojiSkinTone)
-        .map((skinTone) => {
-          const emoji = handEmojiVariants[skinTone];
-          return emoji ? (
-            <IconButton
-              key={emoji.value}
-              onClick={() => handleSkinClick(skinTone)}
-            >
+      Object.entries(handEmojiVariants).map(([eskin, emoji]) => (
+        <MenuItem {...menu} key={emoji.value}>
+          {(menuprops) => (
+            <IconButton {...menuprops} onClick={() => handleSkinClick(eskin)}>
              <Emoji width={24} height={24}>
                {emoji.value}
              </Emoji>
            </IconButton>
-          ) : null;
-        })
-        .filter(Boolean),
-    [handEmojiVariants, handleSkinClick]
+          )}
+        </MenuItem>
+      )),
+    [menu, handEmojiVariants, handleSkinClick]
  );

  return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger>
-        <StyledMenuButton aria-label={t("Choose default skin tone")}>
-          {handEmojiVariants[skinTone]?.value}
-        </StyledMenuButton>
-      </PopoverTrigger>
-      <PopoverContent
-        side="bottom"
-        align="end"
-        aria-label={t("Choose default skin tone")}
-        width={208}
-        scrollable={false}
-        shrink
-      >
-        <Emojis>{menuItems}</Emojis>
-      </PopoverContent>
-    </Popover>
+    <>
+      <MenuButton {...menu}>
+        {(props) => (
+          <StyledMenuButton
+            {...props}
+            aria-label={t("Choose default skin tone")}
+          >
+            {handEmojiVariants[skinTone]!.value}
+          </StyledMenuButton>
+        )}
+      </MenuButton>
+      <Menu {...menu} aria-label={t("Choose default skin tone")}>
+        {(props) => <MenuContainer {...props}>{menuItems}</MenuContainer>}
+      </Menu>
+    </>
  );
 };

-const Emojis = styled(Flex)`
-  padding: 0 8px;
+const MenuContainer = styled(Flex)`
+  z-index: ${depths.menu};
+  padding: 4px;
+  border-radius: 4px;
+  background: ${s("menuBackground")};
+  box-shadow: ${s("menuShadow")};
 `;

 const StyledMenuButton = styled(NudeButton)`
@@ -1,14 +1,16 @@
 import * as React from "react";
 import { useTranslation } from "react-i18next";
+import { MenuButton } from "reakit/Menu";
 import styled from "styled-components";
 import { s } from "@shared/styles";
+import { useMenuState } from "~/hooks/useMenuState";
 import lazyWithRetry from "~/utils/lazyWithRetry";
+import ContextMenu from "./ContextMenu";
 import DelayedMount from "./DelayedMount";
 import Input, { Props as InputProps } from "./Input";
 import NudeButton from "./NudeButton";
 import Relative from "./Sidebar/components/Relative";
 import Text from "./Text";
-import { Popover, PopoverContent, PopoverTrigger } from "./primitives/Popover";

 type Props = Omit<InputProps, "onChange"> & {
  value: string | undefined;
@@ -17,6 +19,10 @@ type Props = Omit<InputProps, "onChange"> & {

 const InputColor: React.FC<Props> = ({ value, onChange, ...rest }: Props) => {
  const { t } = useTranslation();
+  const menu = useMenuState({
+    modal: true,
+    placement: "bottom-end",
+  });

  return (
    <Relative>
@@ -27,26 +33,30 @@ const InputColor: React.FC<Props> = ({ value, onChange, ...rest }: Props) => {
        maxLength={7}
        {...rest}
      />
-      <Popover modal={true}>
-        <PopoverTrigger>
-          <SwatchButton aria-label={t("Show menu")} $background={value} />
-        </PopoverTrigger>
-        <StyledContent aria-label={t("Select a color")} align="end">
-          <React.Suspense
-            fallback={
-              <DelayedMount>
-                <Text>{t("Loading")}…</Text>
-              </DelayedMount>
-            }
-          >
-            <StyledColorPicker
-              disableAlpha
-              color={value}
-              onChange={(color) => onChange(color.hex)}
-            />
-          </React.Suspense>
-        </StyledContent>
-      </Popover>
+      <MenuButton {...menu}>
+        {(props) => (
+          <SwatchButton
+            aria-label={t("Show menu")}
+            {...props}
+            $background={value}
+          />
+        )}
+      </MenuButton>
+      <ContextMenu {...menu} aria-label={t("Select a color")}>
+        <React.Suspense
+          fallback={
+            <DelayedMount>
+              <Text>{t("Loading")}…</Text>
+            </DelayedMount>
+          }
+        >
+          <StyledColorPicker
+            disableAlpha
+            color={value}
+            onChange={(color) => onChange(color.hex)}
+          />
+        </React.Suspense>
+      </ContextMenu>
    </Relative>
  );
 };
@@ -60,11 +70,6 @@ const SwatchButton = styled(NudeButton)<{ $background: string | undefined }>`
  right: 6px;
 `;

-const StyledContent = styled(PopoverContent)`
-  width: auto;
-  padding: 8px;
-`;
-
 const ColorPicker = lazyWithRetry(
  () => import("react-color/lib/components/chrome/Chrome")
 );
@@ -98,9 +98,9 @@ export const InputSelect = React.forwardRef<HTMLButtonElement, Props>(
    );

    const renderOption = React.useCallback(
-      (option: Option, idx: number) => {
+      (option: Option) => {
        if (option.type === "separator") {
-          return <InputSelectSeparator key={`separator-${idx}`} />;
+          return <InputSelectSeparator />;
        }

        return (
@@ -1,7 +1,7 @@
 import * as React from "react";
 import lazyWithRetry from "~/utils/lazyWithRetry";

-export interface LazyComponent<T extends React.ComponentType<unknown>> {
+export interface LazyComponent<T extends React.ComponentType<any>> {
  Component: React.LazyExoticComponent<T>;
  preload: () => Promise<{ default: T }>;
 }
@@ -34,7 +34,7 @@ interface LazyLoadOptions {
 * MyComponent.preload();
 * ```
 */
-export function createLazyComponent<T extends React.ComponentType<unknown>>(
+export function createLazyComponent<T extends React.ComponentType<any>>(
  factory: () => Promise<{ default: T }>,
  options: LazyLoadOptions = {}
 ): LazyComponent<T> {
@@ -231,7 +231,6 @@ const Subtitle = styled.p<{ $small?: boolean; $selected?: boolean }>`
  font-size: ${(props) => (props.$small ? 13 : 14)}px;
  color: ${s("textTertiary")};
  margin-top: -2px;
-  overflow-wrap: break-word;
 `;

 export const Actions = styled(Flex)<{ $selected?: boolean }>`
@@ -1,236 +0,0 @@
-import * as React from "react";
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import styled from "styled-components";
-import Scrollable from "~/components/Scrollable";
-import {
-  Drawer,
-  DrawerContent,
-  DrawerTitle,
-  DrawerTrigger,
-} from "~/components/primitives/Drawer";
-import {
-  DropdownMenu as DropdownMenuRoot,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-} from "~/components/primitives/DropdownMenu";
-import { actionV2ToMenuItem } from "~/actions";
-import useActionContext from "~/hooks/useActionContext";
-import useMobile from "~/hooks/useMobile";
-import {
-  ActionContext,
-  ActionV2Variant,
-  ActionV2WithChildren,
-  MenuItem,
-  MenuItemWithChildren,
-} from "~/types";
-import { toDropdownMenuItems, toMobileMenuItems } from "./transformer";
-import { observer } from "mobx-react";
-import { useComputed } from "~/hooks/useComputed";
-
-type Props = {
-  /** Root action with children representing the menu items */
-  action: ActionV2WithChildren;
-  /** Action context to use - new context will be created if not provided */
-  context?: ActionContext;
-  /** Trigger for the menu */
-  children: React.ReactNode;
-  /** Alignment w.r.t trigger - defaults to start */
-  align?: "start" | "end";
-  /** ARIA label for the menu */
-  ariaLabel: string;
-  /** Additional component to display at the bottom of the top-level menu */
-  append?: React.ReactNode;
-  /** Callback when menu is opened */
-  onOpen?: () => void;
-  /** Callback when menu is closed */
-  onClose?: () => void;
-  // TODO: Invert the dependency chain by forwarding dropdown ref and props to Tooltip component
-} & React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Trigger>;
-
-export const DropdownMenu = observer(
-  React.forwardRef<React.ElementRef<typeof TooltipPrimitive.Trigger>, Props>(
-    (
-      {
-        action,
-        context,
-        children,
-        align = "start",
-        ariaLabel,
-        append,
-        onOpen,
-        onClose,
-        ...rest
-      },
-      ref
-    ) => {
-      const [open, setOpen] = React.useState(false);
-      const isMobile = useMobile();
-      const contentRef =
-        React.useRef<React.ElementRef<typeof DropdownMenuContent>>(null);
-
-      const actionContext =
-        context ??
-        useActionContext({
-          isContextMenu: true,
-        });
-
-      const menuItems = useComputed(() => {
-        if (!open) {
-          return [];
-        }
-
-        return (action.children as ActionV2Variant[]).map((childAction) =>
-          actionV2ToMenuItem(childAction, actionContext)
-        );
-      }, [open, action.children, actionContext]);
-
-      const handleOpenChange = React.useCallback(
-        (open: boolean) => {
-          setOpen(open);
-          if (open) {
-            onOpen?.();
-          } else {
-            onClose?.();
-          }
-        },
-        [onOpen, onClose]
-      );
-
-      const enablePointerEvents = React.useCallback(() => {
-        if (contentRef.current) {
-          contentRef.current.style.pointerEvents = "auto";
-        }
-      }, []);
-
-      const disablePointerEvents = React.useCallback(() => {
-        if (contentRef.current) {
-          contentRef.current.style.pointerEvents = "none";
-        }
-      }, []);
-
-      const handleCloseAutoFocus = React.useCallback(
-        (e: Event) => e.preventDefault(),
-        []
-      );
-
-      if (isMobile) {
-        return (
-          <MobileDropdown
-            open={open}
-            onOpenChange={handleOpenChange}
-            items={menuItems}
-            trigger={children}
-            ariaLabel={ariaLabel}
-            append={append}
-          />
-        );
-      }
-
-      const content = toDropdownMenuItems(menuItems);
-
-      return (
-        <DropdownMenuRoot open={open} onOpenChange={handleOpenChange}>
-          <DropdownMenuTrigger ref={ref} aria-label={ariaLabel} {...rest}>
-            {children}
-          </DropdownMenuTrigger>
-          <DropdownMenuContent
-            align={align}
-            aria-label={ariaLabel}
-            onAnimationStart={disablePointerEvents}
-            onAnimationEnd={enablePointerEvents}
-            onCloseAutoFocus={handleCloseAutoFocus}
-          >
-            {content}
-            {append}
-          </DropdownMenuContent>
-        </DropdownMenuRoot>
-      );
-    }
-  )
-);
-
-type MobileDropdownProps = {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  items: MenuItem[];
-  trigger: React.ReactNode;
-} & Pick<Props, "ariaLabel" | "append">;
-
-function MobileDropdown({
-  open,
-  onOpenChange,
-  items,
-  trigger,
-  ariaLabel,
-  append,
-}: MobileDropdownProps) {
-  const [submenuName, setSubmenuName] = React.useState<string>();
-  const contentRef = React.useRef<React.ElementRef<typeof DrawerContent>>(null);
-
-  const enablePointerEvents = React.useCallback(() => {
-    if (contentRef.current) {
-      contentRef.current.style.pointerEvents = "auto";
-    }
-  }, []);
-
-  const disablePointerEvents = React.useCallback(() => {
-    if (contentRef.current) {
-      contentRef.current.style.pointerEvents = "none";
-    }
-  }, []);
-
-  const closeDrawer = React.useCallback(() => {
-    onOpenChange(false);
-    setTimeout(() => setSubmenuName(undefined), 500); // needed for a Vaul bug where 'onAnimationEnd' is not called for controlled state.
-  }, [onOpenChange]);
-
-  const resetSubmenu = React.useCallback((isOpen: boolean) => {
-    if (!isOpen) {
-      setSubmenuName(undefined);
-    }
-  }, []);
-
-  const menuItems = React.useMemo(() => {
-    if (!items.length || !submenuName) {
-      return items;
-    }
-
-    const submenu = items.find(
-      (item) =>
-        item.type === "submenu" && (item.title as string) === submenuName
-    )! as MenuItemWithChildren;
-
-    return submenu.items;
-  }, [items, submenuName]);
-
-  const content = toMobileMenuItems(menuItems, closeDrawer, setSubmenuName);
-
-  return (
-    <Drawer
-      open={open}
-      onOpenChange={onOpenChange}
-      onAnimationEnd={resetSubmenu}
-    >
-      <DrawerTrigger aria-label={ariaLabel} asChild>
-        {trigger}
-      </DrawerTrigger>
-      <DrawerContent
-        ref={contentRef}
-        aria-label={ariaLabel}
-        aria-describedby={undefined}
-        onAnimationStart={disablePointerEvents}
-        onAnimationEnd={enablePointerEvents}
-      >
-        <DrawerTitle>{ariaLabel}</DrawerTitle>
-        <StyledScrollable hiddenScrollbars>
-          {content}
-          {!submenuName ? append : null}
-        </StyledScrollable>
-      </DrawerContent>
-    </Drawer>
-  );
-}
-
-const StyledScrollable = styled(Scrollable)`
-  max-height: 75vh;
-`;
@@ -1,24 +0,0 @@
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { MoreIcon } from "outline-icons";
-import * as React from "react";
-import Button from "~/components/Button";
-import NudeButton from "~/components/NudeButton";
-
-type Props = React.ComponentPropsWithoutRef<
-  typeof DropdownMenuPrimitive.Trigger
-> & {
-  neutral?: boolean;
-  className?: string;
-};
-
-export const OverflowMenuButton = React.forwardRef<HTMLButtonElement, Props>(
-  ({ neutral, className, ...rest }, ref) =>
-    neutral ? (
-      <Button ref={ref} icon={<MoreIcon />} neutral borderOnHover {...rest} />
-    ) : (
-      <NudeButton ref={ref} className={className} {...rest}>
-        <MoreIcon />
-      </NudeButton>
-    )
-);
-OverflowMenuButton.displayName = "OverflowMenuButton";
@@ -1,285 +0,0 @@
-import { CheckmarkIcon } from "outline-icons";
-import {
-  DropdownMenuButton,
-  DropdownMenuExternalLink,
-  DropdownMenuGroup,
-  DropdownMenuInternalLink,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownSubMenu,
-  DropdownSubMenuContent,
-  DropdownSubMenuTrigger,
-} from "~/components/primitives/DropdownMenu";
-import {
-  MenuButton,
-  MenuIconWrapper,
-  MenuInternalLink,
-  MenuExternalLink,
-  MenuLabel,
-  MenuSeparator,
-  MenuDisclosure,
-  SelectedIconWrapper,
-} from "~/components/primitives/components/Menu";
-import { MenuItem } from "~/types";
-
-export function toDropdownMenuItems(items: MenuItem[]) {
-  const filteredItems = filterMenuItems(items);
-
-  if (!filteredItems.length) {
-    return null;
-  }
-
-  const showIcon = filteredItems.find(
-    (item) =>
-      item.type !== "separator" &&
-      item.type !== "heading" &&
-      item.type !== "group" &&
-      !!item.icon
-  );
-
-  return filteredItems.map((item, index) => {
-    const icon = showIcon ? (
-      <MenuIconWrapper aria-hidden>
-        {"icon" in item ? item.icon : null}
-      </MenuIconWrapper>
-    ) : undefined;
-
-    switch (item.type) {
-      case "button":
-        return (
-          <DropdownMenuButton
-            key={`${item.type}-${item.title}-${index}`}
-            label={item.title as string}
-            icon={icon}
-            disabled={item.disabled}
-            tooltip={item.tooltip}
-            selected={item.selected}
-            dangerous={item.dangerous}
-            onClick={item.onClick}
-          />
-        );
-
-      case "route":
-        return (
-          <DropdownMenuInternalLink
-            key={`${item.type}-${item.title}-${index}`}
-            label={item.title as string}
-            icon={icon}
-            disabled={item.disabled}
-            to={item.to}
-          />
-        );
-
-      case "link":
-        return (
-          <DropdownMenuExternalLink
-            key={`${item.type}-${item.title}-${index}`}
-            label={item.title as string}
-            icon={icon}
-            disabled={item.disabled}
-            href={typeof item.href === "string" ? item.href : item.href.url}
-            target={
-              typeof item.href === "string" ? undefined : item.href.target
-            }
-          />
-        );
-
-      case "submenu": {
-        const submenuItems = toDropdownMenuItems(item.items);
-
-        if (!submenuItems?.length) {
-          return null;
-        }
-
-        return (
-          <DropdownSubMenu key={`${item.type}-${item.title}-${index}`}>
-            <DropdownSubMenuTrigger
-              label={item.title as string}
-              icon={icon}
-              disabled={item.disabled}
-            />
-            <DropdownSubMenuContent>{submenuItems}</DropdownSubMenuContent>
-          </DropdownSubMenu>
-        );
-      }
-
-      case "group": {
-        const groupItems = toDropdownMenuItems(item.items);
-
-        if (!groupItems?.length) {
-          return null;
-        }
-
-        return (
-          <DropdownMenuGroup
-            key={`${item.type}-${item.title}-${index}`}
-            label={item.title as string}
-            items={groupItems}
-          />
-        );
-      }
-
-      case "separator":
-        return <DropdownMenuSeparator key={`${item.type}-${index}`} />;
-
-      default:
-        return null;
-    }
-  });
-}
-
-export function toMobileMenuItems(
-  items: MenuItem[],
-  closeMenu: () => void,
-  openSubmenu: (submenuName: string) => void
-) {
-  const filteredItems = filterMenuItems(items);
-
-  if (!filteredItems.length) {
-    return null;
-  }
-
-  const showIcon = filteredItems.find(
-    (item) =>
-      item.type !== "separator" &&
-      item.type !== "heading" &&
-      item.type !== "group" &&
-      !!item.icon
-  );
-
-  return filteredItems.map((item, index) => {
-    const icon = showIcon ? (
-      <MenuIconWrapper aria-hidden>
-        {"icon" in item ? item.icon : null}
-      </MenuIconWrapper>
-    ) : undefined;
-
-    switch (item.type) {
-      case "button":
-        return (
-          <MenuButton
-            key={`${item.type}-${item.title}-${index}`}
-            disabled={item.disabled}
-            $dangerous={item.dangerous}
-            onClick={(e) => {
-              closeMenu();
-              item.onClick(e);
-            }}
-          >
-            {icon}
-            <MenuLabel>{item.title}</MenuLabel>
-            {item.selected !== undefined && (
-              <SelectedIconWrapper aria-hidden>
-                {item.selected ? <CheckmarkIcon /> : null}
-              </SelectedIconWrapper>
-            )}
-          </MenuButton>
-        );
-
-      case "route":
-        return (
-          <MenuInternalLink
-            key={`${item.type}-${item.title}-${index}`}
-            to={item.to}
-            disabled={item.disabled}
-            onClick={closeMenu}
-          >
-            {icon}
-            <MenuLabel>{item.title}</MenuLabel>
-          </MenuInternalLink>
-        );
-
-      case "link":
-        return (
-          <MenuExternalLink
-            key={`${item.type}-${item.title}-${index}`}
-            href={typeof item.href === "string" ? item.href : item.href.url}
-            target={
-              typeof item.href === "string" ? undefined : item.href.target
-            }
-            disabled={item.disabled}
-            onClick={closeMenu}
-          >
-            {icon}
-            <MenuLabel>{item.title}</MenuLabel>
-          </MenuExternalLink>
-        );
-
-      case "submenu": {
-        const submenuItems = toMobileMenuItems(
-          item.items,
-          closeMenu,
-          openSubmenu
-        );
-
-        if (!submenuItems?.length) {
-          return null;
-        }
-
-        return (
-          <MenuButton
-            key={`${item.type}-${item.title}-${index}`}
-            disabled={item.disabled}
-            onClick={() => {
-              openSubmenu(item.title as string);
-            }}
-          >
-            {icon}
-            <MenuLabel>{item.title}</MenuLabel>
-            <MenuDisclosure />
-          </MenuButton>
-        );
-      }
-
-      case "group": {
-        const groupItems = toMobileMenuItems(
-          item.items,
-          closeMenu,
-          openSubmenu
-        );
-
-        if (!groupItems?.length) {
-          return null;
-        }
-
-        return (
-          <div key={`${item.type}-${item.title}-${index}`}>
-            <DropdownMenuLabel>{item.title}</DropdownMenuLabel>
-            {groupItems}
-          </div>
-        );
-      }
-
-      case "separator":
-        return <MenuSeparator key={`${item.type}-${index}`} />;
-
-      default:
-        return null;
-    }
-  });
-}
-
-function filterMenuItems(items: MenuItem[]): MenuItem[] {
-  return items
-    .filter((item) => item.visible !== false)
-    .reduce((acc, item) => {
-      // trim separator when the previous item is also a separator.
-      if (
-        item.type === "separator" &&
-        acc[acc.length - 1]?.type === "separator"
-      ) {
-        return acc;
-      }
-      return [...acc, item];
-    }, [] as MenuItem[])
-    .filter((item, index, arr) => {
-      // trim when first or last item is a separator.
-      if (
-        item.type === "separator" &&
-        (index === 0 || index === arr.length - 1)
-      ) {
-        return false;
-      }
-      return true;
-    });
-}
@@ -1,9 +1,10 @@
 import * as Dialog from "@radix-ui/react-dialog";
 import { observer } from "mobx-react";
 import { CloseIcon, BackIcon } from "outline-icons";
+import { transparentize } from "polished";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
-import styled from "styled-components";
+import styled, { DefaultTheme } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import { depths, s } from "@shared/styles";
 import Flex from "~/components/Flex";
@@ -12,14 +13,17 @@ import Scrollable from "~/components/Scrollable";
 import Text from "~/components/Text";
 import useMobile from "~/hooks/useMobile";
 import usePrevious from "~/hooks/usePrevious";
-import { fadeAndScaleIn, fadeIn } from "~/styles/animations";
+import useUnmount from "~/hooks/useUnmount";
+import { fadeAndScaleIn } from "~/styles/animations";
 import Desktop from "~/utils/Desktop";
 import ErrorBoundary from "./ErrorBoundary";
-import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
+
+let openModals = 0;

 type Props = {
  children?: React.ReactNode;
  isOpen: boolean;
+  fullscreen?: boolean;
  title?: React.ReactNode;
  style?: React.CSSProperties;
  onRequestClose: () => void;
@@ -28,14 +32,32 @@ type Props = {
 const Modal: React.FC<Props> = ({
  children,
  isOpen,
+  fullscreen = true,
  title = "Untitled",
  style,
  onRequestClose,
 }: Props) => {
+  const [depth, setDepth] = React.useState(0);
  const wasOpen = usePrevious(isOpen);
  const isMobile = useMobile();
  const { t } = useTranslation();

+  React.useEffect(() => {
+    if (!wasOpen && isOpen) {
+      setDepth(openModals++);
+    }
+
+    if (wasOpen && !isOpen) {
+      setDepth(openModals--);
+    }
+  }, [wasOpen, isOpen]);
+
+  useUnmount(() => {
+    if (isOpen) {
+      openModals--;
+    }
+  });
+
  if (!isOpen && !wasOpen) {
    return null;
  }
@@ -46,71 +68,86 @@ const Modal: React.FC<Props> = ({
      onOpenChange={(open) => !open && onRequestClose()}
    >
      <Dialog.Portal>
-        <StyledOverlay />
-        <Dialog.Title asChild>
-          <VisuallyHidden.Root>{title}</VisuallyHidden.Root>
-        </Dialog.Title>
-        <StyledContent
-          onEscapeKeyDown={onRequestClose}
-          onPointerDownOutside={onRequestClose}
-          aria-describedby={undefined}
-        >
-          {isMobile ? (
-            <Mobile>
-              <Content>
-                <Centered onClick={(ev) => ev.stopPropagation()} column>
-                  {title && (
-                    <Text size="xlarge" weight="bold">
-                      {title}
-                    </Text>
-                  )}
-                  <ErrorBoundary>{children}</ErrorBoundary>
-                </Centered>
-              </Content>
-              <Close onClick={onRequestClose}>
-                <CloseIcon size={32} />
-              </Close>
-              <Back onClick={onRequestClose}>
-                <BackIcon size={32} />
-                <Text>{t("Back")} </Text>
-              </Back>
-            </Mobile>
-          ) : (
-            <Small>
-              <Centered
-                onClick={(ev) => ev.stopPropagation()}
-                // maxHeight needed for proper overflow behavior in Safari
-                style={{ maxHeight: "65vh" }}
-                column
-                reverse
+        <StyledOverlay $fullscreen={fullscreen}>
+          <StyledContent
+            onEscapeKeyDown={onRequestClose}
+            onPointerDownOutside={fullscreen ? undefined : onRequestClose}
+            aria-describedby={undefined}
+          >
+            {fullscreen || isMobile ? (
+              <Fullscreen
+                $nested={!!depth}
+                style={
+                  isMobile
+                    ? undefined
+                    : {
+                        marginLeft: `${depth * 12}px`,
+                      }
+                }
              >
-                <SmallContent style={style} shadow>
-                  <ErrorBoundary component="div">{children}</ErrorBoundary>
-                </SmallContent>
-                <Header>
-                  {title && <Text size="large">{title}</Text>}
-                  <NudeButton onClick={onRequestClose}>
-                    <CloseIcon />
-                  </NudeButton>
-                </Header>
-              </Centered>
-            </Small>
-          )}
-        </StyledContent>
+                <Content>
+                  <Centered onClick={(ev) => ev.stopPropagation()} column>
+                    {title && (
+                      <Text size="xlarge" weight="bold">
+                        {title}
+                      </Text>
+                    )}
+                    <ErrorBoundary>{children}</ErrorBoundary>
+                  </Centered>
+                </Content>
+                <Close onClick={onRequestClose}>
+                  <CloseIcon size={32} />
+                </Close>
+                <Back onClick={onRequestClose}>
+                  <BackIcon size={32} />
+                  <Text>{t("Back")} </Text>
+                </Back>
+              </Fullscreen>
+            ) : (
+              <Small>
+                <Centered
+                  onClick={(ev) => ev.stopPropagation()}
+                  // maxHeight needed for proper overflow behavior in Safari
+                  style={{ maxHeight: "65vh" }}
+                  column
+                  reverse
+                >
+                  <SmallContent style={style} shadow>
+                    <ErrorBoundary component="div">{children}</ErrorBoundary>
+                  </SmallContent>
+                  <Header>
+                    {title && <Text size="large">{title}</Text>}
+                    <NudeButton onClick={onRequestClose}>
+                      <CloseIcon />
+                    </NudeButton>
+                  </Header>
+                </Centered>
+              </Small>
+            )}
+          </StyledContent>
+        </StyledOverlay>
      </Dialog.Portal>
    </Dialog.Root>
  );
 };

-const StyledOverlay = styled(Dialog.Overlay)`
+const StyledOverlay = styled(Dialog.Overlay)<{ $fullscreen?: boolean }>`
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
-  background-color: ${(props) => props.theme.modalBackdrop} !important;
+  background-color: ${(props) =>
+    props.$fullscreen
+      ? transparentize(0.25, props.theme.background)
+      : props.theme.modalBackdrop} !important;
  z-index: ${depths.overlay};
-  animation: ${fadeIn} 200ms ease;
+  transition: opacity 50ms ease-in-out;
+  opacity: 0;
+
+  &[data-state="open"] {
+    opacity: 1;
+  }
 `;

 const StyledContent = styled(Dialog.Content)`
@@ -126,7 +163,12 @@ const StyledContent = styled(Dialog.Content)`
  outline: none;
 `;

-const Mobile = styled.div`
+type FullscreenProps = {
+  $nested: boolean;
+  theme: DefaultTheme;
+};
+
+const Fullscreen = styled.div<FullscreenProps>`
  animation: ${fadeAndScaleIn} 250ms ease;

  position: absolute;
@@ -140,6 +182,16 @@ const Mobile = styled.div`
  align-items: flex-start;
  background: ${s("background")};
  outline: none;
+
+  ${breakpoint("tablet")`
+  ${(props: FullscreenProps) =>
+    props.$nested &&
+    `
+      box-shadow: 0 -2px 10px ${props.theme.shadow};
+      border-radius: 8px 0 0 8px;
+      overflow: hidden;
+  `}
+`}
 `;

 const Content = styled(Scrollable)`
@@ -204,7 +256,7 @@ const Header = styled(Flex)`
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
-  padding: 24px 24px 12px;
+  padding: 24px 24px 4px;
 `;

 const Small = styled.div`
@@ -238,7 +290,7 @@ const Small = styled.div`
 `;

 const SmallContent = styled(Scrollable)`
-  padding: 8px 24px 24px;
+  padding: 12px 24px 24px;
 `;

 export default observer(Modal);
@@ -35,7 +35,7 @@ function Notifications(
  const context = useActionContext();
  const { notifications } = useStores();
  const { t } = useTranslation();
-  const isEmpty = notifications.active.length === 0;
+  const isEmpty = notifications.orderedData.length === 0;

  // Update the notification count in the dock icon, if possible.
  React.useEffect(() => {
@@ -80,7 +80,7 @@ function Notifications(
            <PaginatedList<Notification>
              fetch={notifications.fetchPage}
              options={{ archived: false }}
-              items={notifications.active}
+              items={notifications.orderedData}
              renderItem={(item) => (
                <NotificationListItem
                  key={item.id}
@@ -20,7 +20,7 @@ const NotificationsPopover: React.FC = ({ children }: Props) => {
  const scrollableRef = React.useRef<HTMLDivElement>(null);

  React.useEffect(() => {
-    void notifications.fetchPage({ archived: false });
+    void notifications.fetchPage({});
  }, [notifications]);

  const handleRequestClose = React.useCallback(() => {
@@ -56,7 +56,7 @@ export const OAuthClientForm = observer(function OAuthClientForm_({
  return (
    <form onSubmit={formHandleSubmit(handleSubmit)}>
      <>
-        <label style={{ marginBottom: "1em", display: "block" }}>
+        <label style={{ marginBottom: "1em" }}>
          <LabelText>{t("Icon")}</LabelText>
          <Controller
            control={control}
@@ -8,18 +8,11 @@ type Props = {
  children: React.ReactNode;
 };

-const StableWrapper = styled.div<{ $shouldApplyMobileStyles: boolean }>`
-  ${({ $shouldApplyMobileStyles }) =>
-    $shouldApplyMobileStyles
-      ? `
-        width: 100vw;
-        height: 100vh;
-        overflow: auto;
-        -webkit-overflow-scrolling: touch;
-      `
-      : `
-        display: contents;
-      `}
+const MobileWrapper = styled.div`
+  width: 100vw;
+  height: 100vh;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
 `;

 /**
@@ -34,17 +27,12 @@ const PageScroll = ({ children }: Props) => {
  const isPrinting = useMediaQuery("print");
  const ref = React.useRef<HTMLDivElement>(null);

-  const shouldApplyMobileStyles = isMobile && !isPrinting;
-
-  return (
-    <ScrollContext.Provider value={shouldApplyMobileStyles ? ref : undefined}>
-      <StableWrapper
-        ref={ref}
-        $shouldApplyMobileStyles={shouldApplyMobileStyles}
-      >
-        {children}
-      </StableWrapper>
+  return isMobile && !isPrinting ? (
+    <ScrollContext.Provider value={ref}>
+      <MobileWrapper ref={ref}>{children}</MobileWrapper>
    </ScrollContext.Provider>
+  ) : (
+    <>{children}</>
  );
 };

@@ -46,6 +46,7 @@ const PaginatedDocumentList = React.memo<Props>(function PaginatedDocumentList({
        <DocumentListItem
          key={item.id}
          document={item}
+          showPin={!!options?.collectionId}
          showParentDocuments={showParentDocuments}
          showCollection={showCollection}
          showPublished={showPublished}
@@ -14,7 +14,7 @@ describe("PaginatedList", () => {
    i18n,
    tReady: true,
    t: ((key: string) => key) as TFunction,
-  } as unknown;
+  } as any;

  it("with no items renders nothing", () => {
    const result = render(
@@ -34,11 +34,11 @@ interface Props<T extends PaginatedItem>
   * @param options Pagination and other query options
   */
  fetch?: (
-    options: Record<string, unknown> | undefined
+    options: Record<string, any> | undefined
  ) => Promise<unknown[] | undefined> | undefined;

  /** Additional options to pass to the fetch function */
-  options?: Record<string, unknown>;
+  options?: Record<string, any>;

  /** Optional header content to display above the list */
  heading?: React.ReactNode;
@@ -77,9 +77,7 @@ interface Props<T extends PaginatedItem>
   * Function to render section headings (typically date-based)
   * @param name The heading text or element to render
   */
-  renderHeading?: (
-    name: React.ReactElement<unknown> | string
-  ) => React.ReactNode;
+  renderHeading?: (name: React.ReactElement<any> | string) => React.ReactNode;

  /**
   * Handler for escape key press
@@ -208,7 +206,7 @@ const PaginatedList = <T extends PaginatedItem>({
    if (fetch) {
      void fetchResults();
    }
-  }, [fetch, fetchResults]);
+  }, [fetch]);

  // Handle updates to fetch or options
  React.useEffect(() => {
@@ -0,0 +1,145 @@
+import * as React from "react";
+import { Dialog } from "reakit/Dialog";
+import { Popover as ReakitPopover, PopoverProps } from "reakit/Popover";
+import styled from "styled-components";
+import breakpoint from "styled-components-breakpoint";
+import { depths, s } from "@shared/styles";
+import useKeyDown from "~/hooks/useKeyDown";
+import useMobile from "~/hooks/useMobile";
+import { fadeAndScaleIn } from "~/styles/animations";
+
+type Props = PopoverProps & {
+  children: React.ReactNode;
+  /** The width of the popover, defaults to 380px. */
+  width?: number;
+  /** The minimum width of the popover, use instead of width if contents adjusts size. */
+  minWidth?: number;
+  /** Shrink the padding of the popover */
+  shrink?: boolean;
+  /** Make the popover flex */
+  flex?: boolean;
+  /** The tab index of the popover */
+  tabIndex?: number;
+  /** Whether the popover should be scrollable, defaults to true. */
+  scrollable?: boolean;
+  /** The position of the popover on mobile, defaults to "top". */
+  mobilePosition?: "top" | "bottom";
+  /** Function to show the popover */
+  show: () => void;
+  /** Function to hide the popover */
+  hide: () => void;
+};
+
+const Popover = (
+  {
+    children,
+    shrink,
+    width = 380,
+    minWidth,
+    scrollable = true,
+    flex,
+    mobilePosition,
+    ...rest
+  }: Props,
+  ref: React.Ref<HTMLDivElement>
+) => {
+  const isMobile = useMobile();
+
+  // Custom Escape handler rather than using hideOnEsc from reakit so we can
+  // prevent default behavior of exiting fullscreen.
+  useKeyDown(
+    "Escape",
+    (event) => {
+      if (rest.visible && rest.hideOnEsc !== false) {
+        event.preventDefault();
+        rest.hide();
+      }
+    },
+    {
+      allowInInput: true,
+    }
+  );
+
+  if (isMobile) {
+    return (
+      <Dialog {...rest} modal>
+        <Contents
+          ref={ref}
+          $shrink={shrink}
+          $scrollable={scrollable}
+          $flex={flex}
+          $mobilePosition={mobilePosition}
+        >
+          {children}
+        </Contents>
+      </Dialog>
+    );
+  }
+
+  return (
+    <StyledPopover {...rest} hideOnEsc={false} hideOnClickOutside>
+      <Contents
+        ref={ref}
+        $shrink={shrink}
+        $width={width}
+        $minWidth={minWidth}
+        $scrollable={scrollable}
+        $flex={flex}
+      >
+        {children}
+      </Contents>
+    </StyledPopover>
+  );
+};
+
+type ContentsProps = {
+  $shrink?: boolean;
+  $width?: number;
+  $minWidth?: number;
+  $flex?: boolean;
+  $scrollable: boolean;
+  $mobilePosition?: "top" | "bottom";
+};
+
+const StyledPopover = styled(ReakitPopover)`
+  z-index: ${depths.modal};
+`;
+
+const Contents = styled.div<ContentsProps>`
+  display: ${(props) => (props.$flex ? "flex" : "block")};
+  animation: ${fadeAndScaleIn} 200ms ease;
+  transform-origin: 75% 0;
+  background: ${s("menuBackground")};
+  border-radius: 6px;
+  padding: ${(props) => (props.$shrink ? "6px 0" : "12px 24px")};
+  max-height: 75vh;
+  box-shadow: ${s("menuShadow")};
+  ${(props) => props.$width && `width: ${props.$width}px`};
+  ${(props) => props.$minWidth && `min-width: ${props.$minWidth}px`};
+
+  ${(props) =>
+    props.$scrollable
+      ? `
+      overflow-x: hidden;
+      overflow-y: auto;
+    `
+      : `
+      overflow: hidden;
+    `}
+
+  ${breakpoint("mobile", "tablet")`
+    position: fixed;
+    z-index: ${depths.menu};
+
+    // 50 is a magic number that positions us nicely under the top bar
+    top: ${(props: ContentsProps) =>
+      props.$mobilePosition === "bottom" ? "auto" : "50px"};
+    bottom: ${(props: ContentsProps) =>
+      props.$mobilePosition === "bottom" ? "0" : "auto"};
+    left: 8px;
+    right: 8px;
+    width: auto;
+  `};
+`;
+
+export default React.forwardRef(Popover);
@@ -2,7 +2,7 @@ import compact from "lodash/compact";
 import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
-import * as Tabs from "@radix-ui/react-tabs";
+import { Tab, TabPanel, useTabState } from "reakit";
 import { toast } from "sonner";
 import styled, { css } from "styled-components";
 import { s, hover } from "@shared/styles";
@@ -22,9 +22,7 @@ type Props = {
 const ViewReactionsDialog: React.FC<Props> = ({ model }) => {
  const { t } = useTranslation();
  const { users } = useStores();
-  const [selectedTab, setSelectedTab] = React.useState<string>(
-    model.reactions[0]?.emoji || ""
-  );
+  const tab = useTabState();
  const { reactedUsersLoaded } = model;

  React.useEffect(() => {
@@ -39,32 +37,24 @@ const ViewReactionsDialog: React.FC<Props> = ({ model }) => {
    void loadReactedUsersData();
  }, [t, model]);

-  // Set initial tab when reactions are loaded
-  React.useEffect(() => {
-    if (model.reactions.length > 0 && !selectedTab) {
-      setSelectedTab(model.reactions[0].emoji);
-    }
-  }, [model.reactions, selectedTab]);
-
  if (!reactedUsersLoaded) {
    return <PlaceHolder />;
  }

  return (
-    <Tabs.Root value={selectedTab} onValueChange={setSelectedTab}>
+    <>
      <TabActionsWrapper>
-        <Tabs.List>
-          {model.reactions.map((reaction) => (
-            <StyledTab
-              key={reaction.emoji}
-              value={reaction.emoji}
-              aria-label={t("Reaction")}
-              $active={selectedTab === reaction.emoji}
-            >
-              <Emoji size={16}>{reaction.emoji}</Emoji>
-            </StyledTab>
-          ))}
-        </Tabs.List>
+        {model.reactions.map((reaction) => (
+          <StyledTab
+            {...tab}
+            key={reaction.emoji}
+            id={reaction.emoji}
+            aria-label={t("Reaction")}
+            $active={tab.selectedId === reaction.emoji}
+          >
+            <Emoji size={16}>{reaction.emoji}</Emoji>
+          </StyledTab>
+        ))}
      </TabActionsWrapper>
      {model.reactions.map((reaction) => {
        const reactedUsers = compact(
@@ -72,7 +62,7 @@ const ViewReactionsDialog: React.FC<Props> = ({ model }) => {
        );

        return (
-          <StyledTabPanel key={reaction.emoji} value={reaction.emoji}>
+          <StyledTabPanel {...tab} key={reaction.emoji}>
            {reactedUsers.map((user) => (
              <UserInfo key={user.name} align="center" gap={8}>
                <Avatar model={user} size={AvatarSize.Medium} />
@@ -82,7 +72,7 @@ const ViewReactionsDialog: React.FC<Props> = ({ model }) => {
          </StyledTabPanel>
        );
      })}
-    </Tabs.Root>
+    </>
  );
 };

@@ -111,7 +101,7 @@ const TabActionsWrapper = styled(Flex)`
  border-bottom: 1px solid ${s("inputBorder")};
 `;

-const StyledTab = styled(Tabs.Trigger)<{ $active: boolean }>`
+const StyledTab = styled(Tab)<{ $active: boolean }>`
  position: relative;
  font-weight: 500;
  font-size: 14px;
@@ -142,7 +132,7 @@ const StyledTab = styled(Tabs.Trigger)<{ $active: boolean }>`
    `}
 `;

-const StyledTabPanel = styled(Tabs.Content)`
+const StyledTabPanel = styled(TabPanel)`
  height: 300px;
  padding: 5px 0;
  overflow-y: auto;
@@ -1,7 +1,7 @@
 import { m, TargetAndTransition } from "framer-motion";
 import * as React from "react";
 import { mergeRefs } from "react-merge-refs";
-import useMeasure from "react-use-measure";
+import { useComponentSize } from "@shared/hooks/useComponentSize";

 type Props = {
  /** The children to render */
@@ -33,7 +33,8 @@ export const ResizingHeightContainer = React.forwardRef<HTMLDivElement, Props>(
      style,
    } = props;

-    const [measureRef, { height }] = useMeasure();
+    const ref = React.useRef<HTMLDivElement>(null);
+    const { height } = useComponentSize(ref);

    return (
      <m.div
@@ -47,7 +48,7 @@ export const ResizingHeightContainer = React.forwardRef<HTMLDivElement, Props>(
          position: "relative",
        }}
      >
-        <div ref={mergeRefs([measureRef, forwardedRef])}>{children}</div>
+        <div ref={mergeRefs([ref, forwardedRef])}>{children}</div>
      </m.div>
    );
  }
@@ -1,7 +1,7 @@
 import { LocationDescriptor } from "history";
 import { observer } from "mobx-react";
 import { EditIcon, TrashIcon } from "outline-icons";
-import { useCallback, useRef } from "react";
+import { useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { useLocation } from "react-router-dom";
 import styled from "styled-components";
@@ -20,7 +20,6 @@ import { documentHistoryPath } from "~/utils/routeHelpers";
 import { EventItem, lineStyle } from "./EventListItem";
 import Facepile from "./Facepile";
 import Text from "./Text";
-import useClickIntent from "~/hooks/useClickIntent";

 type Props = {
  document: Document;
@@ -44,7 +43,7 @@ const RevisionListItem = ({ item, document, ...rest }: Props) => {
    ref.current?.focus();
  };

-  const prefetchRevision = useCallback(async () => {
+  const prefetchRevision = async () => {
    if (!document.isDeleted && !item.deletedAt && !revisionLoadedRef.current) {
      if (isLatestRevision) {
        return;
@@ -52,10 +51,7 @@ const RevisionListItem = ({ item, document, ...rest }: Props) => {
      await revisions.fetch(item.id, { force: true });
      revisionLoadedRef.current = true;
    }
-  }, [document.isDeleted, item.deletedAt, isLatestRevision, revisions]);
-
-  const { handleMouseEnter, handleMouseLeave } =
-    useClickIntent(prefetchRevision);
+  };

  let meta, icon, to: LocationDescriptor | undefined;

@@ -138,8 +134,7 @@ const RevisionListItem = ({ item, document, ...rest }: Props) => {
          </StyledEventBoundary>
        ) : undefined
      }
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
+      onMouseEnter={prefetchRevision}
      ref={ref}
      {...rest}
    />
@@ -10,7 +10,7 @@ import breakpoint from "styled-components-breakpoint";
 import { s, hover, ellipsis } from "@shared/styles";
 import Document from "~/models/Document";
 import Highlight, { Mark } from "~/components/Highlight";
-import { sharedModelPath } from "~/utils/routeHelpers";
+import { sharedDocumentPath } from "~/utils/routeHelpers";

 type Props = {
  document: Document;
@@ -51,7 +51,7 @@ function DocumentListItem(
      dir={document.dir}
      to={{
        pathname: shareId
-          ? sharedModelPath(shareId, document.url)
+          ? sharedDocumentPath(shareId, document.url)
          : document.url,
        state: {
          title: document.titleWithDefault,
@@ -2,17 +2,15 @@ import debounce from "lodash/debounce";
 import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
+import { usePopoverState, PopoverDisclosure } from "reakit/Popover";
 import styled from "styled-components";
+import { depths } from "@shared/styles";
 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 Popover from "~/components/Popover";
 import { id as bodyContentId } from "~/components/SkipNavContent";
 import useKeyDown from "~/hooks/useKeyDown";
 import useStores from "~/hooks/useStores";
@@ -29,8 +27,14 @@ function SearchPopover({ shareId, className }: Props) {
  const { documents } = useStores();
  const focusRef = React.useRef<HTMLElement | null>(null);

-  const [open, setOpen] = React.useState(false);
+  const popover = usePopoverState({
+    placement: "bottom-start",
+    unstable_offset: [-24, 0],
+    modal: true,
+  });
+
  const [query, setQuery] = React.useState("");
+  const { show, hide } = popover;

  const [searchResults, setSearchResults] = React.useState<
    SearchResult[] | undefined
@@ -44,9 +48,9 @@ function SearchPopover({ shareId, className }: Props) {
    if (searchResults) {
      setCachedQuery(query);
      setCachedSearchResults(searchResults);
-      setOpen(true);
+      show();
    }
-  }, [searchResults, query]);
+  }, [searchResults, query, show]);

  const performSearch = React.useCallback(
    async ({ query: searchQuery, ...options }) => {
@@ -72,14 +76,25 @@ function SearchPopover({ shareId, className }: Props) {
    () =>
      debounce(async (event: React.ChangeEvent<HTMLInputElement>) => {
        const { value } = event.target;
-        const trimmedValue = value.trim();
-        setQuery(trimmedValue);
-        setOpen(!!trimmedValue);
+        setQuery(value.trim());
+
+        // covers edge case: user manually dismisses popover then
+        // quickly edits input resulting in no change in query
+        // the useEffect that normally shows the popover will miss it
+        if (value === cachedQuery) {
+          popover.show();
+        }
+
+        if (!value.length) {
+          popover.hide();
+        }
      }, 300),
-    [cachedQuery]
+    [popover, cachedQuery]
  );

-  const searchInputRef = React.useRef<HTMLInputElement>(null);
+  const searchInputRef =
+    popover.unstable_referenceRef as React.RefObject<HTMLInputElement>;
+
  const firstSearchItem = React.useRef<HTMLAnchorElement>(null);

  const handleEscapeList = React.useCallback(
@@ -99,29 +114,24 @@ function SearchPopover({ shareId, className }: Props) {

      if (ev.key === "Enter") {
        if (searchResults) {
-          setOpen(true);
+          popover.show();
        }
      }

      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.currentTarget.value.length === ev.currentTarget.selectionStart
+          ) {
+            popover.show();
          }
+          firstSearchItem.current?.focus();
        }
      }

      if (ev.key === "ArrowUp") {
-        if (open) {
-          setOpen(false);
+        if (popover.visible) {
+          popover.hide();
          if (!ev.shiftKey) {
            ev.preventDefault();
          }
@@ -137,22 +147,22 @@ function SearchPopover({ shareId, className }: Props) {
      }

      if (ev.key === "Escape") {
-        if (open) {
-          setOpen(false);
+        if (popover.visible) {
+          popover.hide();
          ev.preventDefault();
        }
      }
    },
-    [open, searchResults]
+    [popover, searchResults]
  );

  const handleSearchItemClick = React.useCallback(() => {
-    setOpen(false);
+    hide();
    if (searchInputRef.current) {
      searchInputRef.current.value = "";
      focusRef.current = document.getElementById(bodyContentId);
    }
-  }, [searchInputRef]);
+  }, [searchInputRef, hide]);

  useKeyDown("/", (ev) => {
    if (
@@ -165,33 +175,30 @@ function SearchPopover({ shareId, className }: Props) {
  });

  return (
-    <Popover open={open} onOpenChange={setOpen} modal={true}>
-      <PopoverAnchor>
-        <StyledInputSearch
-          aria-controls="search-results"
-          aria-expanded={open}
-          aria-haspopup="listbox"
-          ref={searchInputRef}
-          onChange={handleSearchInputChange}
-          onFocus={handleSearchInputFocus}
-          onKeyDown={handleKeyDown}
-          className={className}
-        />
-      </PopoverAnchor>
-      <PopoverContent
-        id="search-results"
+    <>
+      <PopoverDisclosure {...popover}>
+        {(props) => (
+          // props assumes the disclosure is a button, but we want a type-ahead
+          // so we take the aria props, and ref and ignore the event handlers
+          <StyledInputSearch
+            aria-controls={props["aria-controls"]}
+            aria-expanded={props["aria-expanded"]}
+            aria-haspopup={props["aria-haspopup"]}
+            ref={props.ref}
+            onChange={handleSearchInputChange}
+            onFocus={handleSearchInputFocus}
+            onKeyDown={handleKeyDown}
+            className={className}
+          />
+        )}
+      </PopoverDisclosure>
+      <Popover
+        {...popover}
        aria-label={t("Results")}
-        side="bottom"
-        align="start"
+        unstable_autoFocusOnShow={false}
+        unstable_finalFocusRef={focusRef}
+        style={{ zIndex: depths.sidebar + 1 }}
        shrink
-        onEscapeKeyDown={handleEscapeList}
-        onOpenAutoFocus={(e) => e.preventDefault()}
-        onInteractOutside={(event) => {
-          const target = event.target as Element | null;
-          if (target === searchInputRef.current) {
-            event.preventDefault();
-          }
-        }}
      >
        <PaginatedList<SearchResult>
          options={{ query, snippetMinWords: 10, snippetMaxWords: 11 }}
@@ -214,8 +221,8 @@ function SearchPopover({ shareId, className }: Props) {
            />
          )}
        />
-      </PopoverContent>
-    </Popover>
+      </Popover>
+    </>
  );
 }

@@ -5,42 +5,32 @@ import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
 import styled, { useTheme } from "styled-components";
 import Squircle from "@shared/components/Squircle";
-import { s } from "@shared/styles";
 import { CollectionPermission } from "@shared/types";
 import Collection from "~/models/Collection";
-import Share from "~/models/Share";
 import { Avatar, GroupAvatar, AvatarSize } from "~/components/Avatar";
 import InputMemberPermissionSelect from "~/components/InputMemberPermissionSelect";
 import { InputSelectPermission } from "~/components/InputSelectPermission";
 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 { EmptySelectValue, Permission } from "~/types";
-import { Separator } from "../components";
 import { ListItem } from "../components/ListItem";
 import { Placeholder } from "../components/Placeholder";
-import { PublicAccess } from "./PublicAccess";

 type Props = {
  /** Collection to which team members are supposed to be invited */
  collection: Collection;
-  /** The existing share model, if any. */
-  share: Share | null | undefined;
  /** Children to be rendered before the list of members */
  children?: React.ReactNode;
  /** List of users and groups that have been invited during the current editing session */
  invitedInSession: string[];
-  /** Whether the popover is visible. */
-  visible: boolean;
 };

 export const AccessControlList = observer(
-  ({ collection, share, invitedInSession, visible }: Props) => {
+  ({ collection, invitedInSession }: Props) => {
    const { memberships, groupMemberships } = useStores();
-    const team = useCurrentTeam();
    const can = usePolicy(collection);
    const { t } = useTranslation();
    const theme = useTheme();
@@ -256,12 +246,6 @@ export const AccessControlList = observer(
              ))}
          </>
        )}
-        {team.sharing && can.share && collection.sharing && visible && (
-          <Sticky>
-            {collection.members.length ? <Separator /> : null}
-            <PublicAccess collection={collection} share={share} />
-          </Sticky>
-        )}
      </ScrollableContainer>
    );
  }
@@ -271,9 +255,3 @@ const ScrollableContainer = styled(Scrollable)`
  padding: 12px 24px;
  margin: -12px -24px;
 `;
-
-const Sticky = styled.div`
-  background: ${s("menuBackground")};
-  position: sticky;
-  bottom: 0;
-`;
@@ -1,267 +0,0 @@
-import debounce from "lodash/debounce";
-import isEmpty from "lodash/isEmpty";
-import { observer } from "mobx-react";
-import { CopyIcon, GlobeIcon, InfoIcon, QuestionMarkIcon } from "outline-icons";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { toast } from "sonner";
-import styled, { useTheme } from "styled-components";
-import Squircle from "@shared/components/Squircle";
-import { s } from "@shared/styles";
-import { UrlHelper } from "@shared/utils/UrlHelper";
-import Collection from "~/models/Collection";
-import Share from "~/models/Share";
-import { AvatarSize } from "~/components/Avatar";
-import CopyToClipboard from "~/components/CopyToClipboard";
-import Flex from "~/components/Flex";
-import Input, { NativeInput } from "~/components/Input";
-import NudeButton from "~/components/NudeButton";
-import { ResizingHeightContainer } from "~/components/ResizingHeightContainer";
-import Switch from "~/components/Switch";
-import Text from "~/components/Text";
-import Tooltip from "~/components/Tooltip";
-import env from "~/env";
-import usePolicy from "~/hooks/usePolicy";
-import { ListItem } from "../components/ListItem";
-
-type Props = {
-  /** The collection to share. */
-  collection: Collection;
-  /** The existing share model, if any. */
-  share: Share | null | undefined;
-};
-
-function InnerPublicAccess({ collection, share }: Props) {
-  const { t } = useTranslation();
-  const theme = useTheme();
-  const [validationError, setValidationError] = useState("");
-  const [urlId, setUrlId] = useState(share?.urlId);
-  const inputRef = useRef<HTMLInputElement>(null);
-  const can = usePolicy(share);
-  const collectionAbilities = usePolicy(collection);
-  const canPublish = can.update && collectionAbilities.share;
-
-  useEffect(() => {
-    setUrlId(share?.urlId);
-  }, [share?.urlId]);
-
-  const handleIndexingChanged = useCallback(
-    async (checked: boolean) => {
-      try {
-        await share?.save({
-          allowIndexing: checked,
-        });
-      } catch (err) {
-        toast.error(err.message);
-      }
-    },
-    [share]
-  );
-
-  const handleShowLastModifiedChanged = useCallback(
-    async (checked: boolean) => {
-      try {
-        await share?.save({
-          showLastUpdated: checked,
-        });
-      } catch (err) {
-        toast.error(err.message);
-      }
-    },
-    [share]
-  );
-
-  const handlePublishedChange = useCallback(
-    async (checked: boolean) => {
-      try {
-        await share?.save({
-          published: checked,
-        });
-      } catch (err) {
-        toast.error(err.message);
-      }
-    },
-    [share]
-  );
-
-  const handleUrlChange = useMemo(
-    () =>
-      debounce(async (ev) => {
-        if (!share) {
-          return;
-        }
-
-        const val = ev.target.value;
-        setUrlId(val);
-        if (val && !UrlHelper.SHARE_URL_SLUG_REGEX.test(val)) {
-          setValidationError(
-            t("Only lowercase letters, digits and dashes allowed")
-          );
-        } else {
-          setValidationError("");
-          if (share.urlId !== val) {
-            try {
-              await share.save({
-                urlId: isEmpty(val) ? null : val,
-              });
-            } catch (err) {
-              if (err.message.includes("must be unique")) {
-                setValidationError(t("Sorry, this link has already been used"));
-              }
-            }
-          }
-        }
-      }, 500),
-    [t, share]
-  );
-
-  const handleCopied = useCallback(() => {
-    toast.success(t("Public link copied to clipboard"));
-  }, [t]);
-
-  const copyButton = (
-    <Tooltip content={t("Copy public link")} placement="top">
-      <CopyToClipboard text={share?.url ?? ""} onCopy={handleCopied}>
-        <NudeButton type="button" disabled={!share} style={{ marginRight: 3 }}>
-          <CopyIcon color={theme.placeholder} size={18} />
-        </NudeButton>
-      </CopyToClipboard>
-    </Tooltip>
-  );
-
-  return (
-    <Wrapper>
-      <ListItem
-        title={t("Web")}
-        subtitle={<>{t("Allow anyone with the link to access")}</>}
-        image={
-          <Squircle color={theme.text} size={AvatarSize.Medium}>
-            <GlobeIcon color={theme.background} size={18} />
-          </Squircle>
-        }
-        actions={
-          <Switch
-            aria-label={t("Publish to internet")}
-            checked={share?.published ?? false}
-            onChange={handlePublishedChange}
-            disabled={!canPublish}
-            width={26}
-            height={14}
-          />
-        }
-      />
-
-      <ResizingHeightContainer>
-        {!!share?.published && (
-          <>
-            <ListItem
-              title={
-                <Text type="tertiary" as={Flex}>
-                  {t("Search engine indexing")}&nbsp;
-                  <Tooltip
-                    content={t(
-                      "Disable this setting to discourage search engines from indexing the page"
-                    )}
-                  >
-                    <NudeButton size={18}>
-                      <QuestionMarkIcon size={18} />
-                    </NudeButton>
-                  </Tooltip>
-                </Text>
-              }
-              actions={
-                <Switch
-                  aria-label={t("Search engine indexing")}
-                  checked={share?.allowIndexing ?? false}
-                  onChange={handleIndexingChanged}
-                  width={26}
-                  height={14}
-                />
-              }
-            />
-            <ListItem
-              title={
-                <Text type="tertiary" as={Flex}>
-                  {t("Show last modified")}&nbsp;
-                  <Tooltip
-                    content={t(
-                      "Display the last modified timestamp on the shared page"
-                    )}
-                  >
-                    <NudeButton size={18}>
-                      <QuestionMarkIcon size={18} />
-                    </NudeButton>
-                  </Tooltip>
-                </Text>
-              }
-              actions={
-                <Switch
-                  aria-label={t("Show last modified")}
-                  checked={share?.showLastUpdated ?? false}
-                  onChange={handleShowLastModifiedChanged}
-                  width={26}
-                  height={14}
-                />
-              }
-            />
-            <ShareLinkInput
-              type="text"
-              ref={inputRef}
-              placeholder={share?.id}
-              onChange={handleUrlChange}
-              error={validationError}
-              defaultValue={urlId}
-              prefix={
-                <DomainPrefix onClick={() => inputRef.current?.focus()}>
-                  {env.URL.replace(/https?:\/\//, "") + "/s/"}
-                </DomainPrefix>
-              }
-            >
-              {copyButton}
-            </ShareLinkInput>
-            <Flex align="flex-start" gap={4}>
-              <StyledInfoIcon size={18} color={theme.textTertiary} />
-              <Text type="tertiary" size="xsmall">
-                {t(
-                  "All documents in this collection will be shared on the web, including any new documents added later"
-                )}
-                .
-              </Text>
-            </Flex>
-          </>
-        )}
-      </ResizingHeightContainer>
-    </Wrapper>
-  );
-}
-
-const Wrapper = styled.div`
-  padding-bottom: 8px;
-`;
-
-const DomainPrefix = styled.span`
-  padding: 0 2px 0 8px;
-  flex: 0 1 auto;
-  cursor: text;
-  color: ${s("placeholder")};
-  user-select: none;
-`;
-
-const ShareLinkInput = styled(Input)`
-  margin-top: 12px;
-  min-width: 100px;
-  flex: 1;
-
-  ${NativeInput}:not(:first-child) {
-    padding: 4px 8px 4px 0;
-    flex: 1;
-  }
-`;
-
-const StyledInfoIcon = styled(InfoIcon)`
-  width: 24px;
-  height: 24px;
-  flex-shrink: 0;
-`;
-
-export const PublicAccess = observer(InnerPublicAccess);
@@ -39,7 +39,7 @@ type Props = {

 function SharePopover({ collection, visible, onRequestClose }: Props) {
  const team = useCurrentTeam();
-  const { groupMemberships, users, groups, memberships, shares } = useStores();
+  const { groupMemberships, users, groups, memberships } = useStores();
  const { t } = useTranslation();
  const can = usePolicy(collection);
  const [query, setQuery] = React.useState("");
@@ -51,7 +51,6 @@ function SharePopover({ collection, visible, onRequestClose }: Props) {
    CollectionPermission.Read
  );

-  const share = shares.getByCollectionId(collection.id);
  const prevPendingIds = usePrevious(pendingIds);

  const suggestionsRef = React.useRef<HTMLDivElement | null>(null);
@@ -94,10 +93,9 @@ function SharePopover({ collection, visible, onRequestClose }: Props) {

  React.useEffect(() => {
    if (visible) {
-      void collection.share();
      setHasRendered(true);
    }
-  }, [collection, visible]);
+  }, [visible]);

  React.useEffect(() => {
    if (prevPendingIds && pendingIds.length > prevPendingIds.length) {
@@ -365,9 +363,7 @@ function SharePopover({ collection, visible, onRequestClose }: Props) {
      <div style={{ display: picker ? "none" : "block" }}>
        <AccessControlList
          collection={collection}
-          share={share}
          invitedInSession={invitedInSession}
-          visible={visible}
        />
      </div>
    </Wrapper>
@@ -125,6 +125,8 @@ function PublicAccess({ document, share, sharedParent }: Props) {
    toast.success(t("Public link copied to clipboard"));
  }, [t]);

+  const documentTitle = sharedParent?.documentTitle;
+
  const shareUrl = sharedParent?.url
    ? `${sharedParent.url}${document.url}`
    : (share?.url ?? "");
@@ -146,24 +148,13 @@ function PublicAccess({ document, share, sharedParent }: Props) {
        subtitle={
          <>
            {sharedParent && !document.isDraft ? (
-              sharedParent.collectionId ? (
-                <Trans>
-                  Anyone with the link can access because the containing
-                  collection,{" "}
-                  <StyledLink to={`/collection/${sharedParent.collectionId}`}>
-                    {sharedParent.sourceTitle}
-                  </StyledLink>
-                  , is shared
-                </Trans>
-              ) : (
-                <Trans>
-                  Anyone with the link can access because the parent document,{" "}
-                  <StyledLink to={`/doc/${sharedParent.documentId}`}>
-                    {sharedParent.sourceTitle}
-                  </StyledLink>
-                  , is shared
-                </Trans>
-              )
+              <Trans>
+                Anyone with the link can access because the parent document,{" "}
+                <StyledLink to={`/doc/${sharedParent.documentId}`}>
+                  {{ documentTitle }}
+                </StyledLink>
+                , is shared
+              </Trans>
            ) : (
              t("Allow anyone with the link to access")
            )}
@@ -189,59 +180,60 @@ function PublicAccess({ document, share, sharedParent }: Props) {
      />

      <ResizingHeightContainer>
-        {share?.published && !sharedParent?.published && (
-          <>
-            <ListItem
-              title={
-                <Text type="tertiary" as={Flex}>
-                  {t("Search engine indexing")}&nbsp;
-                  <Tooltip
-                    content={t(
-                      "Disable this setting to discourage search engines from indexing the page"
-                    )}
-                  >
-                    <NudeButton size={18}>
-                      <QuestionMarkIcon size={18} />
-                    </NudeButton>
-                  </Tooltip>
-                </Text>
-              }
-              actions={
-                <Switch
-                  aria-label={t("Search engine indexing")}
-                  checked={share?.allowIndexing ?? false}
-                  onChange={handleIndexingChanged}
-                  width={26}
-                  height={14}
-                />
-              }
-            />
-            <ListItem
-              title={
-                <Text type="tertiary" as={Flex}>
-                  {t("Show last modified")}&nbsp;
-                  <Tooltip
-                    content={t(
-                      "Display the last modified timestamp on the shared page"
-                    )}
-                  >
-                    <NudeButton size={18}>
-                      <QuestionMarkIcon size={18} />
-                    </NudeButton>
-                  </Tooltip>
-                </Text>
-              }
-              actions={
-                <Switch
-                  aria-label={t("Show last modified")}
-                  checked={share?.showLastUpdated ?? false}
-                  onChange={handleShowLastModifiedChanged}
-                  width={26}
-                  height={14}
-                />
-              }
-            />
-          </>
+        {share?.published && (
+          <ListItem
+            title={
+              <Text type="tertiary" as={Flex}>
+                {t("Search engine indexing")}&nbsp;
+                <Tooltip
+                  content={t(
+                    "Disable this setting to discourage search engines from indexing the page"
+                  )}
+                >
+                  <NudeButton size={18}>
+                    <QuestionMarkIcon size={18} />
+                  </NudeButton>
+                </Tooltip>
+              </Text>
+            }
+            actions={
+              <Switch
+                aria-label={t("Search engine indexing")}
+                checked={share?.allowIndexing ?? false}
+                onChange={handleIndexingChanged}
+                width={26}
+                height={14}
+              />
+            }
+          />
+        )}
+
+        {share?.published && (
+          <ListItem
+            title={
+              <Text type="tertiary" as={Flex}>
+                {t("Show last modified")}&nbsp;
+                <Tooltip
+                  content={t(
+                    "Display the last modified timestamp on the shared page"
+                  )}
+                >
+                  <NudeButton size={18}>
+                    <QuestionMarkIcon size={18} />
+                  </NudeButton>
+                </Tooltip>
+              </Text>
+            }
+            actions={
+              <Switch
+                aria-label={t("Show last modified")}
+                checked={share?.showLastUpdated ?? false}
+                onChange={handleShowLastModifiedChanged}
+                width={26}
+                height={14}
+              />
+            }
+          />
        )}

        {sharedParent?.published ? (
@@ -43,7 +43,7 @@ function SharePopover({ document, onRequestClose, visible }: Props) {
  const can = usePolicy(document);
  const { shares } = useStores();
  const share = shares.getByDocumentId(document.id);
-  const sharedParent = shares.getByDocumentParents(document);
+  const sharedParent = shares.getByDocumentParents(document.id);
  const [hasRendered, setHasRendered] = React.useState(visible);
  const { users, userMemberships, groups, groupMemberships } = useStores();
  const [query, setQuery] = React.useState("");
@@ -1,34 +0,0 @@
-import { observer } from "mobx-react";
-import { MoonIcon, SunIcon } from "outline-icons";
-import { useTranslation } from "react-i18next";
-import { Action } from "~/components/Actions";
-import Button from "~/components/Button";
-import Tooltip from "~/components/Tooltip";
-import useStores from "~/hooks/useStores";
-import { Theme } from "~/stores/UiStore";
-
-export const AppearanceAction = observer(() => {
-  const { t } = useTranslation();
-  const { ui } = useStores();
-  const { resolvedTheme } = ui;
-
-  return (
-    <Action>
-      <Tooltip
-        content={
-          resolvedTheme === "light" ? t("Switch to dark") : t("Switch to light")
-        }
-        placement="bottom"
-      >
-        <Button
-          icon={resolvedTheme === "light" ? <SunIcon /> : <MoonIcon />}
-          onClick={() =>
-            ui.setTheme(resolvedTheme === "light" ? Theme.Dark : Theme.Light)
-          }
-          neutral
-          borderOnHover
-        />
-      </Tooltip>
-    </Action>
-  );
-});
@@ -25,7 +25,7 @@ import HistoryNavigation from "./components/HistoryNavigation";
 import Section from "./components/Section";
 import SharedWithMe from "./components/SharedWithMe";
 import SidebarAction from "./components/SidebarAction";
-import SidebarButton from "./components/SidebarButton";
+import SidebarButton, { SidebarButtonProps } from "./components/SidebarButton";
 import SidebarLink from "./components/SidebarLink";
 import Starred from "./components/Starred";
 import ToggleButton from "./components/ToggleButton";
@@ -63,31 +63,34 @@ function AppSidebar() {
          <DragPlaceholder />

          <TeamMenu>
-            <SidebarButton
-              title={team.name}
-              image={
-                <TeamLogo
-                  model={team}
-                  size={24}
-                  alt={t("Logo")}
-                  style={{ marginLeft: 4 }}
-                />
-              }
-            >
-              <Tooltip
-                content={t("Toggle sidebar")}
-                shortcut={`${metaDisplay}+.`}
+            {(props: SidebarButtonProps) => (
+              <SidebarButton
+                {...props}
+                title={team.name}
+                image={
+                  <TeamLogo
+                    model={team}
+                    size={24}
+                    alt={t("Logo")}
+                    style={{ marginLeft: 4 }}
+                  />
+                }
              >
-                <ToggleButton
-                  position="bottom"
-                  image={<SidebarIcon />}
-                  onClick={() => {
-                    ui.toggleCollapsedSidebar();
-                    (document.activeElement as HTMLElement)?.blur();
-                  }}
-                />
-              </Tooltip>
-            </SidebarButton>
+                <Tooltip
+                  content={t("Toggle sidebar")}
+                  shortcut={`${metaDisplay}+.`}
+                >
+                  <ToggleButton
+                    position="bottom"
+                    image={<SidebarIcon />}
+                    onClick={() => {
+                      ui.toggleCollapsedSidebar();
+                      (document.activeElement as HTMLElement)?.blur();
+                    }}
+                  />
+                </Tooltip>
+              </SidebarButton>
+            )}
          </TeamMenu>
          <Overflow>
            <Section>
@@ -3,8 +3,8 @@ import { SidebarIcon } from "outline-icons";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import { hover } from "@shared/styles";
+import { NavigationNode } from "@shared/types";
 import { metaDisplay } from "@shared/utils/keyboard";
-import Share from "~/models/Share";
 import Flex from "~/components/Flex";
 import Scrollable from "~/components/Scrollable";
 import SearchPopover from "~/components/SearchPopover";
@@ -12,34 +12,28 @@ import Tooltip from "~/components/Tooltip";
 import useCurrentUser from "~/hooks/useCurrentUser";
 import useStores from "~/hooks/useStores";
 import history from "~/utils/history";
-import { homePath, sharedModelPath } from "~/utils/routeHelpers";
+import { homePath, sharedDocumentPath } from "~/utils/routeHelpers";
 import { AvatarSize } from "../Avatar";
 import { useTeamContext } from "../TeamContext";
 import TeamLogo from "../TeamLogo";
 import Sidebar from "./Sidebar";
 import Section from "./components/Section";
-import { SharedCollectionLink } from "./components/SharedCollectionLink";
-import { SharedDocumentLink } from "./components/SharedDocumentLink";
+import DocumentLink from "./components/SharedDocumentLink";
 import SidebarButton from "./components/SidebarButton";
 import ToggleButton from "./components/ToggleButton";

 type Props = {
-  share: Share;
+  rootNode: NavigationNode;
+  shareId: string;
 };

-function SharedSidebar({ share }: Props) {
+function SharedSidebar({ rootNode, shareId }: Props) {
  const team = useTeamContext();
  const user = useCurrentUser({ rejectOnEmpty: false });
  const { ui, documents } = useStores();
  const { t } = useTranslation();

  const teamAvailable = !!team?.name;
-  const rootNode = share.tree;
-  const shareId = share.urlId || share.id;
-
-  if (!rootNode?.children.length) {
-    return null;
-  }

  return (
    <StyledSidebar $hoverTransition={!teamAvailable}>
@@ -50,7 +44,9 @@ function SharedSidebar({ share }: Props) {
            <TeamLogo model={team} size={AvatarSize.XLarge} alt={t("Logo")} />
          }
          onClick={() =>
-            history.push(user ? homePath() : sharedModelPath(shareId))
+            history.push(
+              user ? homePath() : sharedDocumentPath(shareId, rootNode.url)
+            )
          }
        >
          <ToggleSidebar />
@@ -68,19 +64,15 @@ function SharedSidebar({ share }: Props) {
          )}
        </TopSection>
        <Section>
-          {share.collectionId ? (
-            <SharedCollectionLink node={rootNode} shareId={shareId} />
-          ) : (
-            <SharedDocumentLink
-              index={0}
-              depth={0}
-              shareId={shareId}
-              node={rootNode}
-              prefetchDocument={documents.prefetchDocument}
-              activeDocumentId={ui.activeDocumentId}
-              activeDocument={documents.active}
-            />
-          )}
+          <DocumentLink
+            index={0}
+            depth={0}
+            shareId={shareId}
+            node={rootNode}
+            prefetchDocument={documents.prefetchDocument}
+            activeDocumentId={ui.activeDocumentId}
+            activeDocument={documents.active}
+          />
        </Section>
      </ScrollContainer>
    </StyledSidebar>
@@ -19,7 +19,7 @@ import NotificationIcon from "../Notifications/NotificationIcon";
 import NotificationsPopover from "../Notifications/NotificationsPopover";
 import { TooltipProvider } from "../TooltipContext";
 import ResizeBorder from "./components/ResizeBorder";
-import SidebarButton from "./components/SidebarButton";
+import SidebarButton, { SidebarButtonProps } from "./components/SidebarButton";
 import ToggleButton from "./components/ToggleButton";

 const ANIMATION_MS = 250;
@@ -231,23 +231,29 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(function _Sidebar(

        {user && (
          <AccountMenu>
-            <SidebarButton
-              showMoreMenu
-              title={user.name}
-              position="bottom"
-              image={
-                <Avatar
-                  alt={user.name}
-                  model={user}
-                  size={24}
-                  style={{ marginLeft: 4 }}
-                />
-              }
-            >
-              <NotificationsPopover>
-                <SidebarButton position="bottom" image={<NotificationIcon />} />
-              </NotificationsPopover>
-            </SidebarButton>
+            {(props: SidebarButtonProps) => (
+              <SidebarButton
+                {...props}
+                showMoreMenu
+                title={user.name}
+                position="bottom"
+                image={
+                  <Avatar
+                    alt={user.name}
+                    model={user}
+                    size={24}
+                    style={{ marginLeft: 4 }}
+                  />
+                }
+              >
+                <NotificationsPopover>
+                  <SidebarButton
+                    position="bottom"
+                    image={<NotificationIcon />}
+                  />
+                </NotificationsPopover>
+              </SidebarButton>
+            )}
          </AccountMenu>
        )}
        <ResizeBorder
@@ -33,13 +33,10 @@ import Folder from "./Folder";
 import Relative from "./Relative";
 import { SidebarContextType, useSidebarContext } from "./SidebarContext";
 import SidebarLink from "./SidebarLink";
-import UserMembership from "~/models/UserMembership";
-import GroupMembership from "~/models/GroupMembership";

 type Props = {
  node: NavigationNode;
  collection?: Collection;
-  membership?: UserMembership | GroupMembership;
  activeDocument: Document | null | undefined;
  prefetchDocument?: (documentId: string) => Promise<Document | void>;
  isDraft?: boolean;
@@ -52,7 +49,6 @@ function InnerDocumentLink(
  {
    node,
    collection,
-    membership,
    activeDocument,
    prefetchDocument,
    isDraft,
@@ -91,27 +87,20 @@ function InnerDocumentLink(
    isActiveDocument,
  ]);

-  const showChildren = React.useMemo(() => {
-    if (!hasChildDocuments || !activeDocument) {
-      return false;
-    }
-
-    const pathToDocument =
-      collection?.pathToDocument(activeDocument.id) ??
-      membership?.pathToDocument(activeDocument.id);
-
-    return !!(
-      pathToDocument?.map((entry) => entry.id).includes(node.id) ||
-      isActiveDocument
-    );
-  }, [
-    hasChildDocuments,
-    activeDocument,
-    isActiveDocument,
-    node,
-    collection,
-    membership,
-  ]);
+  const showChildren = React.useMemo(
+    () =>
+      !!(
+        hasChildDocuments &&
+        activeDocument &&
+        collection &&
+        (collection
+          .pathToDocument(activeDocument.id)
+          .map((entry) => entry.id)
+          .includes(node.id) ||
+          isActiveDocument)
+      ),
+    [hasChildDocuments, activeDocument, isActiveDocument, node, collection]
+  );

  const [expanded, setExpanded, setCollapsed] = useBoolean(showChildren);

@@ -193,11 +182,9 @@ function InnerDocumentLink(
  const can = policies.abilities(node.id);
  const icon = document?.icon || node.icon || node.emoji;
  const color = document?.color || node.color;
-  const initial = document?.initial || node.title.charAt(0).toUpperCase();

  const iconElement = React.useMemo(
-    () =>
-      icon ? <Icon value={icon} color={color} initial={initial} /> : undefined,
+    () => (icon ? <Icon value={icon} color={color} /> : undefined),
    [icon, color]
  );

@@ -415,7 +402,6 @@ function InnerDocumentLink(
          <DocumentLink
            key={childNode.id}
            collection={collection}
-            membership={membership}
            node={childNode}
            activeDocument={activeDocument}
            prefetchDocument={prefetchDocument}
@@ -433,7 +419,7 @@ function InnerDocumentLink(
 const Draggable = styled.div<{ $isDragging?: boolean; $isMoving?: boolean }>`
  transition: opacity 250ms ease;
  opacity: ${(props) => (props.$isDragging || props.$isMoving ? 0.1 : 1)};
-  pointer-events: ${(props) => (props.$isMoving ? "none" : "inherit")};
+  pointer-events: ${(props) => (props.$isMoving ? "none" : "all")};
 `;

 const DocumentLink = observer(React.forwardRef(InnerDocumentLink));
@@ -135,7 +135,7 @@ function DraggableCollectionLink({
 const Draggable = styled("div")<{ $isDragging: boolean }>`
  transition: opacity 250ms ease;
  opacity: ${(props) => (props.$isDragging ? 0.1 : 1)};
-  pointer-events: ${(props) => (props.$isDragging ? "none" : "inherit")};
+  pointer-events: ${(props) => (props.$isDragging ? "none" : "auto")};
 `;

 export default observer(DraggableCollectionLink);
@@ -122,11 +122,13 @@ const NavLink = ({
    }
  }, [to, replace]);

-  const handleMouseDown = React.useCallback(
+  const handleClick = React.useCallback(
    (event: React.MouseEvent<HTMLAnchorElement>) => {
      onClick?.(event);

      if (shouldFastClick(event)) {
+        event.stopPropagation();
+        event.preventDefault();
        event.currentTarget.focus();

        setPreActive(true);
@@ -159,8 +161,7 @@ const NavLink = ({
    <Link
      key={isActive ? "active" : "inactive"}
      ref={linkRef}
-      // Note do not use `onPointerDown` here as it makes the mobile sidebar unscrollable
-      onMouseDown={handleMouseDown}
+      onClick={handleClick}
      onKeyDown={handleKeyDown}
      aria-current={(isActive && ariaCurrent) || undefined}
      className={className}
@@ -1,53 +0,0 @@
-import { observer } from "mobx-react";
-import { useTranslation } from "react-i18next";
-import Icon from "@shared/components/Icon";
-import { NavigationNode } from "@shared/types";
-import useStores from "~/hooks/useStores";
-import { sharedModelPath } from "~/utils/routeHelpers";
-import { SharedDocumentLink } from "./SharedDocumentLink";
-import SidebarLink from "./SidebarLink";
-
-type Props = {
-  node: NavigationNode;
-  shareId: string;
-};
-
-function CollectionLink({ node, shareId }: Props) {
-  const { t } = useTranslation();
-  const { documents, ui } = useStores();
-
-  const icon = node.icon ?? node.emoji;
-
-  return (
-    <>
-      <SidebarLink
-        to={{
-          pathname: sharedModelPath(shareId),
-          state: {
-            title: node.title,
-          },
-        }}
-        icon={icon && <Icon value={icon} color={node.color} />}
-        label={node.title || t("Untitled")}
-        depth={0}
-        exact={false}
-        scrollIntoViewIfNeeded={true}
-        isActive={() => ui.activeCollectionId === node.id}
-      />
-      {node.children.map((childNode, index) => (
-        <SharedDocumentLink
-          key={childNode.id}
-          index={index}
-          depth={2}
-          shareId={shareId}
-          node={childNode}
-          prefetchDocument={documents.prefetchDocument}
-          activeDocumentId={ui.activeDocumentId}
-          activeDocument={documents.active}
-        />
-      ))}
-    </>
-  );
-}
-
-export const SharedCollectionLink = observer(CollectionLink);
@@ -7,7 +7,7 @@ import { NavigationNode } from "@shared/types";
 import Collection from "~/models/Collection";
 import Document from "~/models/Document";
 import useStores from "~/hooks/useStores";
-import { sharedModelPath } from "~/utils/routeHelpers";
+import { sharedDocumentPath } from "~/utils/routeHelpers";
 import { descendants } from "~/utils/tree";
 import SidebarLink from "./SidebarLink";

@@ -113,7 +113,7 @@ function DocumentLink(
    <>
      <SidebarLink
        to={{
-          pathname: sharedModelPath(shareId, node.url),
+          pathname: sharedDocumentPath(shareId, node.url),
          state: {
            title: node.title,
          },
@@ -132,7 +132,7 @@ function DocumentLink(
      />
      {expanded &&
        nodeChildren.map((childNode, index) => (
-          <SharedDocumentLink
+          <ObservedDocumentLink
            shareId={shareId}
            key={childNode.id}
            collection={collection}
@@ -150,4 +150,6 @@ function DocumentLink(
  );
 }

-export const SharedDocumentLink = observer(React.forwardRef(DocumentLink));
+const ObservedDocumentLink = observer(React.forwardRef(DocumentLink));
+
+export default ObservedDocumentLink;
@@ -18,17 +18,13 @@ import Header from "./Header";
 import PlaceholderCollections from "./PlaceholderCollections";
 import Relative from "./Relative";
 import SharedWithMeLink from "./SharedWithMeLink";
-import SidebarContext, { groupSidebarContext } from "./SidebarContext";
+import SidebarContext from "./SidebarContext";
 import SidebarLink from "./SidebarLink";
-import { useHistory } from "react-router-dom";
-import { useLocationSidebarContext } from "~/hooks/useLocationSidebarContext";

 function SharedWithMe() {
-  const { ui, userMemberships, groupMemberships } = useStores();
+  const { userMemberships, groupMemberships } = useStores();
  const { t } = useTranslation();
  const user = useCurrentUser();
-  const history = useHistory();
-  const locationSidebarContext = useLocationSidebarContext();

  usePaginatedRequest<GroupMembership>(groupMemberships.fetchAll);

@@ -48,54 +44,6 @@ function SharedWithMe() {
    }
  }, [error, t]);

-  useEffect(() => {
-    const isContextInSharedSection =
-      locationSidebarContext === "shared" ||
-      locationSidebarContext?.startsWith("group");
-
-    if (!ui.activeDocumentId || isContextInSharedSection) {
-      return;
-    }
-
-    const isActiveDocSharedDirectly = user.documentMemberships.find(
-      (m) => m.pathToDocument(ui.activeDocumentId!).length > 0
-    );
-
-    if (isActiveDocSharedDirectly) {
-      history.push({
-        ...history.location,
-        state: {
-          ...(history.location.state as Record<string, unknown>),
-          sidebarContext: "shared",
-        },
-      });
-
-      return;
-    }
-
-    const groupWithActiveDocument = user.groupsWithDocumentMemberships.find(
-      (group) =>
-        group.documentMemberships.some(
-          (m) => m.pathToDocument(ui.activeDocumentId!).length > 0
-        )
-    );
-
-    if (groupWithActiveDocument) {
-      history.push({
-        ...history.location,
-        state: {
-          ...(history.location.state as Record<string, unknown>),
-          sidebarContext: groupSidebarContext(groupWithActiveDocument.id),
-        },
-      });
-    }
-  }, [
-    ui.activeDocumentId,
-    locationSidebarContext,
-    user.documentMemberships,
-    user.groupsWithDocumentMemberships,
-  ]);
-
  if (
    !user.documentMemberships.length &&
    !user.groupsWithDocumentMemberships.length
@@ -40,20 +40,21 @@ function SharedWithMeLink({ membership, depth = 0 }: Props) {
  const sidebarContext = useSidebarContext();
  const document = documentId ? documents.get(documentId) : undefined;

-  const isActiveDocumentInPath = ui.activeDocumentId
-    ? membership.pathToDocument(ui.activeDocumentId).length > 0
-    : false;
-
  const [expanded, setExpanded, setCollapsed] = useBoolean(
-    isActiveDocumentInPath && locationSidebarContext === sidebarContext
+    membership.documentId === ui.activeDocumentId &&
+      locationSidebarContext === sidebarContext
  );

  React.useEffect(() => {
-    if (isActiveDocumentInPath && locationSidebarContext === sidebarContext) {
+    if (
+      membership.documentId === ui.activeDocumentId &&
+      locationSidebarContext === sidebarContext
+    ) {
      setExpanded();
    }
  }, [
-    isActiveDocumentInPath,
+    membership.documentId,
+    ui.activeDocumentId,
    sidebarContext,
    locationSidebarContext,
    setExpanded,
@@ -62,7 +63,6 @@ function SharedWithMeLink({ membership, depth = 0 }: Props) {
  React.useEffect(() => {
    if (documentId) {
      void documents.fetch(documentId);
-      void membership.fetchDocuments();
    }
  }, [documentId, documents]);

@@ -118,7 +118,9 @@ function SharedWithMeLink({ membership, depth = 0 }: Props) {
      ? collections.get(document.collectionId)
      : undefined;

-    const childDocuments = membership.documents ?? [];
+    const node = document.asNavigationNode;
+    const childDocuments = node.children;
+    const hasChildDocuments = childDocuments.length > 0;

    return (
      <>
@@ -137,9 +139,7 @@ function SharedWithMeLink({ membership, depth = 0 }: Props) {
                  state: { sidebarContext },
                }}
                expanded={
-                  childDocuments.length > 0 && !isDragging
-                    ? expanded
-                    : undefined
+                  hasChildDocuments && !isDragging ? expanded : undefined
                }
                onDisclosureClick={handleDisclosureClick}
                icon={icon}
@@ -180,9 +180,8 @@ function SharedWithMeLink({ membership, depth = 0 }: Props) {
              key={childNode.id}
              node={childNode}
              collection={collection}
-              membership={membership}
              activeDocument={documents.active}
-              isDraft={childNode.isDraft}
+              isDraft={node.isDraft}
              depth={2}
              index={index}
            />
@@ -1,8 +1,7 @@
 import { MoreIcon } from "outline-icons";
 import * as React from "react";
 import styled from "styled-components";
-import { extraArea, hover, s } from "@shared/styles";
-import { isMobile } from "@shared/utils/browser";
+import { extraArea, s } from "@shared/styles";
 import Flex from "~/components/Flex";
 import Text from "~/components/Text";
 import { draggableOnDesktop, undraggableOnDesktop } from "~/styles";
@@ -83,12 +82,12 @@ const Button = styled(Flex)<{
  flex: 1;
  color: ${s("textTertiary")};
  align-items: center;
-  padding: ${isMobile() ? 12 : 4}px 4px;
+  padding: 4px;
  font-size: 15px;
  font-weight: 500;
  border-radius: 4px;
  border: 0;
-  margin: ${(props) => (!isMobile() && props.$position === "top" ? 16 : 8)}px 0;
+  margin: ${(props) => (props.$position === "top" ? 16 : 8)}px 0;
  background: none;
  flex-shrink: 0;

@@ -103,7 +102,7 @@ const Button = styled(Flex)<{
  ${extraArea(4)}

  &:active,
-  &:${hover},
+  &:hover,
  &[aria-expanded="true"] {
    color: ${s("sidebarText")};
    background: ${s("sidebarActiveBackground")};
@@ -3,11 +3,10 @@ import * as React from "react";
 import styled, { useTheme, css } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import EventBoundary from "@shared/components/EventBoundary";
-import { s, truncateMultiline } from "@shared/styles";
-import { isMobile } from "@shared/utils/browser";
+import { s } from "@shared/styles";
 import NudeButton from "~/components/NudeButton";
 import { UnreadBadge } from "~/components/UnreadBadge";
-import useClickIntent from "~/hooks/useClickIntent";
+import useUnmount from "~/hooks/useUnmount";
 import { undraggableOnDesktop } from "~/styles";
 import Disclosure from "./Disclosure";
 import NavLink, { Props as NavLinkProps } from "./NavLink";
@@ -38,10 +37,6 @@ const activeDropStyle = {
  fontWeight: 600,
 };

-const preventDefault = (ev: React.MouseEvent) => {
-  ev.preventDefault();
-};
-
 function SidebarLink(
  {
    icon,
@@ -66,8 +61,8 @@ function SidebarLink(
  }: Props,
  ref: React.RefObject<HTMLAnchorElement>
 ) {
+  const timer = React.useRef<number>();
  const theme = useTheme();
-  const { handleMouseEnter, handleMouseLeave } = useClickIntent(onClickIntent);
  const style = React.useMemo(
    () => ({
      paddingLeft: `${(depth || 0) * 16 + 12}px`,
@@ -84,6 +79,28 @@ function SidebarLink(
    [theme.text, theme.sidebarActiveBackground, style]
  );

+  const handleMouseEnter = React.useCallback(() => {
+    if (timer.current) {
+      clearTimeout(timer.current);
+    }
+
+    if (onClickIntent) {
+      timer.current = window.setTimeout(onClickIntent, 100);
+    }
+  }, [onClickIntent]);
+
+  const handleMouseLeave = React.useCallback(() => {
+    if (timer.current) {
+      clearTimeout(timer.current);
+    }
+  }, []);
+
+  useUnmount(() => {
+    if (timer.current) {
+      clearTimeout(timer.current);
+    }
+  });
+
  return (
    <>
      <Link
@@ -108,8 +125,7 @@ function SidebarLink(
          {expanded !== undefined && (
            <Disclosure
              expanded={expanded}
-              onMouseDown={onDisclosureClick}
-              onClick={preventDefault}
+              onClick={onDisclosureClick}
              root={depth === 0}
              tabIndex={-1}
            />
@@ -180,7 +196,7 @@ const Link = styled(NavLink)<{
  position: relative;
  text-overflow: ellipsis;
  font-weight: 475;
-  padding: ${isMobile() ? 12 : 6}px 16px;
+  padding: 6px 16px;
  border-radius: 4px;
  min-height: 32px;
  user-select: none;
@@ -272,8 +288,8 @@ const Link = styled(NavLink)<{
 const Label = styled.div`
  position: relative;
  width: 100%;
+  max-height: 4.8em;
  line-height: 24px;
-  ${truncateMultiline(3)}

  * {
    unicode-bidi: plaintext;
@@ -383,7 +383,7 @@ const TD = styled.span`
    right: 0;
  }

-  ${NudeButton}[aria-haspopup="menu"] {
+  ${NudeButton} {
    &:hover,
    &[aria-expanded="true"] {
      background: ${s("sidebarControlHoverBackground")};
@@ -9,7 +9,7 @@ function Toasts() {

  return (
    <StyledToaster
-      theme={ui.resolvedTheme as unknown}
+      theme={ui.resolvedTheme as any}
      closeButton
      toastOptions={{
        duration: 5000,
@@ -285,8 +285,7 @@ class WebsocketProvider extends Component<Props> {
    this.socket.on(
      "documents.archive",
      action((event: PartialExcept<Document, "id">) => {
-        const model = documents.add(event);
-        documents.addToArchive(model);
+        documents.addToArchive(event as Document);

        if (event.collectionId) {
          const collection = collections.get(event.collectionId);
@@ -6,8 +6,6 @@ import { depths, s } from "@shared/styles";
 import Flex from "../Flex";
 import Text from "../Text";
 import { Overlay } from "./components/Overlay";
-import { m } from "framer-motion";
-import useMeasure from "react-use-measure";

 /** Root Drawer component - all the other components are rendered inside it. */
 const Drawer = (props: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
@@ -24,25 +22,15 @@ const DrawerContent = React.forwardRef<
  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
 >((props, ref) => {
  const { children, ...rest } = props;
-  const [measureRef, bounds] = useMeasure();

  return (
    <DrawerPrimitive.Portal>
      <DrawerPrimitive.Overlay asChild>
        <Overlay />
      </DrawerPrimitive.Overlay>
-      <DrawerPrimitive.Content ref={ref} asChild>
-        <StyledContent
-          animate={{
-            height: bounds.height,
-            transition: { bounce: 0, duration: 0.2 },
-          }}
-        >
-          <StyledInnerContent ref={measureRef} {...rest}>
-            {children}
-          </StyledInnerContent>
-        </StyledContent>
-      </DrawerPrimitive.Content>
+      <StyledContent ref={ref} {...rest}>
+        {children}
+      </StyledContent>
    </DrawerPrimitive.Portal>
  );
 });
@@ -76,7 +64,7 @@ const DrawerTitle = React.forwardRef<
 DrawerTitle.displayName = DrawerPrimitive.Title.displayName;

 /** Styled components. */
-const StyledContent = styled(m.div)`
+const StyledContent = styled(DrawerPrimitive.Content)`
  z-index: ${depths.menu};
  position: fixed;
  left: 0;
@@ -87,15 +75,12 @@ const StyledContent = styled(m.div)`
  min-height: 44px;
  max-height: 90vh;

+  padding: 6px;
  border-radius: 6px;

  background: ${s("menuBackground")};
 `;

-const StyledInnerContent = styled.div`
-  padding: 6px;
-`;
-
 const TitleWrapper = styled(Flex)`
  padding: 8px 0;
 `;
@@ -1,291 +0,0 @@
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { LocationDescriptor } from "history";
-import * as React from "react";
-import styled from "styled-components";
-import { depths, s } from "@shared/styles";
-import Scrollable from "~/components/Scrollable";
-import Tooltip from "~/components/Tooltip";
-import { fadeAndScaleIn } from "~/styles/animations";
-import {
-  MenuButton,
-  MenuDisclosure,
-  MenuExternalLink,
-  MenuHeader,
-  MenuInternalLink,
-  MenuLabel,
-  MenuSeparator,
-  MenuSubTrigger,
-  SelectedIconWrapper,
-} from "./components/Menu";
-import { CheckmarkIcon } from "outline-icons";
-
-const DropdownMenu = DropdownMenuPrimitive.Root;
-
-const DropdownSubMenu = DropdownMenuPrimitive.Sub;
-
-const DropdownMenuTrigger = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Trigger>
->((props, ref) => {
-  const { children, ...rest } = props;
-  return (
-    <DropdownMenuPrimitive.Trigger ref={ref} {...rest} asChild>
-      {children}
-    </DropdownMenuPrimitive.Trigger>
-  );
-});
-DropdownMenuTrigger.displayName = DropdownMenuPrimitive.Trigger.displayName;
-
-const DropdownMenuContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
->((props, ref) => {
-  const { children, ...rest } = props;
-
-  return (
-    <DropdownMenuPrimitive.Portal>
-      <DropdownMenuPrimitive.Content
-        ref={ref}
-        {...rest}
-        sideOffset={4}
-        collisionPadding={6}
-        asChild
-      >
-        <StyledScrollable hiddenScrollbars>{children}</StyledScrollable>
-      </DropdownMenuPrimitive.Content>
-    </DropdownMenuPrimitive.Portal>
-  );
-});
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-
-type DropdownSubMenuTriggerProps = BaseDropdownItemProps &
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger>;
-
-const DropdownSubMenuTrigger = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
-  DropdownSubMenuTriggerProps
->((props, ref) => {
-  const { label, icon, disabled, ...rest } = props;
-
-  return (
-    <DropdownMenuPrimitive.SubTrigger ref={ref} {...rest} asChild>
-      <MenuSubTrigger disabled={disabled}>
-        {icon}
-        <MenuLabel>{label}</MenuLabel>
-        <MenuDisclosure />
-      </MenuSubTrigger>
-    </DropdownMenuPrimitive.SubTrigger>
-  );
-});
-DropdownSubMenuTrigger.displayName =
-  DropdownMenuPrimitive.SubTrigger.displayName;
-
-const DropdownSubMenuContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
->((props, ref) => {
-  const { children, ...rest } = props;
-
-  return (
-    <DropdownMenuPrimitive.Portal>
-      <DropdownMenuPrimitive.SubContent
-        ref={ref}
-        {...rest}
-        collisionPadding={6}
-        asChild
-      >
-        <StyledScrollable hiddenScrollbars>{children}</StyledScrollable>
-      </DropdownMenuPrimitive.SubContent>
-    </DropdownMenuPrimitive.Portal>
-  );
-});
-DropdownSubMenuContent.displayName =
-  DropdownMenuPrimitive.SubContent.displayName;
-
-type DropdownMenuGroupProps = {
-  label: string;
-  items: React.ReactNode[];
-} & Omit<
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Group>,
-  "children" | "asChild"
->;
-
-const DropdownMenuGroup = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Group>,
-  DropdownMenuGroupProps
->((props, ref) => {
-  const { label, items, ...rest } = props;
-
-  return (
-    <DropdownMenuPrimitive.Group ref={ref} {...rest}>
-      <DropdownMenuLabel>{label}</DropdownMenuLabel>
-      {items}
-    </DropdownMenuPrimitive.Group>
-  );
-});
-DropdownMenuGroup.displayName = DropdownMenuPrimitive.Group.displayName;
-
-type BaseDropdownItemProps = {
-  label: string;
-  icon?: React.ReactElement;
-  disabled?: boolean;
-};
-
-type DropdownMenuButtonProps = BaseDropdownItemProps & {
-  onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
-  tooltip?: React.ReactChild;
-  selected?: boolean;
-  dangerous?: boolean;
-} & Omit<
-    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item>,
-    "children" | "asChild" | "onClick"
-  >;
-
-const DropdownMenuButton = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
-  DropdownMenuButtonProps
->((props, ref) => {
-  const {
-    label,
-    icon,
-    tooltip,
-    disabled,
-    selected,
-    dangerous,
-    onClick,
-    ...rest
-  } = props;
-
-  const button = (
-    <DropdownMenuPrimitive.Item ref={ref} disabled={disabled} {...rest} asChild>
-      <MenuButton disabled={disabled} $dangerous={dangerous} onClick={onClick}>
-        {icon}
-        <MenuLabel>{label}</MenuLabel>
-        {selected !== undefined && (
-          <SelectedIconWrapper aria-hidden>
-            {selected ? <CheckmarkIcon /> : null}
-          </SelectedIconWrapper>
-        )}
-      </MenuButton>
-    </DropdownMenuPrimitive.Item>
-  );
-
-  return tooltip ? (
-    <Tooltip content={tooltip} placement="bottom">
-      <div>{button}</div>
-    </Tooltip>
-  ) : (
-    <>{button}</>
-  );
-});
-DropdownMenuButton.displayName = "DropdownMenuButton";
-
-type DropdownMenuInternalLinkProps = BaseDropdownItemProps & {
-  to: LocationDescriptor;
-} & Omit<
-    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item>,
-    "children" | "asChild" | "onClick"
-  >;
-
-const DropdownMenuInternalLink = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
-  DropdownMenuInternalLinkProps
->((props, ref) => {
-  const { label, icon, disabled, to, ...rest } = props;
-
-  return (
-    <DropdownMenuPrimitive.Item ref={ref} disabled={disabled} {...rest} asChild>
-      <MenuInternalLink to={to} disabled={disabled}>
-        {icon}
-        <MenuLabel>{label}</MenuLabel>
-      </MenuInternalLink>
-    </DropdownMenuPrimitive.Item>
-  );
-});
-DropdownMenuInternalLink.displayName = "DropdownMenuInternalLink";
-
-type DropdownMenuExternalLinkProps = BaseDropdownItemProps & {
-  href: string;
-  target?: string;
-} & Omit<
-    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item>,
-    "children" | "asChild" | "onClick"
-  >;
-
-const DropdownMenuExternalLink = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
-  DropdownMenuExternalLinkProps
->((props, ref) => {
-  const { label, icon, disabled, href, target, ...rest } = props;
-
-  return (
-    <DropdownMenuPrimitive.Item ref={ref} disabled={disabled} {...rest} asChild>
-      <MenuExternalLink href={href} target={target} disabled={disabled}>
-        {icon}
-        <MenuLabel>{label}</MenuLabel>
-      </MenuExternalLink>
-    </DropdownMenuPrimitive.Item>
-  );
-});
-DropdownMenuExternalLink.displayName = "DropdownMenuExternalLink";
-
-const DropdownMenuSeparator = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
->((props, ref) => (
-  <DropdownMenuPrimitive.Separator ref={ref} {...props} asChild>
-    <MenuSeparator />
-  </DropdownMenuPrimitive.Separator>
-));
-DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
-
-const DropdownMenuLabel = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label>
->(({ className, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.Label ref={ref} {...props} asChild>
-    <MenuHeader>{children}</MenuHeader>
-  </DropdownMenuPrimitive.Label>
-));
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-
-/** Styled components */
-const StyledScrollable = styled(Scrollable)`
-  z-index: ${depths.menu};
-  min-width: 180px;
-  max-width: 276px;
-  min-height: 44px;
-  max-height: min(85vh, var(--radix-dropdown-menu-content-available-height));
-  font-weight: normal;
-
-  background: ${s("menuBackground")};
-  box-shadow: ${s("menuShadow")};
-  border-radius: 6px;
-  padding: 6px;
-  outline: none;
-
-  transform-origin: var(--radix-dropdown-menu-content-transform-origin);
-
-  &[data-state="open"] {
-    animation: ${fadeAndScaleIn} 150ms ease-out;
-  }
-
-  @media print {
-    display: none;
-  }
-`;
-
-export {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuButton,
-  DropdownMenuInternalLink,
-  DropdownMenuExternalLink,
-  DropdownMenuSeparator,
-  DropdownMenuGroup,
-  DropdownMenuLabel,
-  DropdownSubMenu,
-  DropdownSubMenuTrigger,
-  DropdownSubMenuContent,
-};
@@ -7,8 +7,6 @@ import { fadeAndScaleIn } from "~/styles/animations";

 const Popover = PopoverPrimitive.Root;

-const PopoverAnchor = PopoverPrimitive.Anchor;
-
 const PopoverTrigger = React.forwardRef<
  React.ElementRef<typeof PopoverPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Trigger>
@@ -118,4 +116,4 @@ const StyledContent = styled(PopoverPrimitive.Content)<StyledContentProps>`
  }
 `;

-export { Popover, PopoverAnchor, PopoverTrigger, PopoverContent };
+export { Popover, PopoverTrigger, PopoverContent };
@@ -1,137 +0,0 @@
-import { ExpandedIcon } from "outline-icons";
-import { ellipsis } from "polished";
-import { Link } from "react-router-dom";
-import styled, { css } from "styled-components";
-import breakpoint from "styled-components-breakpoint";
-import { s } from "@shared/styles";
-
-type BaseMenuItemProps = {
-  disabled?: boolean;
-  $dangerous?: boolean;
-};
-
-const BaseMenuItemCSS = css<BaseMenuItemProps>`
-  position: relative;
-  display: flex;
-  justify-content: left;
-  align-items: center;
-  width: 100%;
-  min-height: 32px;
-  font-size: 16px;
-  cursor: var(--pointer);
-  user-select: none;
-  white-space: nowrap;
-
-  background: none;
-  color: ${(props) =>
-    props.disabled ? props.theme.textTertiary : props.theme.textSecondary};
-
-  margin: 0;
-  border: 0;
-  border-radius: 4px;
-  padding: 12px;
-
-  ${(props) => props.disabled && "pointer-events: none;"}
-
-  svg {
-    flex-shrink: 0;
-    opacity: ${(props) => (props.disabled ? ".5" : 1)};
-  }
-
-  &:focus-visible {
-    outline: 0; // Disable default outline on Firefox
-  }
-
-  ${(props) =>
-    !props.disabled &&
-    `
-    @media (hover: hover) {
-        &:hover,
-        &:focus,
-        &:focus-visible {
-          color: ${props.theme.accentText};
-          background: ${props.$dangerous ? props.theme.danger : props.theme.accent};
-          outline-color: ${
-            props.$dangerous ? props.theme.danger : props.theme.accent
-          };
-          box-shadow: none;
-          cursor: var(--pointer);
-    
-          svg {
-            color: ${props.theme.accentText};
-            fill: ${props.theme.accentText};
-          }
-        }
-      }
-  `}
-
-  ${breakpoint("tablet")`
-    padding: 4px 12px;
-    font-size: 14px;
-  `}
-`;
-
-type MenuButtonProps = BaseMenuItemProps & {
-  $dangerous?: boolean;
-};
-
-export const MenuButton = styled.button<MenuButtonProps>`
-  ${BaseMenuItemCSS}
-`;
-
-export const MenuInternalLink = styled(Link)`
-  ${BaseMenuItemCSS}
-`;
-
-export const MenuExternalLink = styled.a`
-  ${BaseMenuItemCSS}
-`;
-
-export const MenuSubTrigger = styled.div<BaseMenuItemProps>`
-  ${BaseMenuItemCSS}
-`;
-
-export const MenuSeparator = styled.hr`
-  margin: 6px 0;
-`;
-
-export const MenuLabel = styled.div`
-  ${ellipsis()}
-  flex-grow: 1;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-`;
-
-export const MenuHeader = styled.h3`
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  color: ${s("sidebarText")};
-  letter-spacing: 0.04em;
-  margin: 1em 12px 0.5em;
-`;
-
-export const MenuDisclosure = styled(ExpandedIcon)`
-  transform: rotate(270deg);
-  position: absolute;
-  right: 8px;
-  color: ${s("textTertiary")};
-`;
-
-export const MenuIconWrapper = styled.span`
-  width: 24px;
-  height: 24px;
-  margin-right: 6px;
-  margin-left: -4px;
-  color: ${s("textSecondary")};
-  flex-shrink: 0;
-`;
-
-export const SelectedIconWrapper = styled.span`
-  width: 24px;
-  height: 24px;
-  margin-right: -6px;
-  color: ${s("textSecondary")};
-  flex-shrink: 0;
-`;
--- a/Show More
+++ b/Show More