chore: Upgrade to rolldown-vite 7.0.11

Related #9720

.babelrc

@@ -21,10 +21,7 @@
     [
       "transform-inline-environment-variables",
       {
-        "include": [
-          "SOURCE_COMMIT",
-          "SOURCE_VERSION"
-        ]
+        "include": ["SOURCE_COMMIT", "SOURCE_VERSION"]
       }
     ],
     "tsconfig-paths-module-resolver"
@@ -39,16 +36,10 @@
           }
         ]
       ],
-      "ignore": [
-        "**/__mocks__",
-        "**/*.test.ts"
-      ]
+      "ignore": ["**/__mocks__", "**/*.test.ts"]
     },
     "development": {
-      "ignore": [
-        "**/__mocks__",
-        "**/*.test.ts"
-      ]
+      "ignore": ["**/__mocks__", "**/*.test.ts"]
     },
     "test": {
       "presets": [
@@ -65,4 +56,4 @@
       ]
     }
   }
-}
+}

.env.sample

@@ -202,6 +202,7 @@ RATE_LIMITER_DURATION_WINDOW=60
 # DOCS: https://docs.getoutline.com/s/hosting/doc/github-GchT3NNxI9
 GITHUB_CLIENT_ID=
 GITHUB_CLIENT_SECRET=
+GITHUB_WEBHOOK_SECRET=
 GITHUB_APP_NAME=
 GITHUB_APP_ID=
 GITHUB_APP_PRIVATE_KEY=

.eslintignore

@@ -1 +0,0 @@
-server/migrations/*.js

.eslintrc

@@ -1,190 +0,0 @@
-{
-  "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",
-    "plugin:prettier/recommended"
-  ],
-  "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"
-          }
-        ]
-      }
-    ],
-    "prettier/prettier": [
-      "error",
-      {
-        "printWidth": 80,
-        "trailingComma": "es5"
-      }
-    ]
-  },
-  "settings": {
-    "react": {
-      "createClass": "createReactClass",
-      "pragma": "React",
-      "version": "detect"
-    },
-    "import/parsers": {
-      "@typescript-eslint/parser": [
-        ".ts",
-        ".tsx"
-      ]
-    },
-    "import/resolver": {
-      "typescript": {}
-    }
-  }
-}

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -2,62 +2,62 @@ name: Bug report
 description: File a bug to help us improve
 labels: ["bug"]
 body:
-- type: checkboxes
-  attributes:
-    label: Is there an existing issue for this?
-    description: Please search to see if an issue already exists for the bug you encountered.
-    options:
-    - label: I have searched the existing issues
-      required: true
-- type: checkboxes
-  attributes:
-    label: This is not related to configuring Outline
-    description: I understand that questions related to configuring self-hosted Outline should be asked in the [community forum](https://github.com/outline/outline/discussions/categories/self-hosting).
-    options:
-    - label: The issue is not related to self-hosting config
-      required: true
-- type: textarea
-  attributes:
-    label: Current Behavior
-    description: A concise description of what you're experiencing.
-  validations:
-    required: false
-- type: textarea
-  attributes:
-    label: Expected Behavior
-    description: A concise description of what you expected to happen.
-  validations:
-    required: false
-- type: textarea
-  attributes:
-    label: Steps To Reproduce
-    description: Steps to reproduce the behavior.
-    placeholder: |
-      1. In this environment...
-      1. With this config...
-      1. Run '...'
-      1. See error...
-  validations:
-    required: false
-- type: textarea
-  attributes:
-    label: Environment
-    description: |
-      examples:
-        - **Outline**: Outline 0.80.0
-        - **Browser**: Safari
-    value: |
+  - type: checkboxes
+    attributes:
+      label: Is there an existing issue for this?
+      description: Please search to see if an issue already exists for the bug you encountered.
+      options:
+        - label: I have searched the existing issues
+          required: true
+  - type: checkboxes
+    attributes:
+      label: This is not related to configuring Outline
+      description: I understand that questions related to configuring self-hosted Outline should be asked in the [community forum](https://github.com/outline/outline/discussions/categories/self-hosting).
+      options:
+        - label: The issue is not related to self-hosting config
+          required: true
+  - type: textarea
+    attributes:
+      label: Current Behavior
+      description: A concise description of what you're experiencing.
+    validations:
+      required: false
+  - type: textarea
+    attributes:
+      label: Expected Behavior
+      description: A concise description of what you expected to happen.
+    validations:
+      required: false
+  - type: textarea
+    attributes:
+      label: Steps To Reproduce
+      description: Steps to reproduce the behavior.
+      placeholder: |
+        1. In this environment...
+        1. With this config...
+        1. Run '...'
+        1. See error...
+    validations:
+      required: false
+  - type: textarea
+    attributes:
+      label: Environment
+      description: |
+        examples:
+          - **Outline**: Outline 0.80.0
+          - **Browser**: Safari
+      value: |
         - Outline:
         - Browser:
-    render: markdown
-  validations:
-    required: false
-- type: textarea
-  attributes:
-    label: Anything else?
-    description: |
-      Links? References? Anything that will give us more context about the issue you are encountering!
+      render: markdown
+    validations:
+      required: false
+  - type: textarea
+    attributes:
+      label: Anything else?
+      description: |
+        Links? References? Anything that will give us more context about the issue you are encountering!
 
-      Tip: You can attach images or log files by clicking this area to highlight it and then dragging files in.
-  validations:
-    required: false
+        Tip: You can attach images or log files by clicking this area to highlight it and then dragging files in.
+    validations:
+      required: false

.github/auto_assign.yml

@@ -2,9 +2,9 @@
 addReviewers: true
 
 # A list of reviewers to be added to pull requests (GitHub user name)
-reviewers: 
+reviewers:
   - tommoor
 
-# A list of keywords to be skipped the process that add reviewers if pull requests include it 
+# A list of keywords to be skipped the process that add reviewers if pull requests include it
 skipKeywords:
   - wip

.github/workflows/auto_close_prs.yml

@@ -2,7 +2,7 @@ name: Auto Close Unsigned PRs
 
 on:
   schedule:
-    - cron: '0 0 * * *'  # Run daily at midnight UTC
+    - cron: "0 0 * * *" # Run daily at midnight UTC
 
 jobs:
   close-unsigned-prs:

.github/workflows/ci.yml

@@ -2,9 +2,9 @@ name: CI
 
 on:
   push:
-    branches: [ main ]
+    branches: [main]
   pull_request:
-    branches: [ main ]
+    branches: [main]
 
 env:
   NODE_ENV: test
@@ -22,7 +22,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [20.x]
+        node-version: [20.x, 22.x]
 
     steps:
     - uses: actions/checkout@v4
@@ -31,37 +31,38 @@ jobs:
       with:
         node-version: ${{ matrix.node-version }}
         cache: 'yarn'
-    
+
     - name: Install dependencies
-      run: yarn install --frozen-lockfile
+      run: yarn install --frozen-lockfile --prefer-offline
 
   lint:
     needs: build
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
-    - uses: actions/setup-node@v4
-      with:
-        node-version: 20.x
-        cache: 'yarn'
-    - run: yarn install --frozen-lockfile
-    - run: yarn lint
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22.x
+          cache: "yarn"
+      - run: yarn install --frozen-lockfile --prefer-offline
+      - run: yarn lint
 
   types:
     needs: build
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
-    - uses: actions/setup-node@v4
-      with:
-        node-version: 20.x
-        cache: 'yarn'
-    - run: yarn install --frozen-lockfile
-    - run: yarn tsc
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22.x
+          cache: "yarn"
+      - run: yarn install --frozen-lockfile --prefer-offline
+      - 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,6 +71,9 @@ jobs:
         id: filter
         with:
           filters: |
+            config:
+              - '.github/**'
+              - 'vite.config.ts'
             server:
               - 'server/**'
               - 'shared/**'
@@ -83,23 +87,23 @@ jobs:
 
   test:
     needs: [build, changes]
-    if: ${{ needs.changes.outputs.app == 'true' }}
+    if: ${{ needs.changes.outputs.app == 'true' || needs.changes.outputs.config == 'true' }}
     runs-on: ubuntu-latest
     strategy:
       matrix:
         test-group: [app, shared]
     steps:
-    - uses: actions/checkout@v4
-    - uses: actions/setup-node@v4
-      with:
-        node-version: 20.x
-        cache: 'yarn'
-    - run: yarn install --frozen-lockfile
-    - run: yarn test:${{ matrix.test-group }}
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22.x
+          cache: "yarn"
+      - run: yarn install --frozen-lockfile --prefer-offline
+      - run: yarn test:${{ matrix.test-group }}
 
   test-server:
     needs: [build, changes]
-    if: ${{ needs.changes.outputs.server == 'true' }}
+    if: ${{ needs.changes.outputs.server == 'true' || needs.changes.outputs.config == 'true' }}
     runs-on: ubuntu-latest
     services:
       postgres:
@@ -115,51 +119,41 @@ jobs:
           --health-interval 10s
           --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]
-    
+        shard: [1, 2, 3, 4]
+
     steps:
-    - uses: actions/checkout@v4
-    - uses: actions/setup-node@v4
-      with:
-        node-version: 20.x
-        cache: 'yarn'
-    - run: yarn install --frozen-lockfile
-    - run: yarn sequelize db:migrate
-    - name: Run server tests
-      run: |
-        TESTFILES=$(find . -name "*.test.ts" -path "*/server/*" | sort | split -n -d -l $(($(find . -name "*.test.ts" -path "*/server/*" | wc -l)/${{ matrix.shard }})) - | sed -n "${{ matrix.shard }}p")
-        yarn test --maxWorkers=2 $TESTFILES
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22.x
+          cache: "yarn"
+      - run: yarn install --frozen-lockfile --prefer-offline
+      - run: yarn sequelize db:migrate
+      - name: Run server tests
+        run: |
+          TESTFILES=$(find . -name "*.test.ts" -path "*/server/*" | sort | split -n -d -l $(($(find . -name "*.test.ts" -path "*/server/*" | wc -l)/${{ matrix.shard }})) - | sed -n "${{ matrix.shard }}p")
+          yarn test --maxWorkers=2 $TESTFILES
 
   bundle-size:
     needs: [build, types, changes]
     if: ${{ needs.changes.outputs.app == 'true' && github.repository == 'outline/outline' }}
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
-    - uses: actions/setup-node@v4
-      with:
-        node-version: 20.x
-        cache: 'yarn'
-    - run: yarn install --frozen-lockfile
-    - name: Set environment to production
-      run: echo "NODE_ENV=production" >> $GITHUB_ENV
-    - run: yarn vite:build
-    - name: Send bundle stats to RelativeCI
-      uses: relative-ci/agent-action@v2
-      with:
-        key: ${{ secrets.RELATIVE_CI_KEY }}
-        token: ${{ secrets.GITHUB_TOKEN }}
-        webpackStatsFile: ./build/app/webpack-stats.json
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22.x
+          cache: "yarn"
+      - run: yarn install --frozen-lockfile --prefer-offline
+      - name: Set environment to production
+        run: echo "NODE_ENV=production" >> $GITHUB_ENV
+      - run: yarn vite:build
+      - name: Send bundle stats to RelativeCI
+        uses: relative-ci/agent-action@v2
+        with:
+          key: ${{ secrets.RELATIVE_CI_KEY }}
+          token: ${{ secrets.GITHUB_TOKEN }}
+          webpackStatsFile: ./build/app/webpack-stats.json

.github/workflows/codeql-analysis.yml

@@ -13,12 +13,12 @@ name: "CodeQL"
 
 on:
   push:
-    branches: [ main ]
+    branches: [main]
   pull_request:
     # The branches below must be a subset of the branches above
-    branches: [ main ]
+    branches: [main]
   schedule:
-    - cron: '28 15 * * 2'
+    - cron: "28 15 * * 2"
 
 jobs:
   analyze:
@@ -32,39 +32,39 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        language: [ 'javascript' ]
+        language: ["javascript"]
         # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
         # Learn more about CodeQL language support at https://git.io/codeql-language-support
 
     steps:
-    - name: Checkout repository
-      uses: actions/checkout@v2
+      - name: Checkout repository
+        uses: actions/checkout@v2
 
-    # Initializes the CodeQL tools for scanning.
-    - name: Initialize CodeQL
-      uses: github/codeql-action/init@v2
-      with:
-        languages: ${{ matrix.language }}
-        # If you wish to specify custom queries, you can do so here or in a config file.
-        # By default, queries listed here will override any specified in a config file.
-        # Prefix the list here with "+" to use these queries and those in the config file.
-        # queries: ./path/to/local/query, your-org/your-repo/queries@main
+      # Initializes the CodeQL tools for scanning.
+      - name: Initialize CodeQL
+        uses: github/codeql-action/init@v2
+        with:
+          languages: ${{ matrix.language }}
+          # If you wish to specify custom queries, you can do so here or in a config file.
+          # By default, queries listed here will override any specified in a config file.
+          # Prefix the list here with "+" to use these queries and those in the config file.
+          # queries: ./path/to/local/query, your-org/your-repo/queries@main
 
-    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
-    # If this step fails, then you should remove it and run the build manually (see below)
-    - name: Autobuild
-      uses: github/codeql-action/autobuild@v2
+      # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
+      # If this step fails, then you should remove it and run the build manually (see below)
+      - name: Autobuild
+        uses: github/codeql-action/autobuild@v2
 
-    # ℹ️ Command-line programs to run using the OS shell.
-    # 📚 https://git.io/JvXDl
+      # ℹ️ Command-line programs to run using the OS shell.
+      # 📚 https://git.io/JvXDl
 
-    # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
-    #    and modify them (or add more) to build your code if your project
-    #    uses a compiled language
+      # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
+      #    and modify them (or add more) to build your code if your project
+      #    uses a compiled language
 
-    #- run: |
-    #   make bootstrap
-    #   make release
+      #- run: |
+      #   make bootstrap
+      #   make release
 
-    - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v2
+      - name: Perform CodeQL Analysis
+        uses: github/codeql-action/analyze@v2

.github/workflows/docker.yml

@@ -209,4 +209,4 @@ jobs:
 
       - name: Inspect image
         run: |
-          docker buildx imagetools inspect ${{ env.IMAGE_NAME }}:${{ steps.meta.outputs.version }}
+          docker buildx imagetools inspect ${{ env.IMAGE_NAME }}:${{ steps.meta.outputs.version }}

.github/workflows/lint.yml

@@ -2,7 +2,7 @@ name: Lint
 
 on:
   pull_request:
-    branches: [ main ]
+    branches: [main]
 
 jobs:
   run-linters:
@@ -20,11 +20,11 @@ jobs:
       - uses: actions/setup-node@v4
         with:
           node-version: 20.x
-          cache: 'yarn'
-      - run: yarn install --frozen-lockfile
+          cache: "yarn"
+      - run: yarn install --frozen-lockfile --prefer-offline
       - run: yarn lint --fix
 
       - name: Commit changes
         uses: stefanzweifel/git-auto-commit-action@v5
         with:
-          commit_message: 'Applied automatic fixes'
+          commit_message: "Applied automatic fixes"

.nvmrc

@@ -0,0 +1 @@
+22

.oxlintrc.json

@@ -0,0 +1,131 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": ["eslint", "typescript"],
+  "env": {
+    "builtin": true
+  },
+  "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-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": {
+        "no-restricted-imports": [
+          "error",
+          {
+            "paths": [
+              {
+                "name": "reakit/Menu",
+                "importNames": [
+                  "useMenuState"
+                ],
+                "message": "Do not use useMenuState from reakit/Menu. Use useMenuState instead."
+              }
+            ]
+          }
+        ],
+        "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",
+        "@typescript-eslint/no-explicit-any": "off",
+        "import/no-named-as-default": "off",
+        "import/no-named-as-default-member": "off",
+        "no-unused-vars": [
+          "warn",
+          {
+            "argsIgnorePattern": "^_",
+            "caughtErrorsIgnorePattern": "^_",
+            "args": "after-used",
+            "ignoreRestSiblings": true
+          }
+        ]
+      },
+      "plugins": [
+        "eslint",
+        "oxc",
+        "react",
+        "typescript",
+        "import"
+      ]
+    }
+  ]
+}

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "printWidth": 80,
+  "trailingComma": "es5"
+}

Dockerfile

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

LICENSE

@@ -3,7 +3,7 @@ Business Source License 1.1
 Parameters
 
 Licensor:             General Outline, Inc.
-Licensed Work:        Outline 0.84.0
+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-05-11
+Change Date:          2029-07-03
 
 Change License:       Apache License, Version 2.0
 

Makefile

@@ -8,7 +8,7 @@ build:
 	docker compose build --pull outline
 
 test:
-	docker compose up -d redis postgres
+	docker compose up -d postgres
 	NODE_ENV=test yarn sequelize db:drop
 	NODE_ENV=test yarn sequelize db:create
 	NODE_ENV=test yarn sequelize db:migrate

__mocks__/fileMock.js

@@ -1 +1 @@
-export default '';
+export default "";

__mocks__/localStorage.js

@@ -1,19 +1,19 @@
 const storage = {};
 
 export default {
-  setItem: function(key, value) {
-    storage[key] = value || '';
+  setItem: function (key, value) {
+    storage[key] = value || "";
   },
-  getItem: function(key) {
+  getItem: function (key) {
     return key in storage ? storage[key] : null;
   },
-  removeItem: function(key) {
+  removeItem: function (key) {
     delete storage[key];
   },
   get length() {
     return Object.keys(storage).length;
   },
-  key: function(i) {
+  key: function (i) {
     var keys = Object.keys(storage);
     return keys[i] || null;
   },

app.json

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

app/actions/definitions/apiKeys.tsx

@@ -1,7 +1,9 @@
-import { PlusIcon } from "outline-icons";
+import { PlusIcon, TrashIcon } from "outline-icons";
 import stores from "~/stores";
+import ApiKey from "~/models/ApiKey";
 import ApiKeyNew from "~/scenes/ApiKeyNew";
-import { createAction } from "..";
+import ApiKeyRevokeDialog from "~/scenes/Settings/components/ApiKeyRevokeDialog";
+import { createAction, createActionV2 } from "..";
 import { SettingsSection } from "../sections";
 
 export const createApiKey = createAction({
@@ -22,3 +24,28 @@ export const createApiKey = createAction({
     });
   },
 });
+
+export const revokeApiKeyFactory = ({ apiKey }: { apiKey: ApiKey }) =>
+  createActionV2({
+    name: ({ t, isContextMenu }) =>
+      isContextMenu ? t("Revoke") : t("Revoke API key"),
+    analyticsName: "Revoke API key",
+    section: SettingsSection,
+    icon: <TrashIcon />,
+    keywords: "revoke",
+    dangerous: true,
+    perform: ({ t, event }) => {
+      event?.preventDefault();
+      event?.stopPropagation();
+
+      stores.dialogs.openModal({
+        title: t("Revoke token"),
+        content: (
+          <ApiKeyRevokeDialog
+            onSubmit={stores.dialogs.closeAllModals}
+            apiKey={apiKey}
+          />
+        ),
+      });
+    },
+  });

app/actions/definitions/collections.tsx

@@ -47,7 +47,7 @@ export const openCollection = createAction({
       name: collection.name,
       icon: <ColorCollectionIcon collection={collection} />,
       section: CollectionSection,
-      perform: () => history.push(collection.path),
+      to: collection.path,
     }));
   },
 });

app/actions/definitions/documents.tsx

@@ -1,5 +1,6 @@
 import copy from "copy-to-clipboard";
 import invariant from "invariant";
+import uniqBy from "lodash/uniqBy";
 import {
   DownloadIcon,
   DuplicateIcon,
@@ -84,8 +85,9 @@ export const openDocument = createAction({
       (acc, node) => [...acc, ...node.children],
       [] as NavigationNode[]
     );
+    const documents = stores.documents.orderedData;
 
-    return nodes.map((item) => ({
+    return uniqBy([...documents, ...nodes], "id").map((item) => ({
       // Note: using url which includes the slug rather than id here to bust
       // cache if the document is renamed
       id: item.url,
@@ -96,7 +98,7 @@ export const openDocument = createAction({
         <DocumentIcon />
       ),
       section: DocumentSection,
-      perform: () => history.push(item.url),
+      to: item.url,
     }));
   },
 });
@@ -838,7 +840,7 @@ export const searchDocumentsForQuery = (query: string) =>
     analyticsName: "Search documents",
     section: DocumentSection,
     icon: <SearchIcon />,
-    perform: () => history.push(searchPath({ query })),
+    to: searchPath({ query }),
     visible: ({ location }) => location.pathname !== searchPath(),
   });
 
@@ -1081,17 +1083,13 @@ export const openDocumentComments = createAction({
   analyticsName: "Open comments",
   section: ActiveDocumentSection,
   icon: <CommentIcon />,
-  visible: ({ activeCollectionId, activeDocumentId, stores }) => {
+  visible: ({ activeDocumentId, stores }) => {
     const can = stores.policies.abilities(activeDocumentId ?? "");
-    const collection = activeCollectionId
-      ? stores.collections.get(activeCollectionId)
-      : undefined;
 
     return (
       !!activeDocumentId &&
       can.comment &&
-      (collection?.canCreateComment ??
-        !!stores.auth.team?.getPreference(TeamPreference.Commenting))
+      !!stores.auth.team?.getPreference(TeamPreference.Commenting)
     );
   },
   perform: ({ activeDocumentId, stores }) => {

app/actions/definitions/navigation.tsx

@@ -20,9 +20,7 @@ import SearchQuery from "~/models/SearchQuery";
 import KeyboardShortcuts from "~/scenes/KeyboardShortcuts";
 import { createAction } from "~/actions";
 import { NavigationSection, RecentSearchesSection } from "~/actions/sections";
-import env from "~/env";
 import Desktop from "~/utils/Desktop";
-import history from "~/utils/history";
 import isCloudHosted from "~/utils/isCloudHosted";
 import {
   homePath,
@@ -39,7 +37,7 @@ export const navigateToHome = createAction({
   section: NavigationSection,
   shortcut: ["d"],
   icon: <HomeIcon />,
-  perform: () => history.push(homePath()),
+  to: homePath(),
   visible: ({ location }) => location.pathname !== homePath(),
 });
 
@@ -49,7 +47,7 @@ export const navigateToRecentSearchQuery = (searchQuery: SearchQuery) =>
     name: searchQuery.query,
     analyticsName: "Navigate to recent search query",
     icon: <SearchIcon />,
-    perform: () => history.push(searchPath({ query: searchQuery.query })),
+    to: searchPath({ query: searchQuery.query }),
   });
 
 export const navigateToDrafts = createAction({
@@ -57,7 +55,7 @@ export const navigateToDrafts = createAction({
   analyticsName: "Navigate to drafts",
   section: NavigationSection,
   icon: <DraftsIcon />,
-  perform: () => history.push(draftsPath()),
+  to: draftsPath(),
   visible: ({ location }) => location.pathname !== draftsPath(),
 });
 
@@ -66,7 +64,7 @@ export const navigateToSearch = createAction({
   analyticsName: "Navigate to search",
   section: NavigationSection,
   icon: <SearchIcon />,
-  perform: () => history.push(searchPath()),
+  to: searchPath(),
   visible: ({ location }) => location.pathname !== searchPath(),
 });
 
@@ -76,7 +74,7 @@ export const navigateToArchive = createAction({
   section: NavigationSection,
   shortcut: ["g", "a"],
   icon: <ArchiveIcon />,
-  perform: () => history.push(archivePath()),
+  to: archivePath(),
   visible: ({ location }) => location.pathname !== archivePath(),
 });
 
@@ -85,7 +83,7 @@ export const navigateToTrash = createAction({
   analyticsName: "Navigate to trash",
   section: NavigationSection,
   icon: <TrashIcon />,
-  perform: () => history.push(trashPath()),
+  to: trashPath(),
   visible: ({ location }) => location.pathname !== trashPath(),
 });
 
@@ -96,7 +94,7 @@ export const navigateToSettings = createAction({
   shortcut: ["g", "s"],
   icon: <SettingsIcon />,
   visible: () => stores.policies.abilities(stores.auth.team?.id || "").update,
-  perform: () => history.push(settingsPath()),
+  to: settingsPath(),
 });
 
 export const navigateToWorkspaceSettings = createAction({
@@ -105,7 +103,7 @@ export const navigateToWorkspaceSettings = createAction({
   section: NavigationSection,
   icon: <SettingsIcon />,
   visible: () => stores.policies.abilities(stores.auth.team?.id || "").update,
-  perform: () => history.push(settingsPath("details")),
+  to: settingsPath("details"),
 });
 
 export const navigateToProfileSettings = createAction({
@@ -114,7 +112,7 @@ export const navigateToProfileSettings = createAction({
   section: NavigationSection,
   iconInContextMenu: false,
   icon: <ProfileIcon />,
-  perform: () => history.push(settingsPath()),
+  to: settingsPath(),
 });
 
 export const navigateToTemplateSettings = createAction({
@@ -123,7 +121,7 @@ export const navigateToTemplateSettings = createAction({
   section: NavigationSection,
   iconInContextMenu: false,
   icon: <ShapesIcon />,
-  perform: () => history.push(settingsPath("templates")),
+  to: settingsPath("templates"),
 });
 
 export const navigateToNotificationSettings = createAction({
@@ -132,7 +130,7 @@ export const navigateToNotificationSettings = createAction({
   section: NavigationSection,
   iconInContextMenu: false,
   icon: <EmailIcon />,
-  perform: () => history.push(settingsPath("notifications")),
+  to: settingsPath("notifications"),
 });
 
 export const navigateToAccountPreferences = createAction({
@@ -141,7 +139,7 @@ export const navigateToAccountPreferences = createAction({
   section: NavigationSection,
   iconInContextMenu: false,
   icon: <SettingsIcon />,
-  perform: () => history.push(settingsPath("preferences")),
+  to: settingsPath("preferences"),
 });
 
 export const openDocumentation = createAction({
@@ -150,7 +148,10 @@ export const openDocumentation = createAction({
   section: NavigationSection,
   iconInContextMenu: false,
   icon: <OpenIcon />,
-  perform: () => window.open(UrlHelper.guide),
+  to: {
+    url: UrlHelper.guide,
+    target: "_blank",
+  },
 });
 
 export const openAPIDocumentation = createAction({
@@ -159,7 +160,10 @@ export const openAPIDocumentation = createAction({
   section: NavigationSection,
   iconInContextMenu: false,
   icon: <OpenIcon />,
-  perform: () => window.open(UrlHelper.developers),
+  to: {
+    url: UrlHelper.developers,
+    target: "_blank",
+  },
 });
 
 export const toggleSidebar = createAction({
@@ -176,14 +180,20 @@ export const openFeedbackUrl = createAction({
   section: NavigationSection,
   iconInContextMenu: false,
   icon: <EmailIcon />,
-  perform: () => window.open(UrlHelper.contact),
+  to: {
+    url: UrlHelper.contact,
+    target: "_blank",
+  },
 });
 
 export const openBugReportUrl = createAction({
   name: ({ t }) => t("Report a bug"),
   analyticsName: "Open bug report",
   section: NavigationSection,
-  perform: () => window.open(UrlHelper.github),
+  to: {
+    url: UrlHelper.github,
+    target: "_blank",
+  },
 });
 
 export const openChangelog = createAction({
@@ -192,7 +202,10 @@ export const openChangelog = createAction({
   section: NavigationSection,
   iconInContextMenu: false,
   icon: <OpenIcon />,
-  perform: () => window.open(UrlHelper.changelog),
+  to: {
+    url: UrlHelper.changelog,
+    target: "_blank",
+  },
 });
 
 export const openKeyboardShortcuts = createAction({
@@ -220,8 +233,9 @@ export const downloadApp = createAction({
   iconInContextMenu: false,
   icon: <BrowserIcon />,
   visible: () => !Desktop.isElectron() && isMac() && isCloudHosted,
-  perform: () => {
-    window.open("https://desktop.getoutline.com");
+  to: {
+    url: "https://desktop.getoutline.com",
+    target: "_blank",
   },
 });
 
@@ -231,12 +245,7 @@ export const logout = createAction({
   section: NavigationSection,
   icon: <LogoutIcon />,
   perform: async () => {
-    await stores.auth.logout();
-    if (env.OIDC_LOGOUT_URI) {
-      setTimeout(() => {
-        window.location.replace(env.OIDC_LOGOUT_URI);
-      }, 200);
-    }
+    await stores.auth.logout({ userInitiated: true });
   },
 });
 

app/actions/definitions/teams.tsx

@@ -32,7 +32,10 @@ export const switchTeamsList = ({ stores }: { stores: RootStore }) =>
       );
     },
     visible: ({ currentTeamId }: ActionContext) => currentTeamId !== session.id,
-    perform: () => (window.location.href = session.url),
+    to: {
+      url: session.url,
+      target: "_self",
+    },
   })) ?? [];
 
 export const switchTeam = createAction({
@@ -62,7 +65,6 @@ export const createTeam = createAction({
     if (user) {
       stores.dialogs.openModal({
         title: t("Create a workspace"),
-        fullscreen: true,
         content: <TeamNew user={user} />,
       });
     }

app/actions/definitions/users.tsx

@@ -45,8 +45,8 @@ export const updateUserRoleActionFactory = (user: User, role: UserRole) =>
       return UserRoleHelper.isRoleHigher(role, user.role)
         ? can.promote
         : UserRoleHelper.isRoleLower(role, user.role)
-        ? can.demote
-        : false;
+          ? can.demote
+          : false;
     },
     perform: ({ t }) => {
       stores.dialogs.openModal({

app/actions/index.ts

@@ -5,11 +5,22 @@ import { v4 as uuidv4 } from "uuid";
 import {
   Action,
   ActionContext,
+  ActionV2,
+  ActionV2Group,
+  ActionV2Separator as TActionV2Separator,
+  ActionV2Variant,
+  ActionV2WithChildren,
   CommandBarAction,
+  ExternalLinkActionV2,
+  InternalLinkActionV2,
+  MenuExternalLink,
+  MenuInternalLink,
+  MenuItem,
   MenuItemButton,
   MenuItemWithChildren,
 } from "~/types";
 import Analytics from "~/utils/Analytics";
+import history from "~/utils/history";
 
 function resolve<T>(value: any, context: ActionContext): T {
   return typeof value === "function" ? value(context) : value;
@@ -20,18 +31,17 @@ export function createAction(definition: Optional<Action, "id">): Action {
     ...definition,
     perform: definition.perform
       ? (context) => {
-          // We muse use the specific analytics name here as the action name is
+          // 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",
+                  ? "commandbar"
+                  : "contextmenu",
             });
           }
-
           return definition.perform?.(context);
         }
       : undefined,
@@ -42,7 +52,7 @@ export function createAction(definition: Optional<Action, "id">): Action {
 export function actionToMenuItem(
   action: Action,
   context: ActionContext
-): MenuItemButton | MenuItemWithChildren {
+): MenuItemButton | MenuExternalLink | MenuInternalLink | MenuItemWithChildren {
   const resolvedIcon = resolve<React.ReactElement<any>>(action.icon, context);
   const resolvedChildren = resolve<Action[]>(action.children, context);
   const visible = action.visible ? action.visible(context) : true;
@@ -67,6 +77,26 @@ export function actionToMenuItem(
     };
   }
 
+  if (action.to) {
+    return typeof action.to === "string"
+      ? {
+          type: "route",
+          title,
+          icon,
+          visible,
+          to: action.to,
+          selected: action.selected?.(context),
+        }
+      : {
+          type: "link",
+          title,
+          icon,
+          visible,
+          href: action.to,
+          selected: action.selected?.(context),
+        };
+  }
+
   return {
     type: "button",
     title,
@@ -99,7 +129,7 @@ export function actionToKBar(
 
   const sectionPriority =
     typeof action.section !== "string" && "priority" in action.section
-      ? (action.section.priority as number) ?? 0
+      ? ((action.section.priority as number) ?? 0)
       : 0;
 
   return [
@@ -113,9 +143,10 @@ export function actionToKBar(
       shortcut: action.shortcut || [],
       icon: resolvedIcon,
       priority: (1 + (action.priority ?? 0)) * (1 + (sectionPriority ?? 0)),
-      perform: action.perform
-        ? () => performAction(action, context)
-        : undefined,
+      perform:
+        action.perform || action.to
+          ? () => performAction(action, context)
+          : undefined,
     },
   ].concat(
     // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
@@ -124,7 +155,13 @@ export function actionToKBar(
 }
 
 export async function performAction(action: Action, context: ActionContext) {
-  const result = action.perform?.(context);
+  const result = action.perform
+    ? action.perform(context)
+    : action.to
+      ? typeof action.to === "string"
+        ? history.push(action.to)
+        : window.open(action.to.url, action.to.target)
+      : undefined;
 
   if (result instanceof Promise) {
     return result.catch((err: Error) => {
@@ -134,3 +171,195 @@ 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);
+      const icon =
+        !!action.icon && action.iconInContextMenu !== false
+          ? action.icon
+          : undefined;
+
+      switch (action.variant) {
+        case "action":
+          return {
+            type: "button",
+            title,
+            icon,
+            visible,
+            dangerous: action.dangerous,
+            onClick: () => performActionV2(action, context),
+          };
+
+        case "internal_link":
+          return {
+            type: "route",
+            title,
+            icon,
+            visible,
+            to: action.to,
+          };
+
+        case "external_link":
+          return {
+            type: "link",
+            title,
+            icon,
+            visible,
+            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,
+            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 async function performActionV2(
+  action: ActionV2,
+  context: ActionContext
+) {
+  const result = action.perform(context);
+
+  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
+  );
+}

app/components/ActionButton.tsx

@@ -59,7 +59,7 @@ const ActionButton = React.forwardRef<HTMLButtonElement, Props>(
         disabled={disabled || executing}
         ref={ref}
         onClick={
-          action?.perform && actionContext
+          actionContext
             ? (ev) => {
                 ev.preventDefault();
                 ev.stopPropagation();

app/components/Authenticated.tsx

@@ -31,7 +31,12 @@ const Authenticated = ({ children }: Props) => {
     return <LoadingIndicator />;
   }
 
-  void auth.logout(true);
+  void auth.logout({ savePath: true });
+
+  if (auth.logoutRedirectUri) {
+    window.location.href = auth.logoutRedirectUri;
+    return null;
+  }
   return <Redirect to="/" />;
 };
 

app/components/AuthenticatedLayout.tsx

@@ -49,7 +49,7 @@ type Props = {
 };
 
 const AuthenticatedLayout: React.FC = ({ children }: Props) => {
-  const { ui, auth, collections } = useStores();
+  const { ui, auth } = useStores();
   const location = useLocation();
   const layoutRef = React.useRef<HTMLDivElement>(null);
   const can = usePolicy(ui.activeDocumentId);
@@ -108,9 +108,7 @@ const AuthenticatedLayout: React.FC = ({ children }: Props) => {
     can.comment &&
     ui.activeDocumentId &&
     ui.commentsExpanded &&
-    (ui.activeCollectionId
-      ? collections.get(ui.activeCollectionId)?.canCreateComment
-      : !!team.getPreference(TeamPreference.Commenting));
+    !!team.getPreference(TeamPreference.Commenting);
 
   const sidebarRight = (
     <AnimatePresence

app/components/Badge.ts

@@ -10,8 +10,8 @@ const Badge = styled.span<{ yellow?: boolean; primary?: boolean }>`
     primary
       ? theme.accentText
       : yellow
-      ? theme.almostBlack
-      : theme.textTertiary};
+        ? theme.almostBlack
+        : theme.textTertiary};
   border: 1px solid
     ${({ primary, yellow, theme }) =>
       primary || yellow

app/components/Button.tsx

@@ -176,7 +176,7 @@ const Button = <T extends React.ElementType = "button">(
     ...rest
   } = props;
   const hasText = !!children || value !== undefined;
-  const ic = hideIcon ? undefined : action?.icon ?? icon;
+  const ic = hideIcon ? undefined : (action?.icon ?? icon);
   const hasIcon = ic !== undefined;
 
   return (

app/components/Collaborators.tsx

@@ -1,4 +1,3 @@
-import * as Popover from "@radix-ui/react-popover";
 import filter from "lodash/filter";
 import isEqual from "lodash/isEqual";
 import orderBy from "lodash/orderBy";
@@ -6,16 +5,18 @@ import uniq from "lodash/uniq";
 import { observer } from "mobx-react";
 import { useState, useMemo, useEffect, useCallback } from "react";
 import { useTranslation } from "react-i18next";
-import styled from "styled-components";
-import { depths, s } from "@shared/styles";
 import Document from "~/models/Document";
 import { AvatarSize, AvatarWithPresence } from "~/components/Avatar";
 import DocumentViews from "~/components/DocumentViews";
 import Facepile from "~/components/Facepile";
 import NudeButton from "~/components/NudeButton";
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+} from "~/components/primitives/Popover";
 import useCurrentUser from "~/hooks/useCurrentUser";
 import useStores from "~/hooks/useStores";
-import { fadeAndScaleIn } from "~/styles/animations";
 
 type Props = {
   /** The document to display live collaborators for */
@@ -24,21 +25,6 @@ type Props = {
   limit?: number;
 };
 
-// Styled components to match the original Popover styling
-const StyledPopoverContent = styled(Popover.Content)`
-  animation: ${fadeAndScaleIn} 200ms ease;
-  transform-origin: 75% 0;
-  background: ${s("menuBackground")};
-  border-radius: 6px;
-  padding: 12px 24px;
-  max-height: 75vh;
-  box-shadow: ${s("menuShadow")};
-  z-index: ${depths.modal};
-  overflow-x: hidden;
-  overflow-y: auto;
-  outline: none;
-`;
-
 /**
  * Displays a list of live collaborators for a document, including their avatars
  * and presence status.
@@ -49,14 +35,14 @@ function Collaborators(props: Props) {
   const user = useCurrentUser();
   const currentUserId = user?.id;
   const [requestedUserIds, setRequestedUserIds] = useState<string[]>([]);
-  const [popoverOpen, setPopoverOpen] = useState(false);
   const { users, presence, ui } = useStores();
   const { document } = props;
   const { observingUserId } = ui;
   const documentPresence = presence.get(document.id);
-  const documentPresenceArray = documentPresence
-    ? Array.from(documentPresence.values())
-    : [];
+  const documentPresenceArray = useMemo(
+    () => (documentPresence ? Array.from(documentPresence.values()) : []),
+    [documentPresence]
+  );
 
   // Use Set for O(1) lookups and stable references
   const presentIds = useMemo(
@@ -115,11 +101,11 @@ function Collaborators(props: Props) {
   // Memoize onClick handler to avoid inline function creation
   const handleAvatarClick = useCallback(
     (
-        collaboratorId: string,
-        isPresent: boolean,
-        isObserving: boolean,
-        isObservable: boolean
-      ) =>
+      collaboratorId: string,
+      isPresent: boolean,
+      isObserving: boolean,
+      isObservable: boolean
+    ) =>
       (ev: React.MouseEvent) => {
         if (isObservable && isPresent) {
           ev.preventDefault();
@@ -163,8 +149,8 @@ function Collaborators(props: Props) {
   );
 
   return (
-    <Popover.Root open={popoverOpen} onOpenChange={setPopoverOpen}>
-      <Popover.Trigger asChild>
+    <Popover>
+      <PopoverTrigger>
         <NudeButton
           width={Math.min(collaborators.length, limit) * AvatarSize.Large}
           height={AvatarSize.Large}
@@ -177,19 +163,11 @@ function Collaborators(props: Props) {
             renderAvatar={renderAvatar}
           />
         </NudeButton>
-      </Popover.Trigger>
-      <Popover.Portal>
-        <StyledPopoverContent
-          side="bottom"
-          align="end"
-          sideOffset={0}
-          aria-label={t("Viewers")}
-          style={{ width: 300 }}
-        >
-          <DocumentViews document={document} />
-        </StyledPopoverContent>
-      </Popover.Portal>
-    </Popover.Root>
+      </PopoverTrigger>
+      <PopoverContent aria-label={t("Viewers")} side="bottom" align="end">
+        <DocumentViews document={document} />
+      </PopoverContent>
+    </Popover>
   );
 }
 

app/components/Collection/CollectionForm.tsx

@@ -14,7 +14,7 @@ import Collection from "~/models/Collection";
 import Button from "~/components/Button";
 import Flex from "~/components/Flex";
 import Input from "~/components/Input";
-import InputSelectPermission from "~/components/InputSelectPermission";
+import { InputSelectPermission } from "~/components/InputSelectPermission";
 import { createLazyComponent } from "~/components/LazyLoad";
 import Switch from "~/components/Switch";
 import Text from "~/components/Text";
@@ -22,7 +22,6 @@ import useBoolean from "~/hooks/useBoolean";
 import useCurrentTeam from "~/hooks/useCurrentTeam";
 import useStores from "~/hooks/useStores";
 import { EmptySelectValue } from "~/types";
-import { createSwitchRegister } from "~/utils/forms";
 
 const IconPicker = createLazyComponent(() => import("~/components/IconPicker"));
 
@@ -126,6 +125,8 @@ 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">
@@ -146,7 +147,7 @@ export const CollectionForm = observer(function CollectionForm_({
               <StyledIconPicker
                 icon={values.icon}
                 color={values.color ?? iconColor}
-                initial={values.name[0]}
+                initial={initial}
                 popoverPosition="right"
                 onOpen={setHasOpenedIconPicker}
                 onChange={handleIconChange}
@@ -173,7 +174,7 @@ export const CollectionForm = observer(function CollectionForm_({
               ) => {
                 field.onChange(value === EmptySelectValue ? null : value);
               }}
-              note={t(
+              help={t(
                 "The default access for workspace members, you can share with more users or groups later."
               )}
             />
@@ -182,22 +183,36 @@ export const CollectionForm = observer(function CollectionForm_({
       )}
 
       {team.sharing && (
-        <Switch
-          id="sharing"
-          label={t("Public document sharing")}
-          note={t(
-            "Allow documents within this collection to be shared publicly on the internet."
+        <Controller
+          control={control}
+          name="sharing"
+          render={({ field }) => (
+            <Switch
+              id="sharing"
+              label={t("Public document sharing")}
+              note={t(
+                "Allow documents within this collection to be shared publicly on the internet."
+              )}
+              checked={field.value}
+              onChange={field.onChange}
+            />
           )}
-          {...createSwitchRegister(register, "sharing")}
         />
       )}
 
       {team.getPreference(TeamPreference.Commenting) && (
-        <Switch
-          id="commenting"
-          label={t("Commenting")}
-          note={t("Allow commenting on documents within this collection.")}
-          {...createSwitchRegister(register, "commenting")}
+        <Controller
+          control={control}
+          name="commenting"
+          render={({ field }) => (
+            <Switch
+              id="commenting"
+              label={t("Commenting")}
+              note={t("Allow commenting on documents within this collection.")}
+              checked={!!field.value}
+              onChange={field.onChange}
+            />
+          )}
         />
       )}
 
@@ -211,8 +226,8 @@ export const CollectionForm = observer(function CollectionForm_({
               ? `${t("Saving")}…`
               : t("Save")
             : formState.isSubmitting
-            ? `${t("Creating")}…`
-            : t("Create")}
+              ? `${t("Creating")}…`
+              : t("Create")}
         </Button>
       </Flex>
     </form>

app/components/CommandBar/useRecentDocumentActions.tsx

@@ -4,7 +4,6 @@ import Icon from "@shared/components/Icon";
 import { createAction } from "~/actions";
 import { RecentSection } from "~/actions/sections";
 import useStores from "~/hooks/useStores";
-import history from "~/utils/history";
 import { documentPath } from "~/utils/routeHelpers";
 
 const useRecentDocumentActions = (count = 6) => {
@@ -25,7 +24,7 @@ const useRecentDocumentActions = (count = 6) => {
             ) : (
               <DocumentIcon />
             ),
-            perform: () => history.push(documentPath(item)),
+            to: documentPath(item),
           })
         ),
     [count, ui.activeDocumentId, documents.recentlyViewed]

app/components/CommandBar/useSettingsAction.tsx

@@ -3,7 +3,6 @@ import { useMemo } from "react";
 import { createAction } from "~/actions";
 import { NavigationSection } from "~/actions/sections";
 import useSettingsConfig from "~/hooks/useSettingsConfig";
-import history from "~/utils/history";
 
 const useSettingsAction = () => {
   const config = useSettingsConfig();
@@ -16,7 +15,7 @@ const useSettingsAction = () => {
           name: item.name,
           icon: <Icon />,
           section: NavigationSection,
-          perform: () => history.push(item.path),
+          to: item.path,
         };
       }),
     [config]

app/components/ConfirmationDialog.tsx

@@ -64,7 +64,7 @@ const ConfirmationDialog: React.FC<Props> = ({
             danger={danger}
             autoFocus
           >
-            {isSaving && savingText ? savingText : submitText ?? t("Confirm")}
+            {isSaving && savingText ? savingText : (submitText ?? t("Confirm"))}
           </Button>
         </Flex>
       </Flex>

app/components/ContextMenu/MenuItem.tsx

@@ -20,7 +20,7 @@ type Props = {
   dangerous?: boolean;
   to?: LocationDescriptor;
   href?: string;
-  target?: "_blank";
+  target?: string;
   as?: string | React.ComponentType<any>;
   hide?: () => void;
   level?: number;

app/components/ContextMenu/Template.tsx

@@ -155,12 +155,14 @@ function Template({ items, actions, context, showIcons, ...menu }: Props) {
           return (
             <MenuItem
               id={`${item.title}-${index}`}
-              href={item.href}
+              href={typeof item.href === "string" ? item.href : item.href.url}
               key={`${item.type}-${item.title}-${index}`}
               disabled={item.disabled}
               selected={item.selected}
               level={item.level}
-              target={item.href.startsWith("#") ? undefined : "_blank"}
+              target={
+                typeof item.href === "string" ? undefined : item.href.target
+              }
               icon={showIcons !== false ? item.icon : undefined}
               {...menu}
             >
@@ -231,6 +233,12 @@ 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;
       })}

app/components/DefaultCollectionInputSelect.tsx

@@ -3,7 +3,7 @@ import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
 import CollectionIcon from "~/components/Icons/CollectionIcon";
-import { InputSelectNew, Option } from "~/components/InputSelectNew";
+import { InputSelect, Option } from "~/components/InputSelect";
 import useStores from "~/hooks/useStores";
 
 type DefaultCollectionInputSelectProps = {
@@ -70,11 +70,10 @@ const DefaultCollectionInputSelect = ({
   }
 
   return (
-    <InputSelectNew
+    <InputSelect
       options={options}
       value={defaultCollectionId ?? "home"}
       onChange={onSelectCollection}
-      ariaLabel={t("Default collection")}
       label={t("Start view")}
       hideLabel
       short

app/components/Dialogs.tsx

@@ -21,7 +21,6 @@ function Dialogs() {
         <Modal
           key={id}
           isOpen={modal.isOpen}
-          fullscreen={modal.fullscreen ?? false}
           onRequestClose={() => {
             modal.onClose?.();
             dialogs.closeModal(id);

app/components/DocumentBreadcrumb.tsx

@@ -138,8 +138,8 @@ function DocumentBreadcrumb(
         ? output.slice(-depth)
         : output
       : depth !== undefined
-      ? output.slice(0, depth)
-      : output;
+        ? output.slice(0, depth)
+        : output;
   }, [t, path, category, sidebarContext, collectionNode, reverse, depth]);
 
   if (!collections.isLoaded) {

app/components/DocumentCard.tsx

@@ -123,6 +123,7 @@ function DocumentCard(props: Props) {
               <DocumentSquircle
                 icon={document.icon}
                 color={document.color ?? undefined}
+                initial={document.initial}
               />
             ) : (
               <Squircle
@@ -194,17 +195,22 @@ 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}>
-      <Icon value={icon} color={theme.white} forceColor />
+    <Squircle color={squircleColor} style={style}>
+      <Icon value={icon} color={theme.white} initial={initial} forceColor />
     </Squircle>
   );
 };

app/components/DocumentExplorer.tsx

@@ -78,10 +78,6 @@ function DocumentExplorer({ onSubmit, onSelect, items, defaultValue }: Props) {
   const VERTICAL_PADDING = 6;
   const HORIZONTAL_PADDING = 24;
 
-  const recentlyViewedItemIds = documents.recentlyViewed
-    .slice(0, 5)
-    .map((item) => item.id);
-
   const searchIndex = React.useMemo(
     () =>
       new FuzzySearch(items, ["title"], {
@@ -130,7 +126,6 @@ function DocumentExplorer({ onSubmit, onSelect, items, defaultValue }: Props) {
     return searchTerm
       ? searchIndex.search(searchTerm)
       : items
-          .filter((item) => recentlyViewedItemIds.includes(item.id))
           .concat(
             items.filter((item) => item.type === NavigationNodeType.Collection)
           )

app/components/DocumentListItem.tsx

@@ -107,7 +107,11 @@ function DocumentListItem(
         <Heading dir={document.dir}>
           {document.icon && (
             <>
-              <Icon value={document.icon} color={document.color ?? undefined} />
+              <Icon
+                value={document.icon}
+                color={document.color ?? undefined}
+                initial={document.initial}
+              />
               &nbsp;
             </>
           )}
@@ -177,7 +181,9 @@ const Actions = styled(EventBoundary)`
   color: ${s("textSecondary")};
 
   ${NudeButton} {
-    &: ${hover}, &[aria-expanded= "true"] {
+    &:
+      ${hover},
+      &[aria-expanded= "true"] {
       background: ${s("sidebarControlHoverBackground")};
     }
   }

app/components/Editor.tsx

@@ -201,6 +201,7 @@ 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) => (

app/components/EventListItem.tsx

@@ -1,9 +1,7 @@
-import { LocationDescriptor } from "history";
 import { observer } from "mobx-react";
 import {
   TrashIcon,
   ArchiveIcon,
-  EditIcon,
   PublishIcon,
   MoveIcon,
   UnpublishIcon,
@@ -11,120 +9,28 @@ import {
   UserIcon,
   CrossIcon,
 } from "outline-icons";
-import { useRef } from "react";
 import { useTranslation } from "react-i18next";
-import { useLocation } from "react-router-dom";
 import styled, { css } from "styled-components";
-import EventBoundary from "@shared/components/EventBoundary";
-import { s, hover } from "@shared/styles";
-import { RevisionHelper } from "@shared/utils/RevisionHelper";
+import { s } from "@shared/styles";
 import Document from "~/models/Document";
-import { Avatar, AvatarSize } from "~/components/Avatar";
-import Item, { Actions } from "~/components/List/Item";
+import Event from "~/models/Event";
 import Time from "~/components/Time";
-import { useLocationSidebarContext } from "~/hooks/useLocationSidebarContext";
-import useStores from "~/hooks/useStores";
-import RevisionMenu from "~/menus/RevisionMenu";
 import Logger from "~/utils/Logger";
-import { documentHistoryPath } from "~/utils/routeHelpers";
 import Text from "./Text";
 
-export type RevisionEvent = {
-  name: "revisions.create";
-  latest: boolean;
-};
-
-export type DocumentEvent = {
-  name:
-    | "documents.publish"
-    | "documents.unpublish"
-    | "documents.archive"
-    | "documents.unarchive"
-    | "documents.delete"
-    | "documents.restore"
-    | "documents.add_user"
-    | "documents.remove_user"
-    | "documents.move";
-  userId: string;
-};
-
-export type Event = {
-  id: string;
-  actorId: string;
-  createdAt: string;
-  deletedAt?: string;
-} & (RevisionEvent | DocumentEvent);
-
 type Props = {
   document: Document;
-  event: Event;
+  item: Event<Document>;
 };
 
-const EventListItem = ({ event, document, ...rest }: Props) => {
+const EventListItem = ({ item }: Props) => {
   const { t } = useTranslation();
-  const { revisions, users } = useStores();
-  const actor = "actorId" in event ? users.get(event.actorId) : undefined;
-  const user = "userId" in event ? users.get(event.userId) : undefined;
-  const location = useLocation();
-  const sidebarContext = useLocationSidebarContext();
-  const revisionLoadedRef = useRef(false);
   const opts = {
-    userName: actor?.name,
+    userName: item.actor?.name,
   };
-  const isRevision = event.name === "revisions.create";
-  const isDerivedFromDocument =
-    event.id === RevisionHelper.latestId(document.id);
-  let meta, icon, to: LocationDescriptor | undefined;
-
-  const ref = useRef<HTMLAnchorElement>(null);
-  // the time component tends to steal focus when clicked
-  // ...so forward the focus back to the parent item
-  const handleTimeClick = () => {
-    ref.current?.focus();
-  };
-
-  const prefetchRevision = async () => {
-    if (
-      !document.isDeleted &&
-      event.name === "revisions.create" &&
-      !event.deletedAt &&
-      !isDerivedFromDocument &&
-      !revisionLoadedRef.current
-    ) {
-      await revisions.fetch(event.id, { force: true });
-      revisionLoadedRef.current = true;
-    }
-  };
-
-  switch (event.name) {
-    case "revisions.create":
-      {
-        if (event.deletedAt) {
-          icon = <TrashIcon />;
-          meta = t("Revision deleted");
-        } else {
-          icon = <EditIcon size={16} />;
-          meta = event.latest ? (
-            <>
-              {t("Current version")} &middot; {actor?.name}
-            </>
-          ) : (
-            t("{{userName}} edited", opts)
-          );
-          to = {
-            pathname: documentHistoryPath(
-              document,
-              isDerivedFromDocument ? "latest" : event.id
-            ),
-            state: {
-              sidebarContext,
-              retainScrollPosition: true,
-            },
-          };
-        }
-      }
-      break;
+  let meta, icon;
 
+  switch (item.name) {
     case "documents.archive":
       icon = <ArchiveIcon />;
       meta = t("{{userName}} archived", opts);
@@ -143,14 +49,14 @@ const EventListItem = ({ event, document, ...rest }: Props) => {
       icon = <UserIcon />;
       meta = t("{{userName}} added {{addedUserName}}", {
         ...opts,
-        addedUserName: user?.name ?? t("a user"),
+        addedUserName: item.user?.name ?? t("a user"),
       });
       break;
     case "documents.remove_user":
       icon = <CrossIcon />;
       meta = t("{{userName}} removed {{removedUserName}}", {
         ...opts,
-        removedUserName: user?.name ?? t("a user"),
+        removedUserName: item.user?.name ?? t("a user"),
       });
       break;
 
@@ -175,71 +81,27 @@ const EventListItem = ({ event, document, ...rest }: Props) => {
       break;
 
     default:
-      Logger.warn("Unhandled event", { event });
+      Logger.warn("Unhandled item", { item });
   }
 
   if (!meta) {
     return null;
   }
 
-  const isActive =
-    typeof to === "string"
-      ? location.pathname === to
-      : location.pathname === to?.pathname;
-
-  if (document.isDeleted) {
-    to = undefined;
-  }
-
-  return event.name === "revisions.create" && !event.deletedAt ? (
-    <RevisionItem
-      small
-      exact
-      to={to}
-      title={
-        <Time
-          dateTime={event.createdAt}
-          format={{
-            en_US: "MMM do, h:mm a",
-            fr_FR: "'Le 'd MMMM 'à' H:mm",
-          }}
-          relative={false}
-          addSuffix
-          onClick={handleTimeClick}
-        />
-      }
-      image={<Avatar model={actor} size={AvatarSize.Large} />}
-      subtitle={meta}
-      actions={
-        isRevision && isActive && !event.latest ? (
-          <StyledEventBoundary>
-            <RevisionMenu document={document} revisionId={event.id} />
-          </StyledEventBoundary>
-        ) : undefined
-      }
-      onMouseEnter={prefetchRevision}
-      ref={ref}
-      {...rest}
-    />
-  ) : (
+  return (
     <EventItem>
       <IconWrapper size="xsmall" type="secondary">
         {icon}
       </IconWrapper>
       <Text size="xsmall" type="secondary">
         {meta} &middot;{" "}
-        <Time
-          dateTime={event.deletedAt ?? event.createdAt}
-          relative
-          shorten
-          addSuffix
-        />
+        <Time dateTime={item.createdAt} relative shorten addSuffix />
       </Text>
     </EventItem>
   );
 };
 
-const lineStyle = css`
+export const lineStyle = css`
   &::before {
     content: "";
     display: block;
@@ -285,9 +147,10 @@ const lineStyle = css`
 
 const IconWrapper = styled(Text)`
   height: 24px;
+  min-width: 24px;
 `;
 
-const EventItem = styled.li`
+export const EventItem = styled.li`
   display: flex;
   align-items: center;
   gap: 8px;
@@ -308,26 +171,4 @@ const EventItem = styled.li`
   ${lineStyle}
 `;
 
-const StyledEventBoundary = styled(EventBoundary)`
-  height: 24px;
-`;
-
-const RevisionItem = styled(Item)`
-  border: 0;
-  position: relative;
-  margin: 8px 0;
-  padding: 8px;
-  border-radius: 8px;
-
-  ${lineStyle}
-
-  ${Actions} {
-    opacity: 0.5;
-
-    &: ${hover} {
-      opacity: 1;
-    }
-  }
-`;
-
 export default observer(EventListItem);

app/components/Facepile.tsx

@@ -1,10 +1,10 @@
 import { observer } from "mobx-react";
 import * as React from "react";
+import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import User from "~/models/User";
 import { Avatar, AvatarSize } from "~/components/Avatar";
 import Flex from "~/components/Flex";
-import Initials from "./Avatar/Initials";
 
 type Props = {
   /** The users to display */
@@ -31,19 +31,22 @@ function Facepile({
   renderAvatar = Avatar,
   ...rest
 }: Props) {
+  const { t } = useTranslation();
   const filtered = users.filter(Boolean).slice(-limit);
   const Component = renderAvatar;
 
+  if (overflow > 0) {
+    filtered.unshift({
+      id: "overflow",
+      initial: `${users.length ? "+" : ""}${overflow}`,
+      name: t(`{{count}} more user`, { count: overflow }),
+    } as User);
+  }
+
   return (
     <Avatars {...rest}>
-      {overflow > 0 && (
-        <Initials size={size} content={String(overflow)}>
-          {users.length ? "+" : ""}
-          {overflow}
-        </Initials>
-      )}
       {filtered.map((model, index) => {
-        const lastChild = index === 0 && overflow <= 0;
+        const lastChild = index === 0;
         return (
           <Component
             key={model.id}

app/components/Guide.tsx

@@ -98,7 +98,9 @@ const Scene = styled.div`
   outline: none;
   opacity: 0;
   transform: translateX(16px);
-  transition: transform 250ms ease, opacity 250ms ease;
+  transition:
+    transform 250ms ease,
+    opacity 250ms ease;
 
   &[data-enter] {
     opacity: 1;

app/components/HoverPreview/Components.tsx

@@ -20,7 +20,8 @@ export const Preview = styled(Link)`
   cursor: ${(props: { as?: string }) =>
     props.as === "div" ? "default" : "var(--pointer)"};
   border-radius: 4px;
-  box-shadow: 0 30px 90px -20px rgba(0, 0, 0, 0.3),
+  box-shadow:
+    0 30px 90px -20px rgba(0, 0, 0, 0.3),
     0 0 1px 1px rgba(0, 0, 0, 0.05);
   overflow: hidden;
   position: absolute;

app/components/IconPicker/components/GridTemplate.tsx

@@ -115,7 +115,9 @@ const CategoryName = styled(Text)`
 `;
 
 const Icon = styled.svg`
-  transition: color 150ms ease-in-out, fill 150ms ease-in-out;
+  transition:
+    color 150ms ease-in-out,
+    fill 150ms ease-in-out;
   transition-delay: var(--delay);
 `;
 

app/components/IconPicker/components/PopoverButton.tsx

@@ -12,7 +12,8 @@ export const PopoverButton = styled(NudeButton)<{ $borderOnHover?: boolean }>`
       $borderOnHover &&
       css`
         background: ${s("buttonNeutralBackground")};
-        box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px,
+        box-shadow:
+          rgba(0, 0, 0, 0.07) 0px 1px 2px,
           ${s("buttonNeutralBorder")} 0 0 0 1px inset;
       `};
   }

app/components/IconPicker/index.tsx

@@ -1,19 +1,22 @@
-import * as Popover from "@radix-ui/react-popover";
 import * as Tabs from "@radix-ui/react-tabs";
 import { SmileyIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled, { css } from "styled-components";
 import Icon from "@shared/components/Icon";
-import { s, hover, depths } from "@shared/styles";
+import { s, hover } from "@shared/styles";
 import theme from "@shared/styles/theme";
 import { IconType } from "@shared/types";
 import { determineIconType } from "@shared/utils/icon";
 import Flex from "~/components/Flex";
 import NudeButton from "~/components/NudeButton";
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+} from "~/components/primitives/Popover";
 import useMobile from "~/hooks/useMobile";
 import useWindowSize from "~/hooks/useWindowSize";
-import { fadeAndScaleIn } from "~/styles/animations";
 import { Drawer, DrawerContent, DrawerTrigger } from "../primitives/Drawer";
 import EmojiPanel from "./components/EmojiPanel";
 import IconPanel from "./components/IconPanel";
@@ -126,7 +129,24 @@ const IconPicker = ({
     onChange(null, null);
   }, [setOpen, onChange]);
 
-  const PickerContent = (
+  const pickerTrigger = (
+    <PopoverButton
+      aria-label={t("Show menu")}
+      className={className}
+      size={size}
+      $borderOnHover={borderOnHover}
+    >
+      {children ? (
+        children
+      ) : iconType && icon ? (
+        <Icon value={icon} color={color} size={size} initial={initial} />
+      ) : (
+        <StyledSmileyIcon color={theme.placeholder} size={size} />
+      )}
+    </PopoverButton>
+  );
+
+  const pickerContent = (
     <Content
       open={open}
       activeTab={activeTab}
@@ -151,60 +171,28 @@ const IconPicker = ({
   if (isMobile) {
     return (
       <Drawer open={open} onOpenChange={setOpen}>
-        <DrawerTrigger asChild>
-          <PopoverButton
-            aria-label={t("Show menu")}
-            className={className}
-            size={size}
-            $borderOnHover={borderOnHover}
-          >
-            {children ? (
-              children
-            ) : iconType && icon ? (
-              <Icon value={icon} color={color} size={size} initial={initial} />
-            ) : (
-              <StyledSmileyIcon color={theme.placeholder} size={size} />
-            )}
-          </PopoverButton>
-        </DrawerTrigger>
+        <DrawerTrigger asChild>{pickerTrigger}</DrawerTrigger>
         <DrawerContent aria-label={t("Icon Picker")}>
-          {PickerContent}
+          {pickerContent}
         </DrawerContent>
       </Drawer>
     );
   }
 
   return (
-    <Popover.Root open={open} onOpenChange={handleOpenChange} modal={true}>
-      <Popover.Trigger asChild>
-        <PopoverButton
-          aria-label={t("Show menu")}
-          className={className}
-          size={size}
-          $borderOnHover={borderOnHover}
-        >
-          {children ? (
-            children
-          ) : iconType && icon ? (
-            <Icon value={icon} color={color} size={size} initial={initial} />
-          ) : (
-            <StyledSmileyIcon color={theme.placeholder} size={size} />
-          )}
-        </PopoverButton>
-      </Popover.Trigger>
-      <Popover.Portal>
-        <StyledPopoverContent
-          side={popoverPosition === "right" ? "right" : "bottom"}
-          align={popoverPosition === "bottom-start" ? "start" : "center"}
-          sideOffset={0}
-          width={popoverWidth}
-          aria-label={t("Icon Picker")}
-          onClick={(e) => e.stopPropagation()}
-        >
-          {PickerContent}
-        </StyledPopoverContent>
-      </Popover.Portal>
-    </Popover.Root>
+    <Popover open={open} onOpenChange={handleOpenChange} modal={true}>
+      <PopoverTrigger>{pickerTrigger}</PopoverTrigger>
+      <PopoverContent
+        aria-label={t("Icon Picker")}
+        width={popoverWidth}
+        side={popoverPosition === "right" ? "right" : "bottom"}
+        align={popoverPosition === "bottom-start" ? "start" : "center"}
+        scrollable={false}
+        shrink
+      >
+        {pickerContent}
+      </PopoverContent>
+    </Popover>
   );
 };
 
@@ -348,27 +336,4 @@ const StyledTabContent = styled(Tabs.Content)`
   overflow-y: auto;
 `;
 
-const StyledPopoverContent = styled(Popover.Content)<{ width: number }>`
-  animation: ${fadeAndScaleIn} 200ms ease;
-  transform-origin: var(--radix-popover-content-transform-origin);
-  background: ${s("menuBackground")};
-  border-radius: 6px;
-  padding: 6px 0;
-  max-height: 75vh;
-  box-shadow: ${s("menuShadow")};
-  z-index: ${depths.modal};
-  width: ${(props) => props.width}px;
-  overflow: hidden;
-  outline: none;
-
-  @media (max-width: 768px) {
-    position: fixed;
-    z-index: ${depths.menu};
-    top: 50px;
-    left: 8px;
-    right: 8px;
-    width: auto;
-  }
-`;
-
 export default React.memo(IconPicker);

app/components/Input.tsx

@@ -107,8 +107,8 @@ export const Outline = styled(Flex)<{
     props.hasError
       ? props.theme.danger
       : props.focused
-      ? props.theme.inputBorderFocused
-      : props.theme.inputBorder};
+        ? props.theme.inputBorderFocused
+        : props.theme.inputBorder};
   border-radius: 4px;
   font-weight: normal;
   align-items: center;

app/components/InputMemberPermissionSelect.tsx

@@ -2,23 +2,42 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import { s } from "@shared/styles";
-import InputSelect, { Props as SelectProps } from "~/components/InputSelect";
+import { InputSelect, Option } from "~/components/InputSelect";
 import { EmptySelectValue, Permission } from "~/types";
 
+type Props = Pick<
+  React.ComponentProps<typeof InputSelect>,
+  "value" | "onChange" | "disabled" | "className"
+>;
+
 export default function InputMemberPermissionSelect(
-  props: Partial<SelectProps> & { permissions: Permission[] }
+  props: Props & { permissions: Permission[] }
 ) {
   const { value, onChange, ...rest } = props;
   const { t } = useTranslation();
 
+  const options = React.useMemo<Option[]>(
+    () =>
+      props.permissions.reduce((acc, permission) => {
+        if (permission.divider) {
+          acc.push({ type: "separator" });
+        }
+        acc.push({
+          ...permission,
+          type: "item",
+        });
+        return acc;
+      }, [] as Option[]),
+    [props.permissions]
+  );
+
   return (
     <Select
-      label={t("Permissions")}
-      options={props.permissions}
-      ariaLabel={t("Permissions")}
-      onChange={onChange}
+      options={options}
       value={value || EmptySelectValue}
-      labelHidden
+      onChange={onChange}
+      label={t("Permissions")}
+      hideLabel
       nude
       {...rest}
     />
@@ -26,13 +45,5 @@ export default function InputMemberPermissionSelect(
 }
 
 const Select = styled(InputSelect)`
-  margin: 0;
-  font-size: 14px;
-  border-color: transparent;
-  box-shadow: none;
   color: ${s("textSecondary")};
-
-  select {
-    margin: 0;
-  }
-` as React.ComponentType<SelectProps>;
+`;

app/components/InputSelect.tsx

@@ -1,383 +1,402 @@
 import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
-import {
-  Select,
-  SelectOption,
-  useSelectState,
-  useSelectPopover,
-  SelectPopover,
-} from "@renderlesskit/react";
-import { CheckmarkIcon } from "outline-icons";
+import { QuestionMarkIcon } from "outline-icons";
+import { transparentize } from "polished";
 import * as React from "react";
-import styled, { css } from "styled-components";
+import styled from "styled-components";
 import { s } from "@shared/styles";
-import Button, { Props as ButtonProps, Inner } from "~/components/Button";
 import Text from "~/components/Text";
-import useMenuHeight from "~/hooks/useMenuHeight";
 import useMobile from "~/hooks/useMobile";
-import useOnClickOutside from "~/hooks/useOnClickOutside";
-import { fadeAndScaleIn } from "~/styles/animations";
-import {
-  Position,
-  Background as ContextMenuBackground,
-  Backdrop,
-  Placement,
-} from "./ContextMenu";
-import { MenuAnchorCSS } from "./ContextMenu/MenuItem";
 import Separator from "./ContextMenu/Separator";
+import Flex from "./Flex";
 import { LabelText } from "./Input";
+import NudeButton from "./NudeButton";
+import Scrollable from "./Scrollable";
+import Tooltip from "./Tooltip";
+import {
+  Drawer,
+  DrawerContent,
+  DrawerTitle,
+  DrawerTrigger,
+} from "./primitives/Drawer";
+import {
+  InputSelectRoot,
+  InputSelectContent,
+  InputSelectItem,
+  InputSelectSeparator,
+  InputSelectTrigger,
+  type TriggerButtonProps,
+} from "./primitives/InputSelect";
+import {
+  SelectItemIndicator,
+  SelectItem as SelectItemWrapper,
+  SelectButton,
+} from "./primitives/components/InputSelect";
 
-export type Option = {
-  label: string | JSX.Element;
+type Separator = {
+  /* Denotes a horizontal divider line to be rendered in the menu, */
+  type: "separator";
+};
+
+export type Item = {
+  /* Denotes a selectable option in the menu. */
+  type: "item";
+  /* Representative text shown in the menu for this option. */
+  label: string;
+  /* Actual value of this option. */
   value: string;
+  /* Additional info shown alongside the label.  */
   description?: string;
-  divider?: boolean;
+  /* An icon shown alongside the label.  */
+  icon?: React.ReactElement;
 };
 
-export type Props = Omit<ButtonProps<any>, "onChange"> & {
-  id?: string;
-  name?: string;
-  value?: string | null;
-  label?: React.ReactNode;
-  nude?: boolean;
-  ariaLabel: string;
-  short?: boolean;
-  disabled?: boolean;
-  className?: string;
-  labelHidden?: boolean;
-  icon?: React.ReactNode;
+export type Option = Item | Separator;
+
+type Props = {
+  /* Options to display in the select menu. */
   options: Option[];
-  /** @deprecated Removing soon, do not use. */
-  note?: React.ReactNode;
-  /** Callback function that is called when the value changes. Return false to cancel the change. */
-  onChange?: (value: string | null) => void | Promise<boolean | void>;
-  style?: React.CSSProperties;
-  /**
-   * Set to true if this component is rendered inside a Modal.
-   * The Modal will take care of preventing body scroll behaviour.
-   */
-  skipBodyScroll?: boolean;
-};
+  /* Current chosen value. */
+  value?: string | null;
+  /* Callback when an option is selected. */
+  onChange: (value: string) => void;
+  /* Label for the select menu. */
+  label: string;
+  /* When true, label is hidden in an accessible manner. */
+  hideLabel?: boolean;
+  /* When true, menu is disabled. */
+  disabled?: boolean;
+  /* When true, width of the menu trigger is restricted. Otherwise, takes up the full width of parent. */
+  short?: boolean;
+  /** Display a tooltip with the descriptive help text about the select menu. */
+  help?: string;
+} & TriggerButtonProps;
 
-export interface InputSelectRef {
-  value: string | null;
-  focus: () => void;
-  blur: () => void;
-}
+export const InputSelect = React.forwardRef<HTMLButtonElement, Props>(
+  (props, ref) => {
+    const {
+      options,
+      value,
+      onChange,
+      label,
+      hideLabel,
+      short,
+      help,
+      ...triggerProps
+    } = props;
 
-interface InnerProps extends React.HTMLAttributes<HTMLDivElement> {
-  placement: Placement;
-}
+    const [localValue, setLocalValue] = React.useState(value);
+    const [open, setOpen] = React.useState(false);
 
-const getOptionFromValue = (options: Option[], value: string | null) =>
-  options.find((option) => option.value === value);
+    const contentRef =
+      React.useRef<React.ElementRef<typeof InputSelectContent>>(null);
 
-const InputSelect = (props: Props, ref: React.RefObject<InputSelectRef>) => {
-  const {
-    value = null,
-    label,
-    className,
-    labelHidden,
-    options,
-    short,
-    ariaLabel,
-    onChange,
-    disabled,
-    note,
-    icon,
-    nude,
-    skipBodyScroll,
-    ...rest
-  } = props;
+    const isMobile = useMobile();
 
-  const select = useSelectState({
-    gutter: 0,
-    modal: true,
-    selectedValue: value,
-  });
+    const placeholder = `Select a ${label.toLowerCase()}`;
+    const optionsHaveIcon = options.some(
+      (opt) => opt.type === "item" && !!opt.icon
+    );
 
-  const popover = useSelectPopover({
-    ...select,
-    hideOnClickOutside: false,
-    preventBodyScroll: skipBodyScroll ? false : true,
-    disabled,
-  });
-
-  const isMobile = useMobile();
-  const previousValue = React.useRef<string | null>(value);
-  const selectedRef = React.useRef<HTMLDivElement>(null);
-  const buttonRef = React.useRef<HTMLButtonElement>(null);
-  const contentRef = React.useRef<HTMLDivElement>(null);
-  const minWidth = buttonRef.current?.offsetWidth || 0;
-  const margin = 8;
-  const menuMaxHeight = useMenuHeight({
-    visible: select.visible,
-    elementRef: select.unstable_disclosureRef,
-    margin,
-  });
-  const maxHeight = Math.min(
-    menuMaxHeight ?? 0,
-    window.innerHeight -
-      (buttonRef.current?.getBoundingClientRect().bottom ?? 0) -
-      margin
-  );
-
-  const wrappedLabel = <LabelText>{label}</LabelText>;
-  const selectedValueIndex = options.findIndex(
-    (opt) => opt.value === select.selectedValue
-  );
-
-  // Custom click outside handling rather than using `hideOnClickOutside` from reakit so that we can
-  // prevent event bubbling.
-  useOnClickOutside(
-    contentRef,
-    (event) => {
-      if (buttonRef.current?.contains(event.target as Node)) {
-        return;
-      }
-      if (select.visible) {
-        event.stopPropagation();
-        event.preventDefault();
-        select.hide();
-      }
-    },
-    { capture: true }
-  );
-
-  React.useImperativeHandle(ref, () => ({
-    focus: () => {
-      buttonRef.current?.focus();
-    },
-    blur: () => {
-      buttonRef.current?.blur();
-    },
-    value: select.selectedValue,
-  }));
-
-  React.useEffect(() => {
-    previousValue.current = value;
-
-    // Update the selected value if it changes from the outside – both of these lines are needed
-    // for correct functioning
-    select.selectedValue = value;
-    select.setSelectedValue(value);
-  }, [value]);
-
-  React.useEffect(() => {
-    if (previousValue.current === select.selectedValue) {
-      return;
-    }
-    const previous = previousValue.current;
-    previousValue.current = select.selectedValue;
-
-    const response = onChange?.(select.selectedValue);
-    if (response && response instanceof Promise) {
-      void response.then((success) => {
-        if (success === false) {
-          select.selectedValue = previous;
-          select.setSelectedValue(previous);
+    const renderOption = React.useCallback(
+      (option: Option) => {
+        if (option.type === "separator") {
+          return <InputSelectSeparator />;
         }
-      });
-    }
-  }, [onChange, select.selectedValue]);
 
-  React.useLayoutEffect(() => {
-    if (select.visible) {
-      requestAnimationFrame(() => {
-        if (contentRef.current) {
-          contentRef.current.scrollTop = selectedValueIndex * 32;
-        }
-      });
-    }
-  }, [select.visible, selectedValueIndex]);
+        return (
+          <InputSelectItem key={option.value} value={option.value}>
+            <Option option={option} optionsHaveIcon={optionsHaveIcon} />
+          </InputSelectItem>
+        );
+      },
+      [optionsHaveIcon]
+    );
+
+    const onValueChange = React.useCallback(
+      async (val: string) => {
+        setLocalValue(val);
+        onChange(val);
+      },
+      [onChange, setLocalValue]
+    );
+
+    const enablePointerEvents = React.useCallback(() => {
+      if (contentRef.current) {
+        contentRef.current.style.pointerEvents = "auto";
+      }
+    }, []);
+
+    const disablePointerEvents = React.useCallback(() => {
+      if (contentRef.current) {
+        contentRef.current.style.pointerEvents = "none";
+      }
+    }, []);
+
+    React.useEffect(() => {
+      setLocalValue(value);
+    }, [value]);
+
+    if (isMobile) {
+      return (
+        <MobileSelect
+          ref={ref}
+          {...props}
+          value={localValue}
+          onChange={onValueChange}
+          placeholder={placeholder}
+          optionsHaveIcon={optionsHaveIcon}
+        />
+      );
+    }
 
-  function labelForOption(opt: Option) {
     return (
-      <>
-        {opt.label}
-        {opt.description && (
-          <>
-            &nbsp;
-            <Text as="span" type="tertiary" size="small" ellipsis>
-              – {opt.description}
-            </Text>
-          </>
-        )}
-      </>
+      <Wrapper short={short}>
+        <Label text={label} hidden={hideLabel ?? false} help={help} />
+        <InputSelectRoot
+          open={open}
+          onOpenChange={setOpen}
+          value={localValue ?? undefined}
+          onValueChange={onValueChange}
+        >
+          <InputSelectTrigger
+            ref={ref}
+            placeholder={placeholder}
+            {...triggerProps}
+          />
+          <InputSelectContent
+            ref={contentRef}
+            aria-label={label}
+            onAnimationStart={disablePointerEvents}
+            onAnimationEnd={enablePointerEvents}
+          >
+            {options.map(renderOption)}
+          </InputSelectContent>
+        </InputSelectRoot>
+      </Wrapper>
     );
   }
+);
+InputSelect.displayName = "InputSelect";
 
-  const option = getOptionFromValue(options, select.selectedValue);
-
-  return (
-    <>
-      <Wrapper short={short}>
-        {label &&
-          (labelHidden ? (
-            <VisuallyHidden.Root>{wrappedLabel}</VisuallyHidden.Root>
-          ) : (
-            wrappedLabel
-          ))}
-
-        <Select {...select} disabled={disabled} {...rest} ref={buttonRef}>
-          {(buttonProps) => (
-            <StyledButton
-              neutral
-              disclosure
-              className={className}
-              icon={icon}
-              $nude={nude}
-              {...buttonProps}
-            >
-              {option ? (
-                labelForOption(option)
-              ) : (
-                <Placeholder>Select a {ariaLabel.toLowerCase()}</Placeholder>
-              )}
-            </StyledButton>
-          )}
-        </Select>
-        <SelectPopover
-          {...select}
-          {...popover}
-          aria-label={ariaLabel}
-          preventBodyScroll={skipBodyScroll ? false : true}
-        >
-          {(popoverProps: InnerProps) => {
-            const topAnchor = popoverProps.style?.top === "0";
-            const rightAnchor = popoverProps.placement === "bottom-end";
-
-            return (
-              <Positioner {...popoverProps}>
-                <Background
-                  dir="auto"
-                  ref={contentRef}
-                  topAnchor={topAnchor}
-                  rightAnchor={rightAnchor}
-                  hiddenScrollbars
-                  maxWidth={400}
-                  style={
-                    maxHeight && topAnchor
-                      ? {
-                          maxHeight,
-                          minWidth,
-                        }
-                      : {
-                          minWidth,
-                        }
-                  }
-                >
-                  {select.visible
-                    ? options.map((opt) => {
-                        const isSelected = select.selectedValue === opt.value;
-                        const Icon = isSelected ? CheckmarkIcon : Spacer;
-                        return (
-                          <React.Fragment key={opt.value}>
-                            {opt.divider && <Separator />}
-                            <StyledSelectOption
-                              {...select}
-                              value={opt.value}
-                              key={opt.value}
-                              ref={isSelected ? selectedRef : undefined}
-                            >
-                              <Icon />
-                              &nbsp;
-                              {labelForOption(opt)}
-                            </StyledSelectOption>
-                          </React.Fragment>
-                        );
-                      })
-                    : null}
-                </Background>
-              </Positioner>
-            );
-          }}
-        </SelectPopover>
-      </Wrapper>
-      {note && (
-        <Text as="p" type="secondary" size="small">
-          {note}
-        </Text>
-      )}
-      {select.visible && isMobile && <Backdrop />}
-    </>
-  );
+type MobileSelectProps = Props & {
+  placeholder: string;
+  optionsHaveIcon: boolean;
 };
 
-const Background = styled(ContextMenuBackground)`
-  animation: ${fadeAndScaleIn} 200ms ease;
-`;
+const MobileSelect = React.forwardRef<HTMLButtonElement, MobileSelectProps>(
+  (props, ref) => {
+    const {
+      options,
+      value,
+      onChange,
+      label,
+      hideLabel,
+      disabled,
+      short,
+      placeholder,
+      optionsHaveIcon,
+      ...triggerProps
+    } = props;
 
-const Placeholder = styled.span`
-  color: ${s("placeholder")};
-`;
+    const [open, setOpen] = React.useState(false);
+    const contentRef =
+      React.useRef<React.ElementRef<typeof DrawerContent>>(null);
 
-const Spacer = styled.div`
-  width: 24px;
-  height: 24px;
-  flex-shrink: 0;
-`;
+    const selectedOption = React.useMemo(
+      () =>
+        value
+          ? options.find((opt) => opt.type === "item" && opt.value === value)
+          : undefined,
+      [value, options]
+    );
 
-const StyledButton = styled(Button)<{ $nude?: boolean }>`
-  font-weight: normal;
-  text-transform: none;
-  margin-bottom: 16px;
-  display: block;
-  width: 100%;
-  cursor: var(--pointer);
+    const handleSelect = React.useCallback(
+      async (val: string) => {
+        setOpen(false);
+        onChange(val);
+      },
+      [onChange]
+    );
 
-  &:hover:not(:disabled) {
-    background: ${s("buttonNeutralBackground")};
+    const renderOption = React.useCallback(
+      (option: Option) => {
+        if (option.type === "separator") {
+          return <Separator />;
+        }
+
+        const isSelected = option === selectedOption;
+
+        return (
+          <SelectItemWrapper
+            key={option.value}
+            onClick={() => handleSelect(option.value)}
+            data-state={isSelected ? "checked" : "unchecked"}
+          >
+            <Option option={option} optionsHaveIcon={optionsHaveIcon} />
+            {isSelected && <SelectItemIndicator />}
+          </SelectItemWrapper>
+        );
+      },
+      [handleSelect, selectedOption, optionsHaveIcon]
+    );
+
+    const enablePointerEvents = React.useCallback(() => {
+      if (contentRef.current) {
+        contentRef.current.style.pointerEvents = "auto";
+      }
+    }, []);
+
+    const disablePointerEvents = React.useCallback(() => {
+      if (contentRef.current) {
+        contentRef.current.style.pointerEvents = "none";
+      }
+    }, []);
+
+    return (
+      <Wrapper>
+        <Label text={label} hidden={hideLabel ?? false} />
+        <Drawer open={open} onOpenChange={setOpen}>
+          <DrawerTrigger asChild>
+            <SelectButton
+              ref={ref}
+              {...triggerProps}
+              neutral
+              disclosure
+              data-placeholder={selectedOption ? false : ""}
+            >
+              {selectedOption ? (
+                <Option
+                  option={selectedOption as Item}
+                  optionsHaveIcon={optionsHaveIcon}
+                />
+              ) : (
+                <>{placeholder}</>
+              )}
+            </SelectButton>
+          </DrawerTrigger>
+          <DrawerContent
+            ref={contentRef}
+            aria-label={label}
+            onAnimationStart={disablePointerEvents}
+            onAnimationEnd={enablePointerEvents}
+          >
+            <DrawerTitle hidden={!label}>{label}</DrawerTitle>
+            <StyledScrollable hiddenScrollbars>
+              {options.map(renderOption)}
+            </StyledScrollable>
+          </DrawerContent>
+        </Drawer>
+      </Wrapper>
+    );
   }
+);
+MobileSelect.displayName = "InputSelect";
 
-  ${(props) =>
-    props.$nude &&
-    css`
-      border-color: transparent;
-      box-shadow: none;
-    `}
+function Label({
+  text,
+  hidden,
+  help,
+}: {
+  text: string;
+  hidden: boolean;
+  help?: string;
+}) {
+  const content = (
+    <Flex align="center" gap={2} style={{ marginBottom: "4px" }}>
+      <LabelText style={{ paddingBottom: 0 }}>{text}</LabelText>
+      {help ? (
+        <Tooltip content={help}>
+          <TooltipButton size={18}>
+            <QuestionMarkIcon size={18} />
+          </TooltipButton>
+        </Tooltip>
+      ) : null}
+    </Flex>
+  );
 
-  ${Inner} {
-    line-height: 28px;
-    padding-left: 12px;
-    padding-right: 4px;
-  }
+  return hidden ? (
+    <VisuallyHidden.Root>{content}</VisuallyHidden.Root>
+  ) : (
+    content
+  );
+}
 
-  svg {
-    justify-self: flex-end;
-    margin-left: auto;
-  }
-`;
+function Option({
+  option,
+  optionsHaveIcon,
+}: {
+  option: Item;
+  optionsHaveIcon: boolean;
+}) {
+  const icon = optionsHaveIcon ? (
+    option.icon ? (
+      <IconWrapper>{option.icon}</IconWrapper>
+    ) : (
+      <IconSpacer />
+    )
+  ) : null;
 
-export const StyledSelectOption = styled(SelectOption)`
-  ${MenuAnchorCSS}
-  /* overriding the styles from MenuAnchorCSS because we use &nbsp; here */
-  svg:not(:last-child) {
-    margin-right: 0px;
-  }
-`;
+  return (
+    <OptionContainer align="center">
+      {icon}
+      {option.label}
+      {option.description && (
+        <>
+          &nbsp;
+          <Description type="tertiary" size="small" ellipsis>
+            – {option.description}
+          </Description>
+        </>
+      )}
+    </OptionContainer>
+  );
+}
 
 const Wrapper = styled.label<{ short?: boolean }>`
   display: block;
   max-width: ${(props) => (props.short ? "350px" : "100%")};
 `;
 
-export const Positioner = styled(Position)`
-  pointer-events: all;
+const OptionContainer = styled(Flex)`
+  min-height: 24px;
+`;
 
-  &:focus-visible {
-    ${StyledSelectOption} {
-      &[aria-selected="true"] {
-        color: ${(props) => props.theme.white};
-        background: ${s("accent")};
-        box-shadow: none;
-        cursor: var(--pointer);
-
-        svg {
-          fill: ${(props) => props.theme.white};
-        }
-      }
+const Description = styled(Text)`
+  @media (hover: hover) {
+    &:hover,
+    &:focus {
+      color: ${(props) => transparentize(0.5, props.theme.accentText)};
     }
   }
 `;
 
-export default React.forwardRef(InputSelect);
+const IconWrapper = styled.span`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 24px;
+  height: 24px;
+  margin-left: -4px;
+  margin-right: 4px;
+  overflow: hidden;
+  flex-shrink: 0;
+`;
+
+const IconSpacer = styled.div`
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+`;
+
+const StyledScrollable = styled(Scrollable)`
+  max-height: 75vh;
+`;
+
+const TooltipButton = styled(NudeButton)`
+  color: ${s("textSecondary")};
+
+  &:hover,
+  &[aria-expanded="true"] {
+    background: none !important;
+  }
+`;

app/components/InputSelectNew.tsx

@@ -1,354 +0,0 @@
-import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
-import { transparentize } from "polished";
-import * as React from "react";
-import styled from "styled-components";
-import Text from "~/components/Text";
-import useMobile from "~/hooks/useMobile";
-import Separator from "./ContextMenu/Separator";
-import Flex from "./Flex";
-import { LabelText } from "./Input";
-import Scrollable from "./Scrollable";
-import { IconWrapper } from "./Sidebar/components/SidebarLink";
-import {
-  Drawer,
-  DrawerContent,
-  DrawerTitle,
-  DrawerTrigger,
-} from "./primitives/Drawer";
-import {
-  InputSelectRoot,
-  InputSelectContent,
-  InputSelectItem,
-  InputSelectSeparator,
-  InputSelectTrigger,
-  type TriggerButtonProps,
-} from "./primitives/InputSelect";
-import {
-  SelectItemIndicator,
-  SelectItem as SelectItemWrapper,
-  SelectButton,
-} from "./primitives/components/InputSelect";
-
-type Separator = {
-  /* Denotes a horizontal divider line to be rendered in the menu, */
-  type: "separator";
-};
-
-export type Item = {
-  /* Denotes a selectable option in the menu. */
-  type: "item";
-  /* Representative text shown in the menu for this option. */
-  label: string;
-  /* Actual value of this option. */
-  value: string;
-  /* Additional info shown alongside the label.  */
-  description?: string;
-  /* An icon shown alongside the label.  */
-  icon?: React.ReactElement;
-};
-
-export type Option = Item | Separator;
-
-type Props = {
-  /* Options to display in the select menu. */
-  options: Option[];
-  /* Current chosen value. */
-  value?: string;
-  /* Callback when an option is selected. */
-  onChange: (value: string) => void;
-  /* ARIA label for accessibility. */
-  ariaLabel: string;
-  /* Label for the select menu. */
-  label: string;
-  /* When true, label is hidden in an accessible manner. */
-  hideLabel?: boolean;
-  /* When true, menu is disabled. */
-  disabled?: boolean;
-  /* When true, width of the menu trigger is restricted. Otherwise, takes up the full width of parent. */
-  short?: boolean;
-} & TriggerButtonProps;
-
-export function InputSelectNew(props: Props) {
-  const {
-    options,
-    value,
-    onChange,
-    ariaLabel,
-    label,
-    hideLabel,
-    disabled,
-    short,
-    ...triggerProps
-  } = props;
-
-  const [localValue, setLocalValue] = React.useState(value);
-  const [open, setOpen] = React.useState(false);
-
-  const triggerRef =
-    React.useRef<React.ElementRef<typeof InputSelectTrigger>>(null);
-  const contentRef =
-    React.useRef<React.ElementRef<typeof InputSelectContent>>(null);
-
-  const isMobile = useMobile();
-
-  const placeholder = `Select a ${ariaLabel.toLowerCase()}`;
-  const optionsHaveIcon = options.some(
-    (opt) => opt.type === "item" && !!opt.icon
-  );
-
-  const renderOption = React.useCallback(
-    (option: Option) => {
-      if (option.type === "separator") {
-        return <InputSelectSeparator />;
-      }
-
-      return (
-        <InputSelectItem key={option.value} value={option.value}>
-          <Option option={option} optionsHaveIcon={optionsHaveIcon} />
-        </InputSelectItem>
-      );
-    },
-    [optionsHaveIcon]
-  );
-
-  const onValueChange = React.useCallback(
-    async (val: string) => {
-      setLocalValue(val);
-      onChange(val);
-    },
-    [onChange, setLocalValue]
-  );
-
-  const enablePointerEvents = React.useCallback(() => {
-    if (contentRef.current) {
-      contentRef.current.style.pointerEvents = "auto";
-    }
-  }, []);
-
-  const disablePointerEvents = React.useCallback(() => {
-    if (contentRef.current) {
-      contentRef.current.style.pointerEvents = "none";
-    }
-  }, []);
-
-  React.useEffect(() => {
-    setLocalValue(value);
-  }, [value]);
-
-  if (isMobile) {
-    return (
-      <MobileSelect
-        {...props}
-        value={localValue}
-        onChange={onValueChange}
-        placeholder={placeholder}
-        optionsHaveIcon={optionsHaveIcon}
-      />
-    );
-  }
-
-  return (
-    <Wrapper short={short}>
-      <Label text={label} hidden={hideLabel ?? false} />
-      <InputSelectRoot
-        open={open}
-        onOpenChange={setOpen}
-        value={localValue}
-        onValueChange={onValueChange}
-      >
-        <InputSelectTrigger
-          ref={triggerRef}
-          placeholder={placeholder}
-          {...triggerProps}
-        />
-        <InputSelectContent
-          ref={contentRef}
-          aria-label={ariaLabel}
-          onAnimationStart={disablePointerEvents}
-          onAnimationEnd={enablePointerEvents}
-        >
-          {options.map(renderOption)}
-        </InputSelectContent>
-      </InputSelectRoot>
-    </Wrapper>
-  );
-}
-
-type MobileSelectProps = Props & {
-  placeholder: string;
-  optionsHaveIcon: boolean;
-};
-
-function MobileSelect(props: MobileSelectProps) {
-  const {
-    options,
-    value,
-    onChange,
-    ariaLabel,
-    label,
-    hideLabel,
-    disabled,
-    short,
-    placeholder,
-    optionsHaveIcon,
-    ...triggerProps
-  } = props;
-
-  const [open, setOpen] = React.useState(false);
-  const contentRef = React.useRef<React.ElementRef<typeof DrawerContent>>(null);
-
-  const selectedOption = React.useMemo(
-    () =>
-      value
-        ? options.find((opt) => opt.type === "item" && opt.value === value)
-        : undefined,
-    [value, options]
-  );
-
-  const handleSelect = React.useCallback(
-    async (val: string) => {
-      setOpen(false);
-      onChange(val);
-    },
-    [onChange]
-  );
-
-  const renderOption = React.useCallback(
-    (option: Option) => {
-      if (option.type === "separator") {
-        return <Separator />;
-      }
-
-      const isSelected = option === selectedOption;
-
-      return (
-        <SelectItemWrapper
-          key={option.value}
-          onClick={() => handleSelect(option.value)}
-          data-state={isSelected ? "checked" : "unchecked"}
-        >
-          <Option option={option} optionsHaveIcon={optionsHaveIcon} />
-          {isSelected && <SelectItemIndicator />}
-        </SelectItemWrapper>
-      );
-    },
-    [handleSelect, selectedOption, optionsHaveIcon]
-  );
-
-  const enablePointerEvents = React.useCallback(() => {
-    if (contentRef.current) {
-      contentRef.current.style.pointerEvents = "auto";
-    }
-  }, []);
-
-  const disablePointerEvents = React.useCallback(() => {
-    if (contentRef.current) {
-      contentRef.current.style.pointerEvents = "none";
-    }
-  }, []);
-
-  return (
-    <Wrapper>
-      <Label text={label} hidden={hideLabel ?? false} />
-      <Drawer open={open} onOpenChange={setOpen}>
-        <DrawerTrigger asChild>
-          <SelectButton
-            {...triggerProps}
-            neutral
-            disclosure
-            data-placeholder={selectedOption ? false : ""}
-          >
-            {selectedOption ? (
-              <Option
-                option={selectedOption as Item}
-                optionsHaveIcon={optionsHaveIcon}
-              />
-            ) : (
-              <>{placeholder}</>
-            )}
-          </SelectButton>
-        </DrawerTrigger>
-        <DrawerContent
-          ref={contentRef}
-          aria-label={ariaLabel}
-          onAnimationStart={disablePointerEvents}
-          onAnimationEnd={enablePointerEvents}
-        >
-          <DrawerTitle hidden={!label}>{label ?? ariaLabel}</DrawerTitle>
-          <StyledScrollable hiddenScrollbars>
-            {options.map(renderOption)}
-          </StyledScrollable>
-        </DrawerContent>
-      </Drawer>
-    </Wrapper>
-  );
-}
-
-function Label({ text, hidden }: { text: string; hidden: boolean }) {
-  const labelText = <LabelText>{text}</LabelText>;
-
-  return hidden ? (
-    <VisuallyHidden.Root>{labelText}</VisuallyHidden.Root>
-  ) : (
-    labelText
-  );
-}
-
-function Option({
-  option,
-  optionsHaveIcon,
-}: {
-  option: Item;
-  optionsHaveIcon: boolean;
-}) {
-  const icon = optionsHaveIcon ? (
-    option.icon ? (
-      <IconWrapper>{option.icon}</IconWrapper>
-    ) : (
-      <IconSpacer />
-    )
-  ) : null;
-
-  return (
-    <OptionContainer align="center">
-      {icon}
-      {option.label}
-      {option.description && (
-        <>
-          &nbsp;
-          <Description type="tertiary" size="small" ellipsis>
-            – {option.description}
-          </Description>
-        </>
-      )}
-    </OptionContainer>
-  );
-}
-
-const Wrapper = styled.label<{ short?: boolean }>`
-  display: block;
-  max-width: ${(props) => (props.short ? "350px" : "100%")};
-`;
-
-const OptionContainer = styled(Flex)`
-  min-height: 24px;
-`;
-
-const Description = styled(Text)`
-  @media (hover: hover) {
-    &:hover,
-    &:focus {
-      color: ${(props) => transparentize(0.5, props.theme.accentText)};
-    }
-  }
-`;
-
-const IconSpacer = styled.div`
-  width: 24px;
-  height: 24px;
-  flex-shrink: 0;
-`;
-
-const StyledScrollable = styled(Scrollable)`
-  max-height: 75vh;
-`;

app/components/InputSelectPermission.tsx

@@ -1,54 +1,63 @@
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
-import { $Diff } from "utility-types";
 import { s } from "@shared/styles";
 import { CollectionPermission } from "@shared/types";
+import { InputSelect, Option } from "~/components/InputSelect";
 import { EmptySelectValue } from "~/types";
-import InputSelect, { Props, Option, InputSelectRef } from "./InputSelect";
 
-function InputSelectPermission(
-  props: $Diff<
-    Props,
-    {
-      options: Array<Option>;
-      ariaLabel: string;
-    }
-  >,
-  ref: React.RefObject<InputSelectRef>
-) {
-  const { value, onChange, ...rest } = props;
-  const { t } = useTranslation();
+type Props = {
+  shrink?: boolean;
+} & Pick<
+  React.ComponentProps<typeof InputSelect>,
+  "value" | "onChange" | "disabled" | "hideLabel" | "nude" | "help"
+>;
 
-  return (
-    <Select
-      ref={ref}
-      label={t("Permission")}
-      options={[
+export const InputSelectPermission = React.forwardRef<HTMLButtonElement, Props>(
+  (props, ref) => {
+    const { value, onChange, shrink, ...rest } = props;
+    const { t } = useTranslation();
+
+    const options = React.useMemo<Option[]>(
+      () => [
         {
+          type: "item",
           label: t("View only"),
           value: CollectionPermission.Read,
         },
         {
+          type: "item",
           label: t("Can edit"),
           value: CollectionPermission.ReadWrite,
         },
         {
-          divider: true,
+          type: "separator",
+        },
+        {
+          type: "item",
           label: t("No access"),
           value: EmptySelectValue,
         },
-      ]}
-      ariaLabel={t("Default access")}
-      value={value || EmptySelectValue}
-      onChange={onChange}
-      {...rest}
-    />
-  );
-}
+      ],
+      [t]
+    );
 
-const Select = styled(InputSelect)`
+    return (
+      <Select
+        ref={ref}
+        options={options}
+        value={value || EmptySelectValue}
+        onChange={onChange}
+        label={t("Permission")}
+        $shrink={shrink}
+        {...rest}
+      />
+    );
+  }
+);
+InputSelectPermission.displayName = "InputSelectPermission";
+
+const Select = styled(InputSelect)<{ $shrink?: boolean }>`
   color: ${s("textSecondary")};
+  ${({ $shrink }) => !$shrink && "margin-bottom: 16px;"}
 `;
-
-export default React.forwardRef(InputSelectPermission);

app/components/Menu/DropdownMenu.tsx

@@ -0,0 +1,149 @@
+import * as React from "react";
+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 { ActionV2Variant, ActionV2WithChildren, MenuItem } from "~/types";
+import { toDropdownMenuItems, toMobileMenuItems } from "./transformer";
+
+type Props = {
+  action: ActionV2WithChildren;
+  children: React.ReactNode;
+  align?: "start" | "end";
+  ariaLabel: string;
+  contentAriaLabel?: string;
+};
+
+export function DropdownMenu({
+  action,
+  children,
+  align = "start",
+  ariaLabel,
+  contentAriaLabel,
+}: Props) {
+  const isMobile = useMobile();
+  const contentRef =
+    React.useRef<React.ElementRef<typeof DropdownMenuContent>>(null);
+  const context = useActionContext({
+    isContextMenu: true,
+  });
+  const menuItems = (action.children as ActionV2Variant[]).map((childAction) =>
+    actionV2ToMenuItem(childAction, context)
+  );
+
+  const enablePointerEvents = React.useCallback(() => {
+    if (contentRef.current) {
+      contentRef.current.style.pointerEvents = "auto";
+    }
+  }, []);
+
+  const disablePointerEvents = React.useCallback(() => {
+    if (contentRef.current) {
+      contentRef.current.style.pointerEvents = "none";
+    }
+  }, []);
+
+  if (isMobile) {
+    return (
+      <MobileDropdown
+        items={menuItems}
+        trigger={children}
+        ariaLabel={ariaLabel}
+        contentAriaLabel={contentAriaLabel}
+      />
+    );
+  }
+
+  const content = toDropdownMenuItems(menuItems);
+
+  if (!content) {
+    return null;
+  }
+
+  return (
+    <DropdownMenuRoot>
+      <DropdownMenuTrigger aria-label={ariaLabel}>
+        {children}
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        align={align}
+        aria-label={contentAriaLabel ?? ariaLabel}
+        onAnimationStart={disablePointerEvents}
+        onAnimationEnd={enablePointerEvents}
+      >
+        {content}
+      </DropdownMenuContent>
+    </DropdownMenuRoot>
+  );
+}
+
+type MobileDropdownProps = {
+  items: MenuItem[];
+  trigger: React.ReactNode;
+} & Pick<Props, "ariaLabel" | "contentAriaLabel">;
+
+function MobileDropdown({
+  items,
+  trigger,
+  ariaLabel,
+  contentAriaLabel,
+}: MobileDropdownProps) {
+  const [open, setOpen] = React.useState(false);
+  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(() => {
+    setOpen(false);
+  }, []);
+
+  const content = toMobileMenuItems(items, closeDrawer);
+
+  if (!content) {
+    return null;
+  }
+
+  return (
+    <Drawer open={open} onOpenChange={setOpen}>
+      <DrawerTrigger aria-label={ariaLabel} asChild>
+        {trigger}
+      </DrawerTrigger>
+      <DrawerContent
+        ref={contentRef}
+        aria-label={contentAriaLabel ?? ariaLabel}
+        aria-describedby={undefined}
+        onAnimationStart={disablePointerEvents}
+        onAnimationEnd={enablePointerEvents}
+      >
+        <DrawerTitle>{ariaLabel}</DrawerTitle>
+        <StyledScrollable hiddenScrollbars>{content}</StyledScrollable>
+      </DrawerContent>
+    </Drawer>
+  );
+}
+
+const StyledScrollable = styled(Scrollable)`
+  max-height: 75vh;
+`;

app/components/Menu/OverflowMenuButton.tsx

@@ -0,0 +1,19 @@
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { MoreIcon } from "outline-icons";
+import * as React from "react";
+import NudeButton from "~/components/NudeButton";
+
+type Props = React.ComponentPropsWithoutRef<
+  typeof DropdownMenuPrimitive.Trigger
+> & {
+  className?: string;
+};
+
+export const OverflowMenuButton = React.forwardRef<HTMLButtonElement, Props>(
+  ({ className, ...rest }, ref) => (
+    <NudeButton ref={ref} className={className} {...rest}>
+      <MoreIcon />
+    </NudeButton>
+  )
+);
+OverflowMenuButton.displayName = "OverflowMenuButton";

app/components/Menu/transformer.tsx

@@ -0,0 +1,219 @@
+import {
+  DropdownMenuButton,
+  DropdownMenuExternalLink,
+  DropdownMenuGroup,
+  DropdownMenuInternalLink,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+} from "~/components/primitives/DropdownMenu";
+import {
+  MenuButton,
+  MenuIconWrapper,
+  MenuInternalLink,
+  MenuExternalLink,
+  MenuLabel,
+  MenuSeparator,
+} 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}
+            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 "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) {
+  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>
+          </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 "group": {
+        const groupItems = toMobileMenuItems(item.items, closeMenu);
+
+        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;
+    });
+}

app/components/Modal.tsx

@@ -1,10 +1,9 @@
 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, { DefaultTheme } from "styled-components";
+import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import { depths, s } from "@shared/styles";
 import Flex from "~/components/Flex";
@@ -13,17 +12,13 @@ import Scrollable from "~/components/Scrollable";
 import Text from "~/components/Text";
 import useMobile from "~/hooks/useMobile";
 import usePrevious from "~/hooks/usePrevious";
-import useUnmount from "~/hooks/useUnmount";
 import { fadeAndScaleIn } from "~/styles/animations";
 import Desktop from "~/utils/Desktop";
 import ErrorBoundary from "./ErrorBoundary";
 
-let openModals = 0;
-
 type Props = {
   children?: React.ReactNode;
   isOpen: boolean;
-  fullscreen?: boolean;
   title?: React.ReactNode;
   style?: React.CSSProperties;
   onRequestClose: () => void;
@@ -32,32 +27,14 @@ 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;
   }
@@ -68,23 +45,14 @@ const Modal: React.FC<Props> = ({
       onOpenChange={(open) => !open && onRequestClose()}
     >
       <Dialog.Portal>
-        <StyledOverlay $fullscreen={fullscreen}>
+        <StyledOverlay>
           <StyledContent
             onEscapeKeyDown={onRequestClose}
-            onPointerDownOutside={fullscreen ? undefined : onRequestClose}
+            onPointerDownOutside={onRequestClose}
             aria-describedby={undefined}
           >
-            {fullscreen || isMobile ? (
-              <Fullscreen
-                $nested={!!depth}
-                style={
-                  isMobile
-                    ? undefined
-                    : {
-                        marginLeft: `${depth * 12}px`,
-                      }
-                }
-              >
+            {isMobile ? (
+              <Mobile>
                 <Content>
                   <Centered onClick={(ev) => ev.stopPropagation()} column>
                     {title && (
@@ -102,7 +70,7 @@ const Modal: React.FC<Props> = ({
                   <BackIcon size={32} />
                   <Text>{t("Back")} </Text>
                 </Back>
-              </Fullscreen>
+              </Mobile>
             ) : (
               <Small>
                 <Centered
@@ -131,16 +99,13 @@ const Modal: React.FC<Props> = ({
   );
 };
 
-const StyledOverlay = styled(Dialog.Overlay)<{ $fullscreen?: boolean }>`
+const StyledOverlay = styled(Dialog.Overlay)`
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: ${(props) =>
-    props.$fullscreen
-      ? transparentize(0.25, props.theme.background)
-      : props.theme.modalBackdrop} !important;
+  background-color: ${(props) => props.theme.modalBackdrop} !important;
   z-index: ${depths.overlay};
   transition: opacity 50ms ease-in-out;
   opacity: 0;
@@ -163,12 +128,7 @@ const StyledContent = styled(Dialog.Content)`
   outline: none;
 `;
 
-type FullscreenProps = {
-  $nested: boolean;
-  theme: DefaultTheme;
-};
-
-const Fullscreen = styled.div<FullscreenProps>`
+const Mobile = styled.div`
   animation: ${fadeAndScaleIn} 250ms ease;
 
   position: absolute;
@@ -182,16 +142,6 @@ const Fullscreen = styled.div<FullscreenProps>`
   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)`
@@ -256,7 +206,7 @@ const Header = styled(Flex)`
   align-items: center;
   justify-content: space-between;
   font-weight: 600;
-  padding: 24px 24px 4px;
+  padding: 24px 24px 12px;
 `;
 
 const Small = styled.div`
@@ -290,7 +240,7 @@ const Small = styled.div`
 `;
 
 const SmallContent = styled(Scrollable)`
-  padding: 12px 24px 24px;
+  padding: 8px 24px 24px;
 `;
 
 export default observer(Modal);

app/components/Notifications/NotificationsPopover.tsx

@@ -1,11 +1,12 @@
-import * as Popover from "@radix-ui/react-popover";
-import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
 import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
-import styled from "styled-components";
-import { depths, s } from "@shared/styles";
-import { fadeAndSlideUp } from "~/styles/animations";
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+} from "~/components/primitives/Popover";
+import useStores from "~/hooks/useStores";
 import Notifications from "./Notifications";
 
 type Props = {
@@ -14,13 +15,16 @@ type Props = {
 
 const NotificationsPopover: React.FC = ({ children }: Props) => {
   const { t } = useTranslation();
+  const { notifications } = useStores();
+  const [open, setOpen] = React.useState(false);
   const scrollableRef = React.useRef<HTMLDivElement>(null);
-  const closeRef = React.useRef<HTMLButtonElement>(null);
+
+  React.useEffect(() => {
+    void notifications.fetchPage({});
+  }, [notifications]);
 
   const handleRequestClose = React.useCallback(() => {
-    if (closeRef.current) {
-      closeRef.current.click();
-    }
+    setOpen(false);
   }, []);
 
   const handleAutoFocus = React.useCallback((event: Event) => {
@@ -35,51 +39,22 @@ const NotificationsPopover: React.FC = ({ children }: Props) => {
   }, []);
 
   return (
-    <Popover.Root>
-      <Popover.Trigger asChild>{children}</Popover.Trigger>
-      <Popover.Portal>
-        <StyledContent
-          side="top"
-          align="start"
-          sideOffset={0}
-          avoidCollisions={true}
-          aria-label={t("Notifications")}
-          onOpenAutoFocus={handleAutoFocus}
-        >
-          <Notifications
-            onRequestClose={handleRequestClose}
-            ref={scrollableRef}
-          />
-          <VisuallyHidden>
-            <Popover.Close ref={closeRef} />
-          </VisuallyHidden>
-        </StyledContent>
-      </Popover.Portal>
-    </Popover.Root>
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger>{children}</PopoverTrigger>
+      <PopoverContent
+        aria-label={t("Notifications")}
+        side="top"
+        align="start"
+        onOpenAutoFocus={handleAutoFocus}
+        shrink
+      >
+        <Notifications
+          onRequestClose={handleRequestClose}
+          ref={scrollableRef}
+        />
+      </PopoverContent>
+    </Popover>
   );
 };
 
-const StyledContent = styled(Popover.Content)`
-  z-index: ${depths.menu};
-  display: flex;
-  animation: ${fadeAndSlideUp} 200ms ease;
-  transform-origin: 75% 0;
-  background: ${s("menuBackground")};
-  border-radius: 6px;
-  padding: 6px 0;
-  max-height: 75vh;
-  box-shadow: ${s("menuShadow")};
-  width: 380px;
-  overflow: hidden;
-
-  @media (max-width: 768px) {
-    position: fixed;
-    z-index: ${depths.menu};
-    top: 50px;
-    left: 8px;
-    right: 8px;
-    width: auto;
-  }
-`;
-
 export default observer(NotificationsPopover);

app/components/OAuthClient/OAuthClientForm.tsx

@@ -8,7 +8,6 @@ import ImageInput from "~/scenes/Settings/components/ImageInput";
 import Button from "~/components/Button";
 import Flex from "~/components/Flex";
 import Input, { LabelText } from "~/components/Input";
-import { createSwitchRegister } from "~/utils/forms";
 import isCloudHosted from "~/utils/isCloudHosted";
 import Switch from "../Switch";
 
@@ -116,10 +115,17 @@ export const OAuthClientForm = observer(function OAuthClientForm_({
           )}
         />
         {isCloudHosted && (
-          <Switch
-            {...createSwitchRegister(register, "published")}
-            label={t("Published")}
-            note={t("Allow this app to be installed by other workspaces")}
+          <Controller
+            control={control}
+            name="published"
+            render={({ field }) => (
+              <Switch
+                label={t("Published")}
+                note={t("Allow this app to be installed by other workspaces")}
+                checked={field.value}
+                onChange={field.onChange}
+              />
+            )}
           />
         )}
       </>
@@ -134,8 +140,8 @@ export const OAuthClientForm = observer(function OAuthClientForm_({
               ? `${t("Saving")}…`
               : t("Save")
             : formState.isSubmitting
-            ? `${t("Creating")}…`
-            : t("Create")}
+              ? `${t("Creating")}…`
+              : t("Create")}
         </Button>
       </Flex>
     </form>

app/components/OneTimePasswordInput.tsx

@@ -0,0 +1,59 @@
+import * as OneTimePasswordField from "@radix-ui/react-one-time-password-field";
+import * as React from "react";
+import styled from "styled-components";
+import { s } from "@shared/styles";
+
+type Props = React.ComponentProps<typeof OneTimePasswordRoot> & {
+  /** The length of the OTP */
+  length?: number;
+};
+
+export const OneTimePasswordInput = React.forwardRef(
+  function _OneTimePasswordInput(
+    { length = 6, ...rest }: Props,
+    ref: React.RefObject<HTMLInputElement>
+  ) {
+    return (
+      <OneTimePasswordRoot {...rest}>
+        {Array.from({ length }, (_, i) => (
+          <OneTimePasswordInputField key={i} />
+        ))}
+        <OneTimePasswordField.HiddenInput ref={ref} />
+      </OneTimePasswordRoot>
+    );
+  }
+);
+
+const OneTimePasswordRoot = styled(OneTimePasswordField.Root)`
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+`;
+
+const OneTimePasswordInputField = styled(OneTimePasswordField.Input)`
+  all: unset;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  border-radius: 4px;
+  font-size: 15px;
+  color: ${s("text")};
+  background: ${s("background")};
+  box-shadow: 0 0 0 1px ${s("inputBorder")};
+  padding: 0;
+  height: 38px;
+  width: 38px;
+  line-height: 1;
+  transition: box-shadow 0.1s ease-in-out;
+
+  &:focus {
+    box-shadow: 0 0 0 2px ${s("inputBorderFocused")};
+  }
+  &::selection {
+    background-color: ${s("background")};
+    color: ${s("text")};
+  }
+`;

app/components/PageScroll.tsx

@@ -8,11 +8,18 @@ type Props = {
   children: React.ReactNode;
 };
 
-const MobileWrapper = styled.div`
-  width: 100vw;
-  height: 100vh;
-  overflow: auto;
-  -webkit-overflow-scrolling: touch;
+const StableWrapper = styled.div<{ $shouldApplyMobileStyles: boolean }>`
+  ${({ $shouldApplyMobileStyles }) =>
+    $shouldApplyMobileStyles
+      ? `
+        width: 100vw;
+        height: 100vh;
+        overflow: auto;
+        -webkit-overflow-scrolling: touch;
+      `
+      : `
+        display: contents;
+      `}
 `;
 
 /**
@@ -27,12 +34,17 @@ const PageScroll = ({ children }: Props) => {
   const isPrinting = useMediaQuery("print");
   const ref = React.useRef<HTMLDivElement>(null);
 
-  return isMobile && !isPrinting ? (
-    <ScrollContext.Provider value={ref}>
-      <MobileWrapper ref={ref}>{children}</MobileWrapper>
+  const shouldApplyMobileStyles = isMobile && !isPrinting;
+
+  return (
+    <ScrollContext.Provider value={shouldApplyMobileStyles ? ref : undefined}>
+      <StableWrapper
+        ref={ref}
+        $shouldApplyMobileStyles={shouldApplyMobileStyles}
+      >
+        {children}
+      </StableWrapper>
     </ScrollContext.Provider>
-  ) : (
-    <>{children}</>
   );
 };
 

app/components/PaginatedEventList.tsx

@@ -1,13 +1,18 @@
 import * as React from "react";
 import styled from "styled-components";
 import Document from "~/models/Document";
+import Event from "~/models/Event";
+import Revision from "~/models/Revision";
 import PaginatedList from "~/components/PaginatedList";
-import EventListItem, { type Event } from "./EventListItem";
+import EventListItem from "./EventListItem";
+import RevisionListItem from "./RevisionListItem";
+
+type Item = Revision | Event<Document>;
 
 type Props = {
-  events: Event[];
+  items: Item[];
   document: Document;
-  fetch: (options: Record<string, any> | undefined) => Promise<Event[]>;
+  fetch: (options: Record<string, any> | undefined) => Promise<Item[]>;
   options?: Record<string, any>;
   heading?: React.ReactNode;
   empty?: JSX.Element;
@@ -16,7 +21,7 @@ type Props = {
 const PaginatedEventList = React.memo<Props>(function PaginatedEventList({
   empty,
   heading,
-  events,
+  items,
   fetch,
   options,
   document,
@@ -24,14 +29,18 @@ const PaginatedEventList = React.memo<Props>(function PaginatedEventList({
 }: Props) {
   return (
     <StyledPaginatedList
-      items={events}
+      items={items}
       empty={empty}
       heading={heading}
       fetch={fetch}
       options={options}
-      renderItem={(item: Event) => (
-        <EventListItem key={item.id} event={item} document={document} />
-      )}
+      renderItem={(item: Item) =>
+        item instanceof Revision ? (
+          <RevisionListItem key={item.id} item={item} document={document} />
+        ) : (
+          <EventListItem key={item.id} item={item} document={document} />
+        )
+      }
       renderHeading={(name) => <Heading>{name}</Heading>}
       {...rest}
     />

app/components/PaginatedList.tsx

@@ -150,12 +150,15 @@ const PaginatedList = <T extends PaginatedItem>({
         offset,
         ...options,
       });
+      if (!results) {
+        return;
+      }
 
       if (offset !== 0) {
         setRenderCount((prevCount) => prevCount + limit);
       }
 
-      if (results && (results.length === 0 || results.length < limit)) {
+      if (results.length === 0 || results.length < limit) {
         setAllowLoadMore(false);
       } else {
         setOffset((prevOffset) => prevOffset + limit);
@@ -275,8 +278,8 @@ const PaginatedList = <T extends PaginatedItem>({
               "updatedAt" in item && item.updatedAt
                 ? item.updatedAt
                 : "createdAt" in item && item.createdAt
-                ? item.createdAt
-                : previousHeading;
+                  ? item.createdAt
+                  : previousHeading;
             const currentHeading = dateToHeading(
               currentDate,
               t,
@@ -305,7 +308,10 @@ const PaginatedList = <T extends PaginatedItem>({
       </ArrowKeyNavigation>
       {allowLoadMore && (
         <div style={{ height: "1px" }}>
-          <Waypoint key={renderCount} onEnter={loadMoreResults} />
+          <Waypoint
+            key={items?.length + renderCount}
+            onEnter={loadMoreResults}
+          />
         </div>
       )}
     </React.Fragment>

app/components/PinnedDocuments.tsx

@@ -86,8 +86,8 @@ function PinnedDocuments({
                 overPos === 0
                   ? fractionalIndex(null, overIndex)
                   : activePos > overPos
-                  ? fractionalIndex(prevIndex, overIndex)
-                  : fractionalIndex(overIndex, nextIndex),
+                    ? fractionalIndex(prevIndex, overIndex)
+                    : fractionalIndex(overIndex, nextIndex),
             })
             .catch(() => setItems(existing));
 

app/components/Reactions/ReactionPicker.tsx

@@ -1,15 +1,17 @@
 import { ReactionIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
-import { PopoverDisclosure, usePopoverState } from "reakit";
 import EventBoundary from "@shared/components/EventBoundary";
 import Flex from "~/components/Flex";
 import { createLazyComponent } from "~/components/LazyLoad";
 import NudeButton from "~/components/NudeButton";
 import PlaceholderText from "~/components/PlaceholderText";
-import Popover from "~/components/Popover";
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+} from "~/components/primitives/Popover";
 import useMobile from "~/hooks/useMobile";
-import useOnClickOutside from "~/hooks/useOnClickOutside";
 import useWindowSize from "~/hooks/useWindowSize";
 import Tooltip from "../Tooltip";
 
@@ -20,109 +22,59 @@ const EmojiPanel = createLazyComponent(
 type Props = {
   /** Callback when an emoji is selected by the user. */
   onSelect: (emoji: string) => Promise<void>;
-  /** Callback when the picker is opened. */
-  onOpen?: () => void;
-  /** Callback when the picker is closed. */
-  onClose?: () => void;
   /** Optional classname. */
   className?: string;
   size?: number;
 };
 
-const ReactionPicker: React.FC<Props> = ({
-  onSelect,
-  onOpen,
-  onClose,
-  className,
-  size,
-}) => {
+const ReactionPicker: React.FC<Props> = ({ onSelect, className, size }) => {
   const { t } = useTranslation();
-  const popover = usePopoverState({
-    modal: true,
-    unstable_offset: [0, 0],
-    placement: "bottom-end",
-  });
+  const [open, setOpen] = React.useState(false);
 
   const { width: windowWidth } = useWindowSize();
   const isMobile = useMobile();
 
   const [query, setQuery] = React.useState("");
-  const contentRef = React.useRef<HTMLDivElement | null>(null);
 
   const popoverWidth = isMobile ? windowWidth : 300;
   // In mobile, popover is absolutely positioned to leave 8px on both sides.
   const panelWidth = isMobile ? windowWidth - 16 : popoverWidth;
-  const { toggle, hide } = popover;
-  const handlePopoverButtonClick = React.useCallback(
-    (ev: React.MouseEvent) => {
-      ev.stopPropagation();
-      toggle();
-    },
-    [toggle]
-  );
 
   const handleEmojiSelect = React.useCallback(
     (emoji: string) => {
-      hide();
+      setOpen(false);
       void onSelect(emoji);
     },
-    [hide, onSelect]
-  );
-
-  // Popover open effect
-  React.useEffect(() => {
-    if (popover.visible) {
-      onOpen?.();
-    } else {
-      onClose?.();
-    }
-  }, [popover.visible, onOpen, onClose]);
-
-  // Custom click outside handling rather than using `hideOnClickOutside` from reakit so that we can
-  // prevent event bubbling.
-  useOnClickOutside(
-    contentRef,
-    (event) => {
-      if (
-        popover.visible &&
-        !popover.unstable_disclosureRef.current?.contains(event.target as Node)
-      ) {
-        event.stopPropagation();
-        event.preventDefault();
-        popover.hide();
-      }
-    },
-    { capture: true }
+    [onSelect]
   );
 
   return (
-    <>
-      <PopoverDisclosure {...popover}>
-        {(props) => (
-          <Tooltip content={t("Add reaction")} placement="top">
-            <NudeButton
-              {...props}
-              aria-label={t("Reaction picker")}
-              className={className}
-              onClick={handlePopoverButtonClick}
-              onMouseEnter={() => EmojiPanel.preload()}
-              size={size}
-            >
-              <ReactionIcon size={22} />
-            </NudeButton>
-          </Tooltip>
-        )}
-      </PopoverDisclosure>
-      <Popover
-        {...popover}
-        ref={contentRef}
-        width={popoverWidth}
-        shrink
+    <Popover open={open} onOpenChange={setOpen} modal={true}>
+      <Tooltip content={t("Add reaction")} placement="top">
+        <PopoverTrigger>
+          <NudeButton
+            aria-label={t("Reaction picker")}
+            className={className}
+            onMouseEnter={() => EmojiPanel.preload()}
+            onClick={(e) => e.stopPropagation()}
+            size={size}
+          >
+            <ReactionIcon size={22} />
+          </NudeButton>
+        </PopoverTrigger>
+      </Tooltip>
+      <PopoverContent
         aria-label={t("Reaction picker")}
-        onClick={(e) => e.stopPropagation()}
-        hideOnClickOutside={false}
+        width={popoverWidth}
+        side="bottom"
+        align="end"
+        shrink
+        onCloseAutoFocus={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+        }}
       >
-        {popover.visible && (
+        {open && (
           <React.Suspense fallback={<Placeholder />}>
             <EventBoundary>
               <EmojiPanel.Component
@@ -136,8 +88,8 @@ const ReactionPicker: React.FC<Props> = ({
             </EventBoundary>
           </React.Suspense>
         )}
-      </Popover>
-    </>
+      </PopoverContent>
+    </Popover>
   );
 };
 

app/components/RevisionListItem.tsx

@@ -0,0 +1,176 @@
+import { LocationDescriptor } from "history";
+import { observer } from "mobx-react";
+import { EditIcon, TrashIcon } from "outline-icons";
+import { useCallback, useRef } from "react";
+import { useTranslation } from "react-i18next";
+import { useLocation } from "react-router-dom";
+import styled from "styled-components";
+import EventBoundary from "@shared/components/EventBoundary";
+import { hover } from "@shared/styles";
+import { RevisionHelper } from "@shared/utils/RevisionHelper";
+import Document from "~/models/Document";
+import Revision from "~/models/Revision";
+import { Avatar, AvatarSize } from "~/components/Avatar";
+import Item, { Actions } from "~/components/List/Item";
+import Time from "~/components/Time";
+import { useLocationSidebarContext } from "~/hooks/useLocationSidebarContext";
+import useStores from "~/hooks/useStores";
+import RevisionMenu from "~/menus/RevisionMenu";
+import { 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;
+  item: Revision;
+};
+
+const RevisionListItem = ({ item, document, ...rest }: Props) => {
+  const { t } = useTranslation();
+  const { revisions } = useStores();
+  const location = useLocation();
+  const sidebarContext = useLocationSidebarContext();
+  const revisionLoadedRef = useRef(false);
+
+  const isLatestRevision = RevisionHelper.latestId(document.id) === item.id;
+
+  const ref = useRef<HTMLAnchorElement>(null);
+
+  // the time component tends to steal focus when clicked
+  // ...so forward the focus back to the parent item
+  const handleTimeClick = () => {
+    ref.current?.focus();
+  };
+
+  const prefetchRevision = useCallback(async () => {
+    if (!document.isDeleted && !item.deletedAt && !revisionLoadedRef.current) {
+      if (isLatestRevision) {
+        return;
+      }
+      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;
+
+  if (item.deletedAt) {
+    icon = <TrashIcon />;
+    meta = t("Revision deleted");
+  } else {
+    icon = <EditIcon size={16} />;
+    meta = isLatestRevision ? (
+      <>
+        {t("Current version")} &middot; {item.createdBy?.name}
+      </>
+    ) : (
+      t("{{userName}} edited", { userName: item.createdBy?.name })
+    );
+    to = {
+      pathname: documentHistoryPath(
+        document,
+        isLatestRevision ? "latest" : item.id
+      ),
+      state: {
+        sidebarContext,
+        retainScrollPosition: true,
+      },
+    };
+  }
+
+  const isActive =
+    typeof to === "string"
+      ? location.pathname === to
+      : location.pathname === to?.pathname;
+
+  if (document.isDeleted) {
+    to = undefined;
+  }
+
+  if (item.deletedAt) {
+    return (
+      <EventItem>
+        <IconWrapper size="xsmall" type="secondary">
+          {icon}
+        </IconWrapper>
+        <Text size="xsmall" type="secondary">
+          {meta} &middot;{" "}
+          <Time dateTime={item.deletedAt} relative shorten addSuffix />
+        </Text>
+      </EventItem>
+    );
+  }
+
+  return (
+    <RevisionItem
+      small
+      exact
+      to={to}
+      title={
+        <Time
+          dateTime={item.createdAt}
+          format={{
+            en_US: "MMM do, h:mm a",
+            fr_FR: "'Le 'd MMMM 'à' H:mm",
+          }}
+          relative={false}
+          addSuffix
+          onClick={handleTimeClick}
+        />
+      }
+      image={
+        item.collaborators ? (
+          <Facepile users={item.collaborators} limit={3} />
+        ) : (
+          <Avatar model={item.createdBy} size={AvatarSize.Large} />
+        )
+      }
+      subtitle={meta}
+      actions={
+        isActive ? (
+          <StyledEventBoundary>
+            <RevisionMenu document={document} revisionId={item.id} />
+          </StyledEventBoundary>
+        ) : undefined
+      }
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      ref={ref}
+      {...rest}
+    />
+  );
+};
+
+const IconWrapper = styled(Text)`
+  height: 24px;
+  min-width: 24px;
+`;
+
+const StyledEventBoundary = styled(EventBoundary)`
+  height: 24px;
+`;
+
+const RevisionItem = styled(Item)`
+  border: 0;
+  position: relative;
+  margin: 8px 0;
+  padding: 8px;
+  border-radius: 8px;
+
+  ${lineStyle}
+
+  ${Actions} {
+    opacity: 0.5;
+
+    &: ${hover} {
+      opacity: 1;
+    }
+  }
+`;
+
+export default observer(RevisionListItem);

app/components/SearchActions.ts

@@ -1,13 +1,24 @@
 import { useKBar } from "kbar";
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
+import { Minute } from "@shared/utils/time";
 import { searchDocumentsForQuery } from "~/actions/definitions/documents";
 import { navigateToRecentSearchQuery } from "~/actions/definitions/navigation";
-
 import useCommandBarActions from "~/hooks/useCommandBarActions";
 import useStores from "~/hooks/useStores";
 
+// Type for cache entries
+interface CacheEntry {
+  timestamp: number;
+}
+
+// Cache configuration
+const cacheTTL = Minute.ms * 5;
+
 export default function SearchActions() {
-  const { searches } = useStores();
+  const { searches, documents } = useStores();
+
+  // Cache structure: Map of search queries to timestamp of last search
+  const searchCache = useRef<Map<string, CacheEntry>>(new Map());
 
   useEffect(() => {
     if (!searches.isLoaded && !searches.isFetching) {
@@ -21,6 +32,23 @@ export default function SearchActions() {
     searchQuery: state.searchQuery,
   }));
 
+  // Search for matching documents
+  useEffect(() => {
+    if (searchQuery) {
+      const now = Date.now();
+      const cachedEntry = searchCache.current.get(searchQuery);
+      const isExpired = cachedEntry
+        ? now - cachedEntry.timestamp > cacheTTL
+        : true;
+
+      if (!cachedEntry || isExpired) {
+        void documents.searchTitles({ query: searchQuery }).then(() => {
+          searchCache.current.set(searchQuery, { timestamp: now });
+        });
+      }
+    }
+  }, [documents, searchQuery]);
+
   useCommandBarActions(
     searchQuery ? [searchDocumentsForQuery(searchQuery)] : [],
     [searchQuery]

app/components/Sharing/Collection/AccessControlList.tsx

@@ -9,7 +9,7 @@ import { CollectionPermission } from "@shared/types";
 import Collection from "~/models/Collection";
 import { Avatar, GroupAvatar, AvatarSize } from "~/components/Avatar";
 import InputMemberPermissionSelect from "~/components/InputMemberPermissionSelect";
-import InputSelectPermission from "~/components/InputSelectPermission";
+import { InputSelectPermission } from "~/components/InputSelectPermission";
 import Scrollable from "~/components/Scrollable";
 import useMaxHeight from "~/hooks/useMaxHeight";
 import usePolicy from "~/hooks/usePolicy";
@@ -121,7 +121,6 @@ export const AccessControlList = observer(
               actions={
                 <div style={{ marginRight: -8 }}>
                   <InputSelectPermission
-                    style={{ margin: 0 }}
                     onChange={(
                       value: CollectionPermission | typeof EmptySelectValue
                     ) => {
@@ -131,8 +130,9 @@ export const AccessControlList = observer(
                     }}
                     disabled={!can.update}
                     value={collection?.permission}
-                    labelHidden
+                    hideLabel
                     nude
+                    shrink
                   />
                 </div>
               }
@@ -161,7 +161,6 @@ export const AccessControlList = observer(
                   actions={
                     <div style={{ marginRight: -8 }}>
                       <InputMemberPermissionSelect
-                        style={{ margin: 0 }}
                         permissions={permissions}
                         onChange={async (
                           permission:
@@ -189,8 +188,6 @@ export const AccessControlList = observer(
                         }}
                         disabled={!can.update}
                         value={membership.permission}
-                        labelHidden
-                        nude
                       />
                     </div>
                   }
@@ -215,7 +212,6 @@ export const AccessControlList = observer(
                   actions={
                     <div style={{ marginRight: -8 }}>
                       <InputMemberPermissionSelect
-                        style={{ margin: 0 }}
                         permissions={permissions}
                         onChange={async (
                           permission:
@@ -243,8 +239,6 @@ export const AccessControlList = observer(
                         }}
                         disabled={!can.update}
                         value={membership.permission}
-                        labelHidden
-                        nude
                       />
                     </div>
                   }

app/components/Sharing/Document/DocumentMemberList.tsx

@@ -160,7 +160,6 @@ function DocumentMembersList({ document, invitedInSession }: Props) {
               actions={
                 <div style={{ marginRight: -8 }}>
                   <InputMemberPermissionSelect
-                    style={{ margin: 0 }}
                     permissions={permissions}
                     onChange={async (
                       permission: DocumentPermission | typeof EmptySelectValue
@@ -180,8 +179,6 @@ function DocumentMembersList({ document, invitedInSession }: Props) {
                     }}
                     disabled={!can.manageUsers}
                     value={membership.permission}
-                    labelHidden
-                    nude
                   />
                 </div>
               }

app/components/Sharing/Document/PublicAccess.tsx

@@ -129,7 +129,7 @@ function PublicAccess({ document, share, sharedParent }: Props) {
 
   const shareUrl = sharedParent?.url
     ? `${sharedParent.url}${document.url}`
-    : share?.url ?? "";
+    : (share?.url ?? "");
 
   const copyButton = (
     <Tooltip content={t("Copy public link")} placement="top">

app/components/Sharing/components/PermissionAction.tsx

@@ -30,8 +30,6 @@ export function PermissionAction({
           permissions={permissions}
           onChange={onChange}
           value={permission}
-          labelHidden
-          nude
         />
         <ButtonSmall action={action} context={context}>
           {t("Add")}

app/components/Sharing/components/Suggestions.tsx

@@ -97,8 +97,8 @@ export const Suggestions = observer(
               .notInDocument(document.id, query)
               .filter((u) => u.id !== user.id)
           : collection
-          ? users.notInCollection(collection.id, query)
-          : users.activeOrInvited
+            ? users.notInCollection(collection.id, query)
+            : users.activeOrInvited
       ).filter((u) => !u.isSuspended);
 
       if (isEmail(query)) {
@@ -109,8 +109,8 @@ export const Suggestions = observer(
         ...(document
           ? groups.notInDocument(document.id, query)
           : collection
-          ? groups.notInCollection(collection.id, query)
-          : []),
+            ? groups.notInCollection(collection.id, query)
+            : []),
         ...filtered,
       ];
     }, [
@@ -133,7 +133,7 @@ export const Suggestions = observer(
           .map((id) =>
             isEmail(id)
               ? getSuggestionForEmail(id)
-              : users.get(id) ?? groups.get(id)
+              : (users.get(id) ?? groups.get(id))
           )
           .filter(Boolean) as User[],
       [users, groups, getSuggestionForEmail, pendingIds]
@@ -158,8 +158,8 @@ export const Suggestions = observer(
         subtitle: suggestion.email
           ? suggestion.email
           : suggestion.isViewer
-          ? t("Viewer")
-          : t("Editor"),
+            ? t("Viewer")
+            : t("Editor"),
         image: <Avatar model={suggestion} size={AvatarSize.Medium} />,
       };
     }

app/components/Sidebar/Shared.tsx

@@ -121,7 +121,9 @@ const ToggleWrapper = styled.div`
   right: 0;
   opacity: 0;
   transform: translateX(10px);
-  transition: opacity 100ms ease-out, transform 100ms ease-out;
+  transition:
+    opacity 100ms ease-out,
+    transform 100ms ease-out;
 `;
 
 const StyledSidebar = styled(Sidebar)<{ $hoverTransition: boolean }>`

app/components/Sidebar/Sidebar.tsx

@@ -294,8 +294,8 @@ const hoverStyles = (props: ContainerProps) => `
     props.$collapsed
       ? "rgba(0, 0, 0, 0.2) 1px 0 4px"
       : props.$isSmallerThanMinimum
-      ? "rgba(0, 0, 0, 0.1) inset -1px 0 2px"
-      : "none"
+        ? "rgba(0, 0, 0, 0.1) inset -1px 0 2px"
+        : "none"
   };
 
   ${ToggleButton} {
@@ -309,7 +309,9 @@ const Container = styled(Flex)<ContainerProps>`
   bottom: 0;
   width: 100%;
   background: ${s("sidebarBackground")};
-  transition: box-shadow 150ms ease-in-out, transform 150ms ease-out,
+  transition:
+    box-shadow 150ms ease-in-out,
+    transform 150ms ease-out,
     ${(props: ContainerProps) =>
       props.$isAnimating ? `,width ${ANIMATION_MS}ms ease-out` : ""};
   transform: translateX(

app/components/Sidebar/components/CollectionLinkChildren.tsx

@@ -19,6 +19,9 @@ import Folder from "./Folder";
 import PlaceholderCollections from "./PlaceholderCollections";
 import SidebarLink from "./SidebarLink";
 
+// The number of child documents to initially render
+const DEFAULT_PAGE_SIZE = 50;
+
 type Props = {
   /** The collection to render the children of. */
   collection: Collection;
@@ -33,18 +36,11 @@ function CollectionLinkChildren({
   expanded,
   prefetchDocument,
 }: Props) {
-  const pageSize = 250;
+  const pageSize = DEFAULT_PAGE_SIZE;
   const { documents } = useStores();
   const { t } = useTranslation();
   const childDocuments = useCollectionDocuments(collection, documents.active);
   const [showing, setShowing] = useState(pageSize);
-  const dummyRef = useRef<HTMLDivElement>(null);
-
-  const [{ isOver, canDrop }, dropRef] = useDropToChangeCollection(
-    collection,
-    noop,
-    dummyRef
-  );
 
   useEffect(() => {
     if (!expanded) {
@@ -60,9 +56,7 @@ function CollectionLinkChildren({
 
   return (
     <Folder expanded={expanded}>
-      {canDrop && collection.isManualSort && (
-        <DropCursor isActiveDrop={isOver} innerRef={dropRef} position="top" />
-      )}
+      <DynamicDropCursor collection={collection} />
       <DocumentsLoader collection={collection} enabled={expanded}>
         {!childDocuments && (
           <ResizingHeightContainer hideOverflow>
@@ -92,12 +86,33 @@ function CollectionLinkChildren({
             depth={2}
           />
         )}
-        <Waypoint key={showing} onEnter={showMore} fireOnRapidScroll />
+        {childDocuments && (
+          <Waypoint key={showing} onEnter={showMore} fireOnRapidScroll />
+        )}
       </DocumentsLoader>
     </Folder>
   );
 }
 
+const DynamicDropCursor = observer(
+  ({ collection }: { collection: Collection }) => {
+    const dummyRef = useRef<HTMLDivElement>(null);
+    const [{ isOver, canDrop }] = useDropToChangeCollection(
+      collection,
+      noop,
+      dummyRef
+    );
+
+    if (!canDrop || !collection.isManualSort) {
+      return null;
+    }
+
+    return (
+      <DropCursor isActiveDrop={isOver} innerRef={dummyRef} position="top" />
+    );
+  }
+);
+
 const Loading = styled(PlaceholderCollections)`
   margin-left: 44px;
   min-height: 90px;

app/components/Sidebar/components/Disclosure.tsx

@@ -54,7 +54,10 @@ const Button = styled(NudeButton)<{ $root?: boolean }>`
 const StyledCollapsedIcon = styled(CollapsedIcon)<{
   expanded?: boolean;
 }>`
-  transition: opacity 100ms ease, transform 100ms ease, fill 50ms !important;
+  transition:
+    opacity 100ms ease,
+    transform 100ms ease,
+    fill 50ms !important;
   ${(props) => !props.expanded && "transform: rotate(-90deg);"};
 `;
 

app/components/Sidebar/components/DocumentLink.tsx

@@ -145,11 +145,50 @@ function InnerDocumentLink(
     },
     [documents, document]
   );
+  const handleRename = React.useCallback(() => {
+    editableTitleRef.current?.setIsEditing(true);
+  }, []);
+
+  const toPath = React.useMemo(
+    () => ({
+      pathname: node.url,
+      state: {
+        title: node.title,
+        sidebarContext,
+      },
+    }),
+    [node.url, node.title, sidebarContext]
+  );
+
+  const isActiveCheck = React.useCallback(
+    (
+      match,
+      location: Location<{
+        sidebarContext?: SidebarContextType;
+      }>
+    ) => {
+      if (sidebarContext !== location.state?.sidebarContext) {
+        return false;
+      }
+      return (
+        (document && location.pathname.endsWith(document.urlId)) || !!match
+      );
+    },
+    [sidebarContext, document]
+  );
+
   const [menuOpen, handleMenuOpen, handleMenuClose] = useBoolean();
   const isMoving = documents.movingDocumentId === node.id;
   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, color]
+  );
 
   // Draggable
   const [{ isDragging }, drag] = useDragDocument(
@@ -284,14 +323,8 @@ function InnerDocumentLink(
                 expanded={hasChildren ? isExpanded : undefined}
                 onDisclosureClick={handleDisclosureClick}
                 onClickIntent={handlePrefetch}
-                to={{
-                  pathname: node.url,
-                  state: {
-                    title: node.title,
-                    sidebarContext,
-                  },
-                }}
-                icon={icon && <Icon value={icon} color={color} />}
+                to={toPath}
+                icon={iconElement}
                 label={
                   <EditableTitle
                     title={title}
@@ -303,20 +336,7 @@ function InnerDocumentLink(
                     ref={editableTitleRef}
                   />
                 }
-                isActive={(
-                  match,
-                  location: Location<{
-                    sidebarContext?: SidebarContextType;
-                  }>
-                ) => {
-                  if (sidebarContext !== location.state?.sidebarContext) {
-                    return false;
-                  }
-                  return (
-                    (document && location.pathname.endsWith(document.urlId)) ||
-                    !!match
-                  );
-                }}
+                isActive={isActiveCheck}
                 isActiveDrop={isOverReparent && canDropToReparent}
                 depth={depth}
                 exact={false}
@@ -347,9 +367,7 @@ function InnerDocumentLink(
                       )}
                       <DocumentMenu
                         document={document}
-                        onRename={() =>
-                          editableTitleRef.current?.setIsEditing(true)
-                        }
+                        onRename={handleRename}
                         onOpen={handleMenuOpen}
                         onClose={handleMenuClose}
                       />

app/components/Sidebar/components/Header.tsx

@@ -91,7 +91,10 @@ const Button = styled.button`
 `;
 
 const Disclosure = styled(CollapsedIcon)<{ expanded?: boolean }>`
-  transition: opacity 100ms ease, transform 100ms ease, fill 50ms !important;
+  transition:
+    opacity 100ms ease,
+    transform 100ms ease,
+    fill 50ms !important;
   ${({ expanded }) => !expanded && "transform: rotate(-90deg);"};
   opacity: 0;
 `;

app/components/Sidebar/components/SidebarButton.tsx

@@ -1,7 +1,8 @@
 import { MoreIcon } from "outline-icons";
 import * as React from "react";
 import styled from "styled-components";
-import { extraArea, s } from "@shared/styles";
+import { extraArea, hover, s } from "@shared/styles";
+import { isMobile } from "@shared/utils/browser";
 import Flex from "~/components/Flex";
 import Text from "~/components/Text";
 import { draggableOnDesktop, undraggableOnDesktop } from "~/styles";
@@ -82,12 +83,12 @@ const Button = styled(Flex)<{
   flex: 1;
   color: ${s("textTertiary")};
   align-items: center;
-  padding: 4px;
+  padding: ${isMobile() ? 12 : 4}px 4px;
   font-size: 15px;
   font-weight: 500;
   border-radius: 4px;
   border: 0;
-  margin: ${(props) => (props.$position === "top" ? 16 : 8)}px 0;
+  margin: ${(props) => (!isMobile() && props.$position === "top" ? 16 : 8)}px 0;
   background: none;
   flex-shrink: 0;
 
@@ -102,7 +103,7 @@ const Button = styled(Flex)<{
   ${extraArea(4)}
 
   &:active,
-  &:hover,
+  &:${hover},
   &[aria-expanded="true"] {
     color: ${s("sidebarText")};
     background: ${s("sidebarActiveBackground")};

app/components/Sidebar/components/SidebarLink.tsx

@@ -4,9 +4,10 @@ import styled, { useTheme, css } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import EventBoundary from "@shared/components/EventBoundary";
 import { s } from "@shared/styles";
+import { isMobile } from "@shared/utils/browser";
 import NudeButton from "~/components/NudeButton";
 import { UnreadBadge } from "~/components/UnreadBadge";
-import useUnmount from "~/hooks/useUnmount";
+import useClickIntent from "~/hooks/useClickIntent";
 import { undraggableOnDesktop } from "~/styles";
 import Disclosure from "./Disclosure";
 import NavLink, { Props as NavLinkProps } from "./NavLink";
@@ -61,8 +62,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`,
@@ -79,28 +80,6 @@ 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
@@ -196,7 +175,7 @@ const Link = styled(NavLink)<{
   position: relative;
   text-overflow: ellipsis;
   font-weight: 475;
-  padding: 6px 16px;
+  padding: ${isMobile() ? 12 : 6}px 16px;
   border-radius: 4px;
   min-height: 32px;
   user-select: none;

app/components/Sidebar/hooks/useDragAndDrop.tsx

@@ -189,7 +189,7 @@ export function useDragDocument(
         depth,
         icon: icon ? <Icon value={icon} color={color} /> : undefined,
         collectionId: document?.collectionId || "",
-      } as DragObject),
+      }) as DragObject,
     canDrag: () => !!document?.isActive && !isEditing,
     collect: (monitor) => ({
       isDragging: monitor.isDragging(),
@@ -505,7 +505,7 @@ export function useDragMembership(
         id,
         title,
         icon,
-      } as DragObject),
+      }) as DragObject,
     collect: (monitor) => ({
       isDragging: !!monitor.isDragging(),
     }),

app/components/Star.tsx

@@ -52,10 +52,10 @@ function Star({ size, document, collection, color, ...rest }: Props) {
             ? unstarCollection
             : starCollection
           : document
-          ? document.isStarred
-            ? unstarDocument
-            : starDocument
-          : undefined
+            ? document.isStarred
+              ? unstarDocument
+              : starDocument
+            : undefined
       }
       size={size}
       {...rest}

app/components/Table.tsx

@@ -383,7 +383,7 @@ const TD = styled.span`
     right: 0;
   }
 
-  ${NudeButton} {
+  ${NudeButton}[aria-haspopup="menu"] {
     &:hover,
     &[aria-expanded="true"] {
       background: ${s("sidebarControlHoverBackground")};

app/components/TemplatizeDialog/SelectLocation.tsx

@@ -4,13 +4,12 @@ import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
 import { AvatarSize } from "~/components/Avatar";
 import CollectionIcon from "~/components/Icons/CollectionIcon";
-import InputSelect, { Option } from "~/components/InputSelect";
+import { InputSelect, Option } from "~/components/InputSelect";
 import TeamLogo from "~/components/TeamLogo";
 import useCurrentTeam from "~/hooks/useCurrentTeam";
 import usePolicy from "~/hooks/usePolicy";
 import useRequest from "~/hooks/useRequest";
 import useStores from "~/hooks/useStores";
-import Label from "./Label";
 
 type Props = {
   /** Collection ID to select by default. */
@@ -37,13 +36,10 @@ const SelectLocation = ({ defaultCollectionId, onSelect }: Props) => {
 
   const workspaceOption: Option | null = can.createTemplate
     ? {
-        label: (
-          <Label
-            icon={<TeamLogo model={team} size={AvatarSize.Toast} />}
-            value={t("Workspace")}
-          />
-        ),
+        type: "item",
+        label: t("Workspace"),
         value: "workspace",
+        icon: <TeamLogo model={team} size={AvatarSize.Toast} />,
       }
     : null;
 
@@ -54,13 +50,10 @@ const SelectLocation = ({ defaultCollectionId, onSelect }: Props) => {
 
         if (canCollection.createDocument) {
           memo.push({
-            label: (
-              <Label
-                icon={<CollectionIcon collection={collection} />}
-                value={collection.name}
-              />
-            ),
+            type: "item",
+            label: collection.name,
             value: collection.id,
+            icon: <CollectionIcon collection={collection} />,
           });
         }
 
@@ -71,16 +64,7 @@ const SelectLocation = ({ defaultCollectionId, onSelect }: Props) => {
 
   const options: Option[] = workspaceOption
     ? collectionOptions.length
-      ? [
-          workspaceOption,
-          ...collectionOptions.map((opt, idx) => {
-            if (idx !== 0) {
-              return opt;
-            }
-            opt.divider = true;
-            return opt;
-          }),
-        ]
+      ? [workspaceOption, { type: "separator" }, ...collectionOptions]
       : [workspaceOption]
     : collectionOptions;
 
@@ -101,10 +85,9 @@ const SelectLocation = ({ defaultCollectionId, onSelect }: Props) => {
 
   return (
     <InputSelect
-      value={defaultCollectionId ?? "workspace"}
       options={options}
+      value={defaultCollectionId ?? "workspace"}
       onChange={handleSelection}
-      ariaLabel={t("Location")}
       label={t("Location")}
     />
   );

app/components/WebsocketProvider.tsx

@@ -285,7 +285,8 @@ class WebsocketProvider extends Component<Props> {
     this.socket.on(
       "documents.archive",
       action((event: PartialExcept<Document, "id">) => {
-        documents.addToArchive(event as Document);
+        const model = documents.add(event);
+        documents.addToArchive(model);
 
         if (event.collectionId) {
           const collection = collections.get(event.collectionId);

app/components/primitives/Drawer.tsx

@@ -79,6 +79,8 @@ const StyledContent = styled(DrawerPrimitive.Content)`
   border-radius: 6px;
 
   background: ${s("menuBackground")};
+
+  animation-duration: 0.3s;
 `;
 
 const TitleWrapper = styled(Flex)`

app/components/primitives/DropdownMenu.tsx

@@ -0,0 +1,207 @@
+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 { fadeAndScaleIn } from "~/styles/animations";
+import {
+  MenuButton,
+  MenuExternalLink,
+  MenuHeader,
+  MenuInternalLink,
+  MenuLabel,
+  MenuSeparator,
+} from "./components/Menu";
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+
+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} asChild>
+        <StyledScrollable hiddenScrollbars>{children}</StyledScrollable>
+      </DropdownMenuPrimitive.Content>
+    </DropdownMenuPrimitive.Portal>
+  );
+});
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.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;
+  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, disabled, dangerous, onClick, ...rest } = props;
+
+  return (
+    <DropdownMenuPrimitive.Item ref={ref} {...rest} asChild>
+      <MenuButton disabled={disabled} $dangerous={dangerous} onClick={onClick}>
+        {icon}
+        <MenuLabel>{label}</MenuLabel>
+      </MenuButton>
+    </DropdownMenuPrimitive.Item>
+  );
+});
+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} {...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} {...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: 75vh;
+  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,
+};

app/components/primitives/InputSelect.tsx

@@ -30,11 +30,11 @@ const InputSelectTrigger = React.forwardRef<
   React.ElementRef<typeof InputSelectPrimitive.Trigger>,
   InputSelectTriggerProps
 >((props, ref) => {
-  const { placeholder, children, ...buttonProps } = props;
+  const { placeholder, children, nude, ...buttonProps } = props;
 
   return (
     <InputSelectPrimitive.Trigger ref={ref} asChild>
-      <SelectButton neutral disclosure {...buttonProps}>
+      <SelectButton neutral disclosure $nude={nude} {...buttonProps}>
         <InputSelectPrimitive.Value placeholder={placeholder} />
       </SelectButton>
     </InputSelectPrimitive.Trigger>

app/components/primitives/Popover.tsx

@@ -0,0 +1,119 @@
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import * as React from "react";
+import { mergeRefs } from "react-merge-refs";
+import styled from "styled-components";
+import { depths, s } from "@shared/styles";
+import { fadeAndScaleIn } from "~/styles/animations";
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Trigger>
+>((props, ref) => {
+  const { children, ...rest } = props;
+  return (
+    <PopoverPrimitive.Trigger ref={ref} {...rest} asChild>
+      {children}
+    </PopoverPrimitive.Trigger>
+  );
+});
+PopoverTrigger.displayName = PopoverPrimitive.Trigger.displayName;
+
+type ContentProps = {
+  /** 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;
+  /** Whether the popover should be scrollable, defaults to true. */
+  scrollable?: boolean;
+  /** Shrink the padding of the popover */
+  shrink?: boolean;
+} & React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>;
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  ContentProps
+>((props, forwardedRef) => {
+  const ref = React.useRef<React.ElementRef<typeof PopoverPrimitive.Content>>();
+
+  const {
+    width = 380,
+    minWidth,
+    scrollable = true,
+    shrink = false,
+    sideOffset = 4,
+    children,
+    ...rest
+  } = props;
+
+  const enablePointerEvents = React.useCallback(() => {
+    if (ref.current) {
+      ref.current.style.pointerEvents = "auto";
+    }
+  }, []);
+
+  const disablePointerEvents = React.useCallback(() => {
+    if (ref.current) {
+      ref.current.style.pointerEvents = "none";
+    }
+  }, []);
+
+  return (
+    <PopoverPrimitive.Portal>
+      <StyledContent
+        ref={mergeRefs([ref, forwardedRef])}
+        sideOffset={sideOffset}
+        $width={width}
+        $minWidth={minWidth}
+        $scrollable={scrollable}
+        $shrink={shrink}
+        onAnimationStart={disablePointerEvents}
+        onAnimationEnd={enablePointerEvents}
+        {...rest}
+      >
+        {children}
+      </StyledContent>
+    </PopoverPrimitive.Portal>
+  );
+});
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+type StyledContentProps = {
+  $width?: number;
+  $minWidth?: number;
+  $scrollable: boolean;
+  $shrink: boolean;
+};
+
+const StyledContent = styled(PopoverPrimitive.Content)<StyledContentProps>`
+  z-index: ${depths.modal};
+  max-height: var(--radix-popover-content-available-height);
+  transform-origin: var(--radix-popover-content-transform-origin);
+
+  background: ${s("menuBackground")};
+  box-shadow: ${s("menuShadow")};
+  border-radius: 6px;
+  outline: none;
+
+  padding: ${({ $shrink }) => ($shrink ? "6px 0" : "12px 24px")};
+
+  ${({ $width }) => $width && `width: ${$width}px`};
+  ${({ $minWidth }) => $minWidth && `min-width: ${$minWidth}px`};
+
+  ${({ $scrollable }) =>
+    $scrollable
+      ? `
+      		overflow-x: hidden;
+      		overflow-y: auto;
+    		`
+      : `
+      		overflow: hidden;
+    		`}
+
+  &[data-state="open"] {
+    animation: ${fadeAndScaleIn} 150ms cubic-bezier(0.08, 0.82, 0.17, 1); // ease-out-circ
+  }
+`;
+
+export { Popover, PopoverTrigger, PopoverContent };

app/components/primitives/components/Menu.tsx

@@ -0,0 +1,113 @@
+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)};
+  }
+
+  ${(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 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 MenuIconWrapper = styled.span`
+  width: 24px;
+  height: 24px;
+  margin-right: 6px;
+  margin-left: -4px;
+  color: ${s("textSecondary")};
+  flex-shrink: 0;
+`;

app/components/withStores.tsx

@@ -10,7 +10,7 @@ function withStores<
   ResolvedProps = JSX.LibraryManagedAttributes<
     P,
     Omit<React.ComponentProps<P>, StoreProps>
-  >
+  >,
 >(WrappedComponent: P): React.FC<ResolvedProps> {
   const ComponentWithStore = (props: ResolvedProps) => {
     const stores = useStores();

app/editor/components/EmbedLinkEditor.tsx

@@ -0,0 +1,123 @@
+import { OpenIcon, TrashIcon } from "outline-icons";
+import { Node } from "prosemirror-model";
+import { Selection, TextSelection } from "prosemirror-state";
+import { EditorView } from "prosemirror-view";
+import { useCallback, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+import styled from "styled-components";
+import { getMatchingEmbed } from "@shared/editor/lib/embeds";
+import Flex from "~/components/Flex";
+import Tooltip from "~/components/Tooltip";
+import Input from "~/editor/components/Input";
+import { Dictionary } from "~/hooks/useDictionary";
+import useEmbeds from "~/hooks/useEmbeds";
+import ToolbarButton from "./ToolbarButton";
+
+type Props = {
+  node: Node;
+  view: EditorView;
+  dictionary: Dictionary;
+};
+
+export function EmbedLinkEditor({ node, view, dictionary }: Props) {
+  const { t } = useTranslation();
+  const embeds = useEmbeds();
+
+  const url = node.attrs.href as string;
+  const [localUrl, setLocalUrl] = useState(url);
+
+  const moveSelectionToEnd = useCallback(() => {
+    const { state, dispatch } = view;
+
+    const nextSelection = Selection.findFrom(
+      state.tr.doc.resolve(state.selection.from),
+      1,
+      true
+    );
+    const selection = nextSelection ?? TextSelection.create(state.tr.doc, 0);
+
+    dispatch(state.tr.setSelection(selection));
+    view.focus();
+  }, [view]);
+
+  const openEmbed = useCallback(() => {
+    window.open(url, "_blank");
+  }, [url]);
+
+  const removeEmbed = useCallback(() => {
+    const { state, dispatch } = view;
+    dispatch(state.tr.deleteSelection());
+  }, [view]);
+
+  const updateEmbed = useCallback(() => {
+    const matchingEmbed = getMatchingEmbed(embeds, localUrl);
+
+    if (!matchingEmbed) {
+      toast.error(t("Sorry, invalid embed link"));
+      return;
+    }
+
+    const { state, dispatch } = view;
+    dispatch(
+      state.tr.setNodeMarkup(state.selection.from, undefined, {
+        ...node.attrs,
+        href: localUrl,
+      })
+    );
+
+    moveSelectionToEnd();
+  }, [t, localUrl, embeds, node, view, moveSelectionToEnd]);
+
+  const handleKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLInputElement>) => {
+      if (event.nativeEvent.isComposing) {
+        return;
+      }
+
+      switch (event.key) {
+        case "Enter": {
+          event.preventDefault();
+          updateEmbed();
+          return;
+        }
+
+        case "Escape": {
+          event.preventDefault();
+          moveSelectionToEnd();
+          return;
+        }
+      }
+    },
+    [updateEmbed, moveSelectionToEnd]
+  );
+
+  return (
+    <Wrapper>
+      <Input
+        value={localUrl}
+        placeholder={dictionary.pasteLink}
+        onChange={(e) => setLocalUrl(e.target.value)}
+        onKeyDown={handleKeyDown}
+        readOnly={!view.editable}
+      />
+      <Tooltip content={dictionary.openLink}>
+        <ToolbarButton onClick={openEmbed} disabled={!localUrl}>
+          <OpenIcon />
+        </ToolbarButton>
+      </Tooltip>
+      {view.editable && (
+        <Tooltip content={dictionary.deleteEmbed}>
+          <ToolbarButton onClick={removeEmbed}>
+            <TrashIcon />
+          </ToolbarButton>
+        </Tooltip>
+      )}
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled(Flex)`
+  pointer-events: all;
+  gap: 8px;
+`;

app/editor/components/FindAndReplace.tsx

@@ -7,7 +7,6 @@ import {
 } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
-import { usePopoverState } from "reakit/Popover";
 import styled, { useTheme } from "styled-components";
 import { depths, s } from "@shared/styles";
 import { altDisplay, isModKey, metaDisplay } from "@shared/utils/keyboard";
@@ -15,24 +14,26 @@ import Button from "~/components/Button";
 import Flex from "~/components/Flex";
 import Input from "~/components/Input";
 import NudeButton from "~/components/NudeButton";
-import Popover from "~/components/Popover";
-import { Portal } from "~/components/Portal";
 import { ResizingHeightContainer } from "~/components/ResizingHeightContainer";
 import Tooltip from "~/components/Tooltip";
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+} from "~/components/primitives/Popover";
 import useKeyDown from "~/hooks/useKeyDown";
-import useOnClickOutside from "~/hooks/useOnClickOutside";
 import Desktop from "~/utils/Desktop";
 import { useEditor } from "./EditorContext";
 
 type KeyboardShortcutsProps = {
-  popover: ReturnType<typeof usePopoverState>;
+  open: boolean;
   handleOpen: ({ withReplace }: { withReplace: boolean }) => void;
   handleCaseSensitive: () => void;
   handleRegex: () => void;
 };
 
 function useKeyboardShortcuts({
-  popover,
+  open,
   handleOpen,
   handleCaseSensitive,
   handleRegex,
@@ -41,7 +42,7 @@ function useKeyboardShortcuts({
   useKeyDown(
     (ev) =>
       isModKey(ev) &&
-      !popover.visible &&
+      !open &&
       ev.code === "KeyF" &&
       // Keyboard handler is through the AppMenu on Desktop v1.2.0+
       !(Desktop.bridge && "onFindInPage" in Desktop.bridge),
@@ -54,7 +55,7 @@ function useKeyboardShortcuts({
 
   // Enable/disable case sensitive search
   useKeyDown(
-    (ev) => isModKey(ev) && ev.altKey && ev.code === "KeyC" && popover.visible,
+    (ev) => isModKey(ev) && ev.altKey && ev.code === "KeyC" && open,
     (ev) => {
       ev.preventDefault();
       handleCaseSensitive();
@@ -64,7 +65,7 @@ function useKeyboardShortcuts({
 
   // Enable/disable regex search
   useKeyDown(
-    (ev) => isModKey(ev) && ev.altKey && ev.code === "KeyR" && popover.visible,
+    (ev) => isModKey(ev) && ev.altKey && ev.code === "KeyR" && open,
     (ev) => {
       ev.preventDefault();
       handleRegex();
@@ -97,9 +98,7 @@ export default function FindAndReplace({
   totalResults,
 }: Props) {
   const editor = useEditor();
-  const finalFocusRef = React.useRef<HTMLElement>(
-    editor.view.dom.parentElement
-  );
+  const [localOpen, setLocalOpen] = React.useState(open);
   const selectionRef = React.useRef<string | undefined>();
   const inputRef = React.useRef<HTMLInputElement>(null);
   const inputReplaceRef = React.useRef<HTMLInputElement>(null);
@@ -110,12 +109,10 @@ export default function FindAndReplace({
   const [regexEnabled, setRegex] = React.useState(false);
   const [searchTerm, setSearchTerm] = React.useState("");
   const [replaceTerm, setReplaceTerm] = React.useState("");
-  const popover = usePopoverState();
-  const { show } = popover;
 
   React.useEffect(() => {
     if (open) {
-      show();
+      setLocalOpen(true);
     }
   }, [open]);
 
@@ -127,16 +124,16 @@ export default function FindAndReplace({
     if ("onFindInPage" in Desktop.bridge) {
       Desktop.bridge.onFindInPage(() => {
         selectionRef.current = window.getSelection()?.toString();
-        show();
+        setLocalOpen(true);
       });
     }
     if ("onReplaceInPage" in Desktop.bridge) {
       Desktop.bridge.onReplaceInPage(() => {
         setShowReplace(true);
-        show();
+        setLocalOpen(true);
       });
     }
-  }, [show]);
+  }, []);
 
   // Callbacks
   const selectInputText = React.useCallback(() => {
@@ -159,7 +156,7 @@ export default function FindAndReplace({
       const shouldShowReplace = !readOnly && withReplace;
 
       // If already open, switch focus to corresponding input text.
-      if (popover.visible) {
+      if (localOpen) {
         if (shouldShowReplace) {
           setShowReplace(true);
           selectInputReplaceText();
@@ -171,13 +168,13 @@ export default function FindAndReplace({
       }
 
       selectionRef.current = window.getSelection()?.toString();
-      popover.show();
+      setLocalOpen(true);
 
       if (shouldShowReplace) {
         setShowReplace(true);
       }
     },
-    [popover, readOnly, selectInputText, selectInputReplaceText]
+    [localOpen, readOnly, selectInputText, selectInputReplaceText]
   );
 
   const handleMore = React.useCallback(() => {
@@ -295,10 +292,8 @@ export default function FindAndReplace({
     [handleReplace]
   );
 
-  useOnClickOutside(popover.unstable_referenceRef, popover.hide);
-
   useKeyboardShortcuts({
-    popover,
+    open: localOpen,
     handleOpen,
     handleCaseSensitive,
     handleRegex,
@@ -316,7 +311,7 @@ export default function FindAndReplace({
   );
 
   React.useEffect(() => {
-    if (popover.visible) {
+    if (localOpen) {
       onOpen();
       const startSearchText = selectionRef.current || searchTerm;
 
@@ -339,7 +334,7 @@ export default function FindAndReplace({
       editor.commands.clearSearch();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [popover.visible]);
+  }, [localOpen]);
 
   const disabled = totalResults === 0;
   const navigation = (
@@ -368,15 +363,16 @@ export default function FindAndReplace({
   );
 
   return (
-    <Portal>
-      <Popover
-        {...popover}
-        unstable_finalFocusRef={finalFocusRef}
-        style={style}
+    <Popover open={localOpen} onOpenChange={setLocalOpen}>
+      <PopoverTrigger>
+        <span style={style} />
+      </PopoverTrigger>
+      <PopoverContent
         aria-label={t("Find and replace")}
-        scrollable={false}
-        minWidth={420}
         width={0}
+        minWidth={420}
+        scrollable={false}
+        onPointerDownOutside={() => setLocalOpen(false)}
       >
         <Content column>
           <Flex gap={4}>
@@ -467,8 +463,8 @@ export default function FindAndReplace({
             )}
           </ResizingHeightContainer>
         </Content>
-      </Popover>
-    </Portal>
+      </PopoverContent>
+    </Popover>
   );
 }
 

app/editor/components/FloatingToolbar.tsx

@@ -87,8 +87,8 @@ function usePosition({
     const position = codeBlock
       ? codeBlock.pos
       : noticeBlock
-      ? noticeBlock.pos
-      : null;
+        ? noticeBlock.pos
+        : null;
 
     if (position !== null) {
       const element = view.nodeDOM(position);
@@ -240,7 +240,7 @@ const FloatingToolbar = React.forwardRef(function FloatingToolbar_(
       return null;
     }
 
-    if (props.active) {
+    if (props.active && position.visible) {
       const rect = document.body.getBoundingClientRect();
       const safeAreaInsets = getSafeAreaInsets();
 
@@ -345,7 +345,8 @@ const Wrapper = styled.div<WrapperProps>`
   box-shadow: ${s("menuShadow")};
   border-radius: 4px;
   transform: scale(0.95);
-  transition: opacity 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275),
+  transition:
+    opacity 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275),
     transform 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
   transition-delay: 150ms;
   line-height: 0;

app/editor/components/MentionMenu.tsx

@@ -98,7 +98,7 @@ function MentionMenu({ search, isActive, ...rest }: Props) {
                 actorId,
                 label: user.name,
               },
-            } as MentionItem)
+            }) as MentionItem
         )
         .concat(
           documents
@@ -130,7 +130,7 @@ function MentionMenu({ search, isActive, ...rest }: Props) {
                     actorId,
                     label: doc.title,
                   },
-                } as MentionItem)
+                }) as MentionItem
             )
         )
         .concat(
@@ -158,7 +158,7 @@ function MentionMenu({ search, isActive, ...rest }: Props) {
                     actorId,
                     label: collection.name,
                   },
-                } as MentionItem)
+                }) as MentionItem
             )
         )
         .concat([