Release 0.31.1

- Fixed CSS for SortOrFilter chips
- Fixed bug when refreshing with an actor source filter set

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

.eslintrc.cjs

@@ -1,18 +1,12 @@
 module.exports = {
   root: true,
   extends: ['plugin:prettier/recommended'],
-  plugins: [
-    '@nx',
-    'prefer-arrow',
-    'import',
-    'simple-import-sort',
-    'unused-imports',
-    'unicorn',
-  ],
+  plugins: ['@nx', 'prefer-arrow', 'import', 'unused-imports', 'unicorn'],
   rules: {
     'func-style': ['error', 'declaration', { allowArrowFunctions: true }],
     'no-console': ['warn', { allow: ['group', 'groupCollapsed', 'groupEnd'] }],
     'no-control-regex': 0,
+    'no-debugger': 'error',
     'no-duplicate-imports': 'error',
     'no-undef': 'off',
     'no-unused-vars': 'off',
@@ -52,26 +46,6 @@ module.exports = {
       },
     ],
 
-    'simple-import-sort/imports': [
-      'error',
-      {
-        groups: [
-          // Packages
-          ['^react', '^@?\\w'],
-          // Internal modules
-          ['^(@|~|src|@ui)(/.*|$)'],
-          // Side effect imports
-          ['^\\u0000'],
-          // Relative imports
-          ['^\\.\\.(?!/?$)', '^\\.\\./?$'],
-          ['^\\./(?=.*/)(?!/?$)', '^\\.(?!/?$)', '^\\./?$'],
-          // CSS imports
-          ['^.+\\.?(css)$'],
-        ],
-      },
-    ],
-    'simple-import-sort/exports': 'error',
-
     'unused-imports/no-unused-imports': 'warn',
     'unused-imports/no-unused-vars': [
       'warn',

.eslintrc.react.cjs

@@ -29,6 +29,11 @@ module.exports = {
                 message:
                   'Please use the custom wrapper: `useScopedHotkeys` from `twenty-ui`',
               },
+              {
+                group: ['lodash'],
+                message:
+                  "Please use the standalone lodash package (for instance: `import groupBy from 'lodash.groupby'` instead of `import { groupBy } from 'lodash'`)",
+              },
             ],
           },
         ],
@@ -42,6 +47,7 @@ module.exports = {
         '@nx/workspace-explicit-boolean-predicates-in-if': 'error',
         '@nx/workspace-use-getLoadable-and-getValue-to-get-atoms': 'error',
         '@nx/workspace-useRecoilCallback-has-dependency-array': 'error',
+        '@nx/workspace-no-navigate-prefer-link': 'error',
         'react/no-unescaped-entities': 'off',
         'react/prop-types': 'off',
         'react/jsx-key': 'off',

.github/CODE_OF_CONDUCT.md

@@ -2,7 +2,7 @@
 
 ## Twenty's Pledge
 
-The contributors and maintainers of this project pledge to ensure a harassment-free experience for everyone in the community. This commitment applies to individuals of all backgrounds, including age, body size, visible or invisible disability, ethnicity, sex characteristics, gender identity, experience, education, socio-economic status, nationality, appearance, race, religion. It also applies to individuals of all sexual identities and orientations.
+The contributors and maintainers of this project pledge to ensure a harassment-free experience for everyone in the community.
 
 The focus of both contributors and maintainers is on acting and interacting in ways that promote an open, welcoming, friendly, diverse, inclusive, and healthy community.
 

.github/CONTRIBUTING.md

@@ -1,91 +1,70 @@
 # Contributing to Twenty
 
+Thanks for considering contributing to Twenty! 
 
-Thank you for considering contributing to Twenty! All community contributions are welcome. 
-
-This guide outlines the process for contributing to this project. Please make sure to go through the [documentation](https://docs.twenty.com) before making your contribution. 
-
-
-> And if you like the project, but just don't have time to contribute, that's fine. There are other easy ways to support the project and show your appreciation:
-> - Star the project
-> - Tweet about it
-
+Please make sure to go through the [documentation](https://docs.twenty.com) before. 
 
 <br>
 
 
-## Getting Started
+## Good first issues
 
-Good first issues are a great way to start contributing to the project and get familiar with the codebase. Here's how to find them:
+Good first issues are a great way to start contributing and get familiar with the codebase. You can find them on by filtering on the [good first issue](https://github.com/twentyhq/twenty/labels/good%20first%20issue) label. 
 
-1. Visit the "[Issues](https://github.com/twentyhq/twenty/issues)" tab on the main [repository](https://github.com/twentyhq/twenty).
-2. Use the "Labels" filter and select "[Good First Issue](https://github.com/twentyhq/twenty/labels/good%20first%20issue)" to see a list of beginner-friendly tasks.
-3. Choose an issue that interests you, fork the project, and start working on it. Once you solve and test the issue, open a PR for review.
+## Issue assignment
 
-Note: We are aware that having multiple contributors address the same issue can cause frustration. To prevent this, we adhere to a specific guideline: if a core team member has assigned an issue to a contributor, either as the issue assignee or through explicit assignment in the issue comments within the past three days, that contributor's pull request takes precedence. Otherwise, the first PR submitted will be given priority. This delay is reduced to one day for PR tagged with "size: minutes" and extended to a week for PR tagged "size: days".
+Having multiple contributors address the same issue can cause frustration.
 
-Therefore, ensure you are assigned to an issue before beginning work on it.
+To avoid conflicts, we follow these guidelines:
+1. If a core team member assigned you the issue within the last three days, your PR takes priority.
+2. Otherwise, the first submitted PR is prioritized.
+3. For "size: long" PRs, the assignment period extends to one week.
 
-<br>
-
-
-## Contributing Guidelines
+Please ensure you're assigned to an issue before starting work.
 
+## How to Contribute
 
 1. **Fork the Repository:** Click on the 'Fork' button in the upper right corner of the repository's GitHub page. This will create a copy of the repository in your GitHub account.
 
-
 2. **Clone the Repository:** Clone your forked repository to your local machine using `git clone`.
 
-
 ```shell
 git clone https://github.com/yourusername/twenty.git
 cd twenty
 ```
 
+3. **Create a New Branch:** Create a new branch for your changes instead of using the main branch.
 
-3. **Make Changes:** Make your desired changes and ensure that your code adheres to Twenty's coding standards.
+```shell
+git checkout -b your-branch-name
+```
+
+4. **Make Changes:** Make your desired changes and ensure that your code adheres to Twenty's coding standards.
 
 
-4. **Test Locally:** Test your changes locally to ensure they work as expected.
+5. **Test Locally:** Test your changes locally to ensure they work as expected.
 
 
-5. **Commit Changes:** Commit your changes with a clear and concise commit message.
-
+6. **Commit Changes:** Commit your changes with a clear and concise commit message.
 
 ```shell
 git commit -m "Add your detailed description here"
 ```
-6. **Push Changes:** Push your changes to your forked repository.
 
+7. **Push Changes:** Push your changes to your forked repository.
 
 ```shell
-git push origin branch-name
+git push origin your-branch-name
 ```
 
+8. **Create a Pull Request:** Go to the original Twenty repository and create a pull request. Please provide a detailed description of your changes. Submitting a PR means you agree to the CLA.
 
-7. **Create a Pull Request:** Go to the original Twenty repository and create a pull request. Please provide a detailed description of your changes. To have your pull request accepted, you must sign a CLA.
+9. **Code Review:** Your pull request will undergo a code review.
+
+10. **Merge:** Once approved, maintainers will merge your pull request into the main repository.
 
 
-8. **Code Review:** Your pull request will undergo a code review. Note that you might need to make any necessary adjustments based on feedback.
-
-
-9. **Merge:** Once approved, maintainers will merge your pull request into the main repository.
-
-
-<br>
-
-## Code of Conduct
-
-Please note that by contributing to this project, you're expected to follow Twenty's [Code of Conduct](./CODE_OF_CONDUCT.md). All maintainers strive to maintain a welcoming, friendly, and inclusive community for all contributors.  
-
-<br>
 
 ## Reporting Issues
 
-If you encounter any issues or have suggestions for improvements, please feel free to (create an issue on Twenty's GitHub repository)[https://github.com/twentyhq/twenty/issues/new]. When reporting issues, please provide as much detail as possible to help in understanding and addressing the problem effectively.
-
----
-
-Thank you for considering contributing to Twenty. Your contributions help make Twenty's CRM platform even better!
-
+If you face any issues or have suggestions, please feel free to (create an issue on Twenty's GitHub repository)[https://github.com/twentyhq/twenty/issues/new]. Please provide as much detail as possible.

.github/workflows/actions/task-cache/action.yaml

@@ -24,6 +24,8 @@ runs:
         path: |
           .cache
           .nx/cache
-        key: tasks-cache-${{ inputs.tag }}-${{ steps.tasks-key.outputs.key }}${{ inputs.suffix }}-${{ github.sha }}
+          node_modules/.cache
+          packages/*/node_modules/.cache
+        key: tasks-cache-${{ github.ref_name }}-${{ inputs.tag }}-${{ steps.tasks-key.outputs.key }}${{ inputs.suffix }}-${{ github.sha }}
         restore-keys: |
-          tasks-cache-${{ inputs.tag }}-${{ steps.tasks-key.outputs.key }}${{ inputs.suffix }}-
+          tasks-cache-${{ github.ref_name }}-${{ inputs.tag }}-${{ steps.tasks-key.outputs.key }}${{ inputs.suffix }}-

.github/workflows/ci-chromatic.yaml

@@ -1,39 +0,0 @@
-name: 'CI Chromatic'
-
-on:
-  push:
-    branches:
-      - main
-    paths:
-      - 'package.json'
-      - 'packages/twenty-front/**'
-  pull_request:
-    types: [labeled]
-    paths:
-      - 'package.json'
-      - 'packages/twenty-front/**'
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: true
-
-jobs:
-  chromatic-deployment:
-    if: contains(github.event.pull_request.labels.*.name, 'run-chromatic') || github.event_name == 'push'
-    runs-on: ubuntu-latest
-    env:
-      REACT_APP_SERVER_BASE_URL: http://127.0.0.1:3000
-      CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
-    steps:
-      - uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-      - name: Install dependencies
-        uses: ./.github/workflows/actions/yarn-install
-      - name: Front / Write .env
-        run: |
-          cd packages/twenty-front
-          touch .env
-          echo "REACT_APP_SERVER_BASE_URL: $REACT_APP_SERVER_BASE_URL" >> .env
-      - name: Publish to Chromatic
-        run: |
-          npx nx run twenty-front:chromatic:ci

.github/workflows/ci-chrome-extension.yaml

@@ -24,7 +24,7 @@ jobs:
       - name: Cancel Previous Runs
         uses: styfle/cancel-workflow-action@0.11.0
         with:
-            access_token: ${{ github.token }}
+          access_token: ${{ github.token }}
       - uses: actions/checkout@v4
       - name: Install dependencies
         uses: ./.github/workflows/actions/yarn-install

.github/workflows/ci-docs.yaml

@@ -1,42 +0,0 @@
-name: CI Docs
-on:
-  push:
-    branches:
-      - main
-    paths:
-      - 'package.json'
-      - 'packages/twenty-docs/**'
-      - 'packages/twenty-ui/**'
-  pull_request:
-    paths:
-      - 'package.json'
-      - 'packages/twenty-docs/**'
-      - 'packages/twenty-ui/**'
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: true
-
-jobs:
-  docs-build:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - name: Install dependencies
-        uses: ./.github/workflows/actions/yarn-install
-      - name: Docs / Build Documentation
-        run: npx nx build twenty-docs
-  vale:
-    name: runner / vale
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: errata-ai/vale-action@reviewdog
-        with:
-          files: ${{ steps.directories.outputs.LIST }}
-          fail_on_error: true
-          vale_flags: "--minAlertLevel=error"
-          reporter: github-pr-check
-          token: ${{ github.token }}
-          filter_mode: nofilter
-        env:
-          REVIEWDOG_GITHUB_API_TOKEN: ${{ github.token }}

.github/workflows/ci-front.yaml

@@ -17,19 +17,41 @@ concurrency:
   cancel-in-progress: true
 
 jobs:
-  front-sb-test:
-    runs-on: ci-8-cores
-    strategy:
-      matrix:
-        storybook_scope: [pages, modules]
+  front-sb-build:
+    runs-on: ubuntu-latest
     env:
       REACT_APP_SERVER_BASE_URL: http://localhost:3000
-      STORYBOOK_SCOPE: ${{ matrix.storybook_scope }}
+      NX_REJECT_UNKNOWN_LOCAL_CACHE: 0
     steps:
       - name: Cancel Previous Runs
         uses: styfle/cancel-workflow-action@0.11.0
         with:
           access_token: ${{ github.token }}
+      - name: Fetch local actions
+        uses: actions/checkout@v4
+      - name: Install dependencies
+        uses: ./.github/workflows/actions/yarn-install
+      - name: Diagnostic disk space issue
+        run: df -h
+      - name: Front / Restore Storybook Task Cache
+        uses: ./.github/workflows/actions/task-cache
+        with:
+          tag: scope:frontend
+          tasks: storybook:build
+      - name: Front / Write .env
+        run: npx nx reset:env twenty-front
+      - name: Front / Build storybook
+        run: npx nx storybook:build twenty-front
+  front-sb-test:
+    runs-on: ci-8-cores
+    needs: front-sb-build
+    strategy:
+      matrix:
+        storybook_scope: [pages, modules]
+    env:
+      REACT_APP_SERVER_BASE_URL: http://localhost:3000
+      NX_REJECT_UNKNOWN_LOCAL_CACHE: 0
+    steps:
       - name: Fetch local actions
         uses: actions/checkout@v4
       - name: Install dependencies
@@ -41,38 +63,81 @@ jobs:
         with:
           tag: scope:frontend
           tasks: storybook:build
-          suffix: _${{ matrix.storybook_scope }}
       - name: Front / Write .env
         run: npx nx reset:env twenty-front
       - name: Run storybook tests
+        run: npx nx storybook:serve-and-test:static twenty-front --configuration=${{ matrix.storybook_scope }}
+  front-sb-test-performance:
+    runs-on: ci-8-cores
+    env:
+      REACT_APP_SERVER_BASE_URL: http://localhost:3000
+      NX_REJECT_UNKNOWN_LOCAL_CACHE: 0
+    steps:
+      - name: Fetch local actions
+        uses: actions/checkout@v4
+      - name: Install dependencies
+        uses: ./.github/workflows/actions/yarn-install
+      - name: Install Playwright
+        run: cd packages/twenty-front && npx playwright install
+      - name: Front / Write .env
+        run: npx nx reset:env twenty-front
+      - name: Run storybook tests
+        run: npx nx storybook:serve-and-test:static:performance twenty-front
+  front-chromatic-deployment:
+    if: contains(github.event.pull_request.labels.*.name, 'run-chromatic') || github.event_name == 'push'
+    needs: front-sb-build
+    runs-on: ubuntu-latest
+    env:
+      REACT_APP_SERVER_BASE_URL: http://127.0.0.1:3000
+      CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+      NX_REJECT_UNKNOWN_LOCAL_CACHE: 0
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - name: Install dependencies
+        uses: ./.github/workflows/actions/yarn-install
+      - name: Front / Restore Storybook Task Cache
+        uses: ./.github/workflows/actions/task-cache
+        with:
+          tag: scope:frontend
+          tasks: storybook:build
+      - name: Front / Write .env
         run: |
-          npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
-            "npx nx storybook:static twenty-front" \
-            "npx wait-on tcp:6006 && npx nx storybook:test twenty-front"
+          cd packages/twenty-front
+          touch .env
+          echo "REACT_APP_SERVER_BASE_URL: $REACT_APP_SERVER_BASE_URL" >> .env
+      - name: Publish to Chromatic
+        run: npx nx run twenty-front:chromatic:ci
   front-task:
     runs-on: ubuntu-latest
+    env:
+      NX_REJECT_UNKNOWN_LOCAL_CACHE: 0
     strategy:
       matrix:
         task: [lint, typecheck, test]
-    env:
-      REACT_APP_SERVER_BASE_URL: http://localhost:3000
     steps:
       - name: Cancel Previous Runs
         uses: styfle/cancel-workflow-action@0.11.0
         with:
           access_token: ${{ github.token }}
-      - name: Fetch local actions and base branch history
+      - name: Fetch custom Github Actions and base branch history
         uses: actions/checkout@v4
         with:
           fetch-depth: 0
       - name: Install dependencies
         uses: ./.github/workflows/actions/yarn-install
-      - name: Front / Restore Task Cache
+      - name: Front / Restore ${{ matrix.task }} task cache
         uses: ./.github/workflows/actions/task-cache
         with:
           tag: scope:frontend
           tasks: ${{ matrix.task }}
-      - name: Front / Run task
+      - name: Reset .env
+        uses: ./.github/workflows/actions/nx-affected
+        with:
+          tag: scope:frontend
+          tasks: reset:env
+      - name: Run ${{ matrix.task }} task
         uses: ./.github/workflows/actions/nx-affected
         with:
           tag: scope:frontend

.github/workflows/ci-release-create.yaml

@@ -0,0 +1,44 @@
+name: "Release: create"
+on:
+  workflow_dispatch:
+    inputs:
+      version:
+        required: true
+        description: Version to release, without the v (e.g. 1.2.3)
+      ref:
+        default: main
+        description: Ref to start the release from (e.g. main, sha)
+      create_release:
+        type: boolean
+        default: true
+        description: Create a release after merging the PR
+
+jobs:
+  create_pr:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+        with:
+          ref: ${{ github.event.inputs.ref }}
+
+      - name: Sanitize version
+        id: sanitize
+        run: |
+          echo version=$(echo ${{ github.event.inputs.version }} | sed 's/^v//') >> $GITHUB_OUTPUT
+
+      - name: Update versions
+        run: |
+          echo ${{ steps.sanitize.outputs.version }} > version.txt
+
+      - name: Create Pull Request
+        uses: peter-evans/create-pull-request@v6
+        with:
+            branch: release/${{ steps.sanitize.outputs.version }}
+            commit-message: "chore: release v${{ steps.sanitize.outputs.version }}"
+            committer: Github Action Deploy <github-action-deploy@twenty.com>
+            author: Github Action Deploy <github-action-deploy@twenty.com>
+            title: Release v${{ steps.sanitize.outputs.version }}
+            labels: |
+              release
+              ${{ github.event.inputs.create_release == true && 'create_release' || '' }}

.github/workflows/ci-release-merge.yaml

@@ -0,0 +1,47 @@
+name: "Release: on merge"
+on:
+  pull_request:
+    types:
+      - closed
+
+jobs:
+  tag_and_release:
+    runs-on: ubuntu-latest
+    if: github.event.pull_request.merged == true && contains(github.event.pull_request.labels.*.name, 'release')
+    steps:
+      - name: Check PR Author
+        id: check_author
+        run: |
+          if [[ "${{ github.event.pull_request.user.login }}" != "github-actions[bot]" ]]; then
+            echo "PR author (${AUTHOR}) is not trusted. Exiting."
+            exit 1
+          fi
+
+      - name: Checkout
+        uses: actions/checkout@v2
+        with:
+          ref: main
+
+      - name: Get version from PR title
+        id: extract_version
+        run: |
+          VERSION=$(echo "${{ github.event.pull_request.title }}" | sed -n 's/.*Release v\([0-9.]*\).*/\1/p')
+          if [ -z "$VERSION" ]; then
+            echo "No valid version found in PR title. Exiting."
+            exit 1
+          fi
+          echo "VERSION=$VERSION" >> $GITHUB_ENV
+
+      - name: Push new tag
+        run: |
+          git config --global user.name 'Github Action Deploy'
+          git config --global user.email 'github-action-deploy@twenty.com'
+          git tag v${{ env.VERSION }}
+          git push origin v${{ env.VERSION }}
+
+      - uses: release-drafter/release-drafter@v5
+        if: contains(github.event.pull_request.labels.*.name, 'create_release')
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          tag: v${{ env.VERSION }}

.github/workflows/ci-release.yaml

@@ -1,52 +0,0 @@
-name: Release Twenty
-on:
-  workflow_dispatch:
-    inputs:
-      version:
-        required: true
-        description: Version to release, without the v (e.g. 1.2.3)
-      ref:
-        default: main
-        description: Ref to start the release from (e.g. main, sha)
-
-jobs:
-  release:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v2
-        with:
-          ref: ${{ github.event.inputs.ref }}
-
-      - name: Sanitize version
-        id: sanitize
-        run: |
-          echo version=$(echo ${{ github.event.inputs.version }} | sed 's/^v//') >> $GITHUB_OUTPUT
-
-      - name: Update versions
-        working-directory: packages
-        run: |
-          for dir in twenty-docs twenty-emails twenty-front twenty-server twenty-ui twenty-website
-          do
-            cd $dir
-            yarn version ${{ steps.sanitize.outputs.version }}
-            cd ..
-          done
-
-      # Make sure we have the latest changes before committing
-      - name: Pull changes
-        run: git pull
-
-      - uses: stefanzweifel/git-auto-commit-action@v4
-        with:
-          branch: ${{ github.event.inputs.ref }}
-          commit_message: "chore: release v${{ steps.sanitize.outputs.version }}"
-          tagging_message: v${{ steps.sanitize.outputs.version }}
-
-          commit_user_name: Github Action Deploy
-          commit_user_email: github-action-deploy@twenty.com
-          commit_author: Github Action Deploy <github-action-deploy@twenty.com>
-
-      - uses: release-drafter/release-drafter@v5
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/ci-server.yaml

@@ -17,8 +17,10 @@ concurrency:
   cancel-in-progress: true
 
 jobs:
-  server-test:
+  server-setup:
     runs-on: ubuntu-latest
+    env:
+      NX_REJECT_UNKNOWN_LOCAL_CACHE: 0
     services:
       postgres:
         image: twentycrm/twenty-postgres
@@ -27,14 +29,18 @@ jobs:
           POSTGRES_USER: postgres
         ports:
           - 5432:5432
+      redis:
+        image: redis
+        ports:
+          - 6379:6379
     steps:
-      - name: Fetch local actions and base branch history
+      - name: Fetch custom Github Actions and base branch history
         uses: actions/checkout@v4
         with:
           fetch-depth: 0
       - name: Install dependencies
         uses: ./.github/workflows/actions/yarn-install
-      - name: Server / Restore Tasks Cache
+      - name: Server / Restore Task Cache
         uses: ./.github/workflows/actions/task-cache
         with:
           tag: scope:backend
@@ -43,14 +49,71 @@ jobs:
         with:
           tag: scope:backend
           tasks: lint,typecheck
-      - name: Server / Run tests
-        uses: ./.github/workflows/actions/nx-affected
-        with:
-          tag: scope:backend
-          tasks: test
       - name: Server / Build
         run: npx nx build twenty-server
       - name: Server / Write .env
         run: npx nx reset:env twenty-server
       - name: Worker / Run
-        run: MESSAGE_QUEUE_TYPE=sync npx nx worker twenty-server
+        run: npx nx run twenty-server:worker:ci
+
+  server-test:
+    runs-on: ubuntu-latest
+    needs: server-setup
+    env:
+      NX_REJECT_UNKNOWN_LOCAL_CACHE: 0
+    steps:
+      - name: Fetch custom Github Actions and base branch history
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - name: Install dependencies
+        uses: ./.github/workflows/actions/yarn-install
+      - name: Server / Restore Task Cache
+        uses: ./.github/workflows/actions/task-cache
+        with:
+          tag: scope:backend
+      - name:  Server / Run Tests
+        uses: ./.github/workflows/actions/nx-affected
+        with:
+          tag: scope:backend
+          tasks: test
+
+  server-integration-test:
+    runs-on: ubuntu-latest
+    needs: server-setup
+    services:
+      postgres:
+        image: twentycrm/twenty-postgres
+        env:
+          POSTGRES_PASSWORD: postgres
+          POSTGRES_USER: postgres
+        ports:
+          - 5432:5432
+      redis:
+        image: redis
+        ports:
+          - 6379:6379
+    env:
+      NX_REJECT_UNKNOWN_LOCAL_CACHE: 0
+    steps:
+      - name: Fetch custom Github Actions and base branch history
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - name: Install dependencies
+        uses: ./.github/workflows/actions/yarn-install
+      - name: Server / Restore Task Cache
+        uses: ./.github/workflows/actions/task-cache
+        with:
+          tag: scope:backend
+      - name: Server / Run Integration Tests
+        uses: ./.github/workflows/actions/nx-affected
+        with:
+          tag: scope:backend
+          tasks: "test:integration"
+      - name: Server / Upload reset-logs file
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: reset-logs
+          path: reset-logs.log

.github/workflows/ci-utils.yaml

@@ -5,6 +5,7 @@ on:
   # see: https://securitylab.github.com/research/github-actions-preventing-pwn-requests/
   # and: https://github.com/facebook/react-native/pull/34370/files
   pull_request_target:
+    types: [opened, synchronize, reopened, closed]
 permissions:
   actions: write
   checks: write
@@ -19,6 +20,7 @@ concurrency:
 jobs:
   danger-js:
     runs-on: ubuntu-latest
+    if: github.event.action != 'closed'
     steps:
       - uses: actions/checkout@v4
       - name: Install dependencies
@@ -27,3 +29,15 @@ jobs:
         run: cd packages/twenty-utils && npx nx danger:ci
         env:
           DANGER_GITHUB_API_TOKEN: ${{ github.token }}
+  
+  congratulate:
+    runs-on: ubuntu-latest
+    if: github.event.action == 'closed' && github.event.pull_request.merged == true
+    steps:
+      - uses: actions/checkout@v4
+      - name: Install dependencies
+        uses: ./.github/workflows/actions/yarn-install
+      - name: Run congratulate-dangerfile.js
+        run: cd packages/twenty-utils && npx nx danger:congratulate
+        env:
+          DANGER_GITHUB_API_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/playwright.yml.bak

@@ -0,0 +1,27 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: lts/*
+    - name: Install dependencies
+      run: npm install -g yarn && yarn
+    - name: Install Playwright Browsers
+      run: yarn playwright install --with-deps
+    - name: Run Playwright tests
+      run: yarn test:e2e companies
+    - uses: actions/upload-artifact@v4
+      if: always()
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30

.gitignore

@@ -2,6 +2,7 @@
 .DS_Store
 /.idea
 **/**/node_modules/
+.cache
 
 # yarn is the recommended package manager across the project
 **/**/.package-lock.json
@@ -25,4 +26,6 @@ dist
 storybook-static
 *.tsbuildinfo
 .eslintcache
-.cache
+.nyc_output
+test-results/
+dump.rdb

.vscode/settings.json

@@ -5,21 +5,24 @@
     "editor.formatOnSave": false,
     "editor.codeActionsOnSave": {
       "source.fixAll.eslint": "explicit",
-      "source.addMissingImports": "always"
+      "source.addMissingImports": "always",
+      "source.organizeImports": "always"
     }
   },
   "[javascript]": {
     "editor.formatOnSave": false,
     "editor.codeActionsOnSave": {
       "source.fixAll.eslint": "explicit",
-      "source.addMissingImports": "always"
+      "source.addMissingImports": "always",
+      "source.organizeImports": "always"
     }
   },
   "[typescriptreact]": {
     "editor.formatOnSave": false,
     "editor.codeActionsOnSave": {
       "source.fixAll.eslint": "explicit",
-      "source.addMissingImports": "always"
+      "source.addMissingImports": "always",
+      "source.organizeImports": "always"
     }
   },
   "[json]": {

.vscode/twenty.code-workspace

@@ -12,14 +12,18 @@
       "name": "packages/twenty-docker",
       "path": "../packages/twenty-docker"
     },
-    {
-      "name": "packages/twenty-docs",
-      "path": "../packages/twenty-docs"
-    },
     {
       "name": "packages/twenty-front",
       "path": "../packages/twenty-front"
     },
+    {
+      "name": "packages/twenty-ui",
+      "path": "../packages/twenty-ui"
+    },
+    {
+      "name": "packages/twenty-emails",
+      "path": "../packages/twenty-emails"
+    },
     {
       "name": "packages/twenty-postgres",
       "path": "../packages/twenty-postgres"
@@ -47,21 +51,21 @@
     "[typescript]": {
       "editor.formatOnSave": false,
       "editor.codeActionsOnSave": {
-        "source.fixAll.eslint": true,
+        "source.fixAll.eslint": "explicit",
         "source.addMissingImports": "always"
       }
     },
     "[javascript]": {
       "editor.formatOnSave": false,
       "editor.codeActionsOnSave": {
-        "source.fixAll.eslint": true,
+        "source.fixAll.eslint": "explicit",
         "source.addMissingImports": "always"
       }
     },
     "[typescriptreact]": {
       "editor.formatOnSave": false,
       "editor.codeActionsOnSave": {
-        "source.fixAll.eslint": true,
+        "source.fixAll.eslint": "explicit",
         "source.addMissingImports": "always"
       }
     },
@@ -99,7 +103,6 @@
       "ROOT",
       "packages/twenty-zapier",
       "packages/twenty-docker",
-      "packages/twenty-docs",
       "packages/twenty-utils",
       "packages/twenty-postgres"
     ]

.yarnrc.yml

@@ -2,4 +2,4 @@ enableInlineHunks: true
 
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.0.2.cjs
+yarnPath: .yarn/releases/yarn-4.4.0.cjs

README.md

@@ -1,23 +1,32 @@
+<p align="center">
+  <a href="https://oss.gg/">
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="https://github.com/twentyhq/twenty/blob/33be2dbbe14eea00445010ecb9cd53ed603c01d5/packages/twenty-website/public/images/readme/Github%20Read-me%20banner.png">
+      <source media="(prefers-color-scheme: light)" srcset="https://github.com/twentyhq/twenty/blob/33be2dbbe14eea00445010ecb9cd53ed603c01d5/packages/twenty-website/public/images/readme/Github%20Read-me%20banner.png">
+      <img src="./packages/twenty-website/public/images/readme/Github%20Read-me%20banner.png" alt="Hacktoberfest" />
+    </picture>
+  </a>
+</p>
 
 <br>
 <p align="center">
   <a href="https://www.twenty.com">
-    <img src="./packages/twenty-docs/static/img/logo-square-dark.svg" width="100px" alt="Twenty logo" />
+    <img src="./packages/twenty-website/public/images/core/logo.svg" width="100px" alt="Twenty logo" />
   </a>
 </p>
 
 <h2 align="center" >The #1 Open-Source CRM </h3>
 <p align="center">Tailored to your unique business needs</p>
 
-<p align="center"><a href="https://twenty.com">🌐 Website</a> · <a href="https://docs.twenty.com">📚 Documentation</a> ·  <a href="https://discord.gg/cx5n4Jzs57"><img src="./packages/twenty-docs/static/img/discord-icon.svg" width="12" height="12"/> Discord</a> · <a href="https://www.figma.com/file/xt8O9mFeLl46C5InWwoMrN/Twenty"><img src="./packages/twenty-docs/static/img/figma-icon.png"  width="12" height="12"/>  Figma</a><p>
+<p align="center"><a href="https://twenty.com">🌐 Website</a> · <a href="https://twenty.com/developers">📚 Documentation</a> ·  <a href="https://discord.gg/cx5n4Jzs57"><img src="./packages/twenty-website/public/images/readme/discord-icon.svg" width="12" height="12"/> Discord</a> · <a href="https://www.figma.com/file/xt8O9mFeLl46C5InWwoMrN/Twenty"><img src="./packages/twenty-website/public/images/readme/figma-icon.png"  width="12" height="12"/>  Figma</a><p>
 <br />
 
 
 <p align="center">
   <a href="https://www.twenty.com">
     <picture>
-      <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/twentyhq/twenty/main/packages/twenty-docs/static/img/preview-dark.png">
-      <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/twentyhq/twenty/main/packages/twenty-docs/static/img/preview-light.png">
+      <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/twentyhq/twenty/v0.12.0/packages/twenty-docs/static/img/preview-dark.png">
+      <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/twentyhq/twenty/v0.12.0/packages/twenty-docs/static/img/preview-light.png">
       <img src="./packages/twenty-docs/static/img/preview-light.png" alt="Companies view" />
     </picture>
   </a>
@@ -26,20 +35,21 @@
 
 We’ve spent thousands of hours grappling with traditional CRMs like Pipedrive and Salesforce to align them with our business needs, only to end up frustrated — customizations are complex and the closed ecosystems of these platforms can feel restrictive.
 
-We felt the need for a CRM platform that empowers rather than constrains. We believe the next great CRM will come from the open source community. And we’ve packed Twenty with powerful features to give you full control and help you run your business efficiently. 
+We felt the need for a CRM platform that empowers rather than constrains. We believe the next great CRM will come from the open-source community. We’ve packed Twenty with powerful features to give you full control and help you run your business efficiently. 
 
 <br>
 
 # Demo 
 Go to <a href="https://demo.twenty.com/">demo.twenty.com</a> and login with the following credentials:
+
 ```
-email: noah@demo.dev
+email: tim@apple.dev
 password: Applecar2025
 ```
 
 See also:  
-🚀 [Self-hosting](https://docs.twenty.com/start/self-hosting/)  
-🖥️ [Local Setup](https://docs.twenty.com/start/local-setup)  
+🚀 [Self-hosting](https://twenty.com/developers/section/self-hosting)  
+🖥️ [Local Setup](https://twenty.com/developers/local-setup)  
 
 # Why Choose Twenty?
 We understand that the CRM landscape is vast. So why should you choose us?
@@ -61,18 +71,19 @@ Please feel free to flag any specific need you have need by creating an issue.
 
 Below are some features we have implemented to date:
 
-+ [Add, filter, sort, edit and track customers](#add-filter-sort-edit-and-track-customers)
++ [Add, filter, sort, edit, and track customers](#add-filter-sort-edit-and-track-customers)
 + [Create one or several opportunities for each company](#create-one-or-several-opportunities-for-each-company)
 + [See rich notes tasks displayed in a timeline](#see-rich-notes-tasks-displayed-in-a-timeline)
 + [Create tasks on records](#create-tasks-on-records)
 + [Navigate quickly through the app using keyboard shortcuts and search](#navigate-quickly-through-the-app-using-keyboard-shortcuts-and-search)
 
-## Add, filter, sort, edit and track customers:
+
+## Add, filter, sort, edit, and track customers:
 
 <p align="center">
     <picture>
-      <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/twentyhq/twenty/main/packages/twenty-docs/static/img/index-dark.png">
-      <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/twentyhq/twenty/main/packages/twenty-docs/static/img/index-light.png">
+      <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/twentyhq/twenty/v0.12.0/packages/twenty-docs/static/img/index-dark.png">
+      <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/twentyhq/twenty/v0.12.0/packages/twenty-docs/static/img/index-light.png">
       <img src="./packages/twenty-docs/static/img/visualise-customer-light.png" alt="Companies view" />
     </picture>
 </p>
@@ -81,8 +92,8 @@ Below are some features we have implemented to date:
 
 <p align="center">
     <picture>
-      <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/twentyhq/twenty/main/packages/twenty-docs/static/img/kanban-dark.png">
-      <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/twentyhq/twenty/main/packages/twenty-docs/static/img/kanban-light.png">
+      <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/twentyhq/twenty/v0.12.0/packages/twenty-docs/static/img/kanban-dark.png">
+      <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/twentyhq/twenty/v0.12.0/packages/twenty-docs/static/img/kanban-light.png">
       <img src="./packages/twenty-docs/static/img/follow-your-deals-light.png" alt="Companies view" />
     </picture>
 </p>
@@ -91,8 +102,8 @@ Below are some features we have implemented to date:
 
 <p align="center">
     <picture>
-      <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/twentyhq/twenty/main/packages/twenty-docs/static/img/emails-dark.png">
-      <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/twentyhq/twenty/main/packages/twenty-docs/static/img/emails-light.png">
+      <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/twentyhq/twenty/v0.12.0/packages/twenty-docs/static/img/emails-dark.png">
+      <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/twentyhq/twenty/v0.12.0/packages/twenty-docs/static/img/emails-light.png">
       <img src="./packages/twenty-docs/static/img/rich-notes-light.png" alt="Companies view" />
     </picture>
 </p>
@@ -101,8 +112,8 @@ Below are some features we have implemented to date:
 
 <p align="center">
     <picture>
-      <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/twentyhq/twenty/main/packages/twenty-docs/static/img/data-dark.png">
-      <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/twentyhq/twenty/main/packages/twenty-docs/static/img/data-light.png">
+      <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/twentyhq/twenty/v0.12.0/packages/twenty-docs/static/img/data-dark.png">
+      <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/twentyhq/twenty/v0.12.0/packages/twenty-docs/static/img/data-light.png">
       <img src="./packages/twenty-docs/static/img/rich-notes-light.png" alt="Companies view" />
     </picture>
 </p>
@@ -111,8 +122,8 @@ Below are some features we have implemented to date:
 
 <p align="center">
     <picture>
-      <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/twentyhq/twenty/main/packages/twenty-docs/static/img/notes-dark.png">
-      <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/twentyhq/twenty/main/packages/twenty-docs/static/img/notes-light.png">
+      <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/twentyhq/twenty/v0.12.0/packages/twenty-docs/static/img/notes-dark.png">
+      <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/twentyhq/twenty/v0.12.0/packages/twenty-docs/static/img/notes-light.png">
       <img src="./packages/twenty-docs/static/img/rich-notes-light.png" alt="Companies view" />
     </picture>
 </p>
@@ -121,8 +132,8 @@ Below are some features we have implemented to date:
 
 <p align="center">
     <picture>
-      <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/twentyhq/twenty/main/packages/twenty-docs/static/img/tasks-dark.png">
-      <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/twentyhq/twenty/main/packages/twenty-docs/static/img/tasks-light.png">
+      <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/twentyhq/twenty/v0.12.0/packages/twenty-docs/static/img/tasks-dark.png">
+      <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/twentyhq/twenty/v0.12.0/packages/twenty-docs/static/img/tasks-light.png">
       <img src="./packages/twenty-docs/static/img/create-tasks-light.png" alt="Companies view" />
     </picture>
 </p>
@@ -131,8 +142,8 @@ Below are some features we have implemented to date:
 
 <p align="center">
     <picture>
-      <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/twentyhq/twenty/main/packages/twenty-docs/static/img/keyboard-dark.png">
-      <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/twentyhq/twenty/main/packages/twenty-docs/static/img/keyboard-light.png">
+      <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/twentyhq/twenty/v0.12.0/packages/twenty-docs/static/img/keyboard-dark.png">
+      <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/twentyhq/twenty/v0.12.0/packages/twenty-docs/static/img/keyboard-light.png">
       <img src="./packages/twenty-docs/static/img/shortcut-navigation-light.png" alt="Companies view" />
     </picture>
 </p>
@@ -141,8 +152,8 @@ Below are some features we have implemented to date:
 
 <p align="center">
     <picture>
-      <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/twentyhq/twenty/main/packages/twenty-docs/static/img/api-dark.png">
-      <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/twentyhq/twenty/main/packages/twenty-docs/static/img/api-light.png">
+      <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/twentyhq/twenty/v0.12.0/packages/twenty-docs/static/img/api-dark.png">
+      <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/twentyhq/twenty/v0.12.0/packages/twenty-docs/static/img/api-light.png">
       <img src="./packages/twenty-docs/static/img/shortcut-navigation-light.png" alt="Companies view" />
     </picture>
 </p>

install.sh

@@ -112,14 +112,16 @@ if command -v nc &> /dev/null; then
     read -p "Enter a new port number: " new_port
     if [[ $(uname) == "Darwin" ]]; then
       sed -i '' "s/$port:$port/$new_port:$port/g" docker-compose.yml
+      sed -E -i '' "s|^SERVER_URL=http://localhost:[0-9]+|SERVER_URL=http://localhost:$new_port|g" .env
     else
       sed -i'' "s/$port:$port/$new_port:$port/g" docker-compose.yml
+      sed -E -i'' "s|^SERVER_URL=http://localhost:[0-9]+|SERVER_URL=http://localhost:$new_port|g" .env
     fi
     port=$new_port
   done
 fi
 
-# Ask user if he wants to start the project
+# Ask user if they want to start the project
 read -p "🚀 Do you want to start the project now? (Y/n) " answer
 if [ "$answer" = "n" ]; then
   echo "✅ Project setup completed. Run 'docker compose up -d' to start."
@@ -148,7 +150,7 @@ function ask_open_browser {
   fi
 }
 
-# Ask user if he wants to open the project
+# Ask user if they want to open the project
 # Running on macOS
 if [[ $(uname) == "Darwin" ]]; then
   ask_open_browser

nx.json

@@ -1,11 +1,33 @@
 {
   "namedInputs": {
-    "default": ["{projectRoot}/**/*", "sharedGlobals"],
-    "sharedGlobals": ["{workspaceRoot}/.github/workflows/**/*"]
+    "default": ["{projectRoot}/**/*"],
+    "excludeStories": [
+      "default",
+      "!{projectRoot}/.storybook/*",
+      "!{projectRoot}/**/tsconfig.storybook.json",
+      "!{projectRoot}/**/*.stories.(ts|tsx)",
+      "!{projectRoot}/**/__stories__/*"
+    ],
+    "excludeTests": [
+      "default",
+      "!{projectRoot}/**/jest.config.(js|ts)",
+      "!{projectRoot}/**/tsconfig.spec.json",
+      "!{projectRoot}/**/*.test.(ts|tsx)",
+      "!{projectRoot}/**/*.spec.(ts|tsx)",
+      "!{projectRoot}/**/__tests__/*"
+    ],
+    "production": [
+      "default",
+      "excludeStories",
+      "excludeTests",
+      "!{projectRoot}/**/__mocks__/*",
+      "!{projectRoot}/**/testing/*"
+    ]
   },
   "targetDefaults": {
     "build": {
       "cache": true,
+      "inputs": ["^production", "production"],
       "dependsOn": ["^build"]
     },
     "start": {
@@ -58,6 +80,11 @@
       "executor": "@nx/jest:jest",
       "cache": true,
       "dependsOn": ["^build"],
+      "inputs": [
+        "^default",
+        "excludeStories",
+        "{workspaceRoot}/jest.preset.js"
+      ],
       "outputs": ["{projectRoot}/coverage"],
       "options": {
         "jestConfig": "{projectRoot}/jest.config.ts",
@@ -79,63 +106,132 @@
       "dependsOn": ["^build"]
     },
     "storybook:build": {
-      "executor": "@nx/storybook:build",
+      "executor": "nx:run-commands",
       "cache": true,
       "dependsOn": ["^build"],
-      "inputs": [
-        "default",
-        "^default",
-        "{projectRoot}/.storybook/**/*",
-        "{projectRoot}/tsconfig.storybook.json"
-      ],
-      "outputs": ["{options.outputDir}"],
+      "inputs": ["^default", "excludeTests"],
+      "outputs": ["{projectRoot}/{options.output-dir}"],
       "options": {
-        "outputDir": "{projectRoot}/storybook-static",
-        "configDir": "{projectRoot}/.storybook"
+        "cwd": "{projectRoot}",
+        "command": "storybook build",
+        "output-dir": "storybook-static",
+        "config-dir": ".storybook"
       }
     },
-    "storybook:dev": {
-      "executor": "@nx/storybook:storybook",
+    "storybook:serve:dev": {
+      "executor": "nx:run-commands",
       "cache": true,
       "dependsOn": ["^build"],
       "options": {
-        "configDir": "{projectRoot}/.storybook"
+        "cwd": "{projectRoot}",
+        "command": "storybook dev",
+        "config-dir": ".storybook"
       }
     },
-    "storybook:static": {
-      "executor": "@nx/web:file-server",
+    "storybook:serve:static": {
+      "executor": "nx:run-commands",
+      "dependsOn": ["storybook:build"],
       "options": {
-        "staticFilePath": "{projectRoot}/storybook-static",
-        "watch": false
+        "cwd": "{projectRoot}",
+        "command": "npx http-server {args.staticDir} -a={args.host} --port={args.port} --silent={args.silent}",
+        "staticDir": "storybook-static",
+        "host": "localhost",
+        "port": 6006,
+        "silent": true
       }
     },
     "storybook:test": {
       "executor": "nx:run-commands",
+      "cache": true,
+      "inputs": ["^default", "excludeTests"],
+      "outputs": ["{projectRoot}/coverage/storybook"],
       "options": {
         "cwd": "{projectRoot}",
         "commands": [
-          "test-storybook --url {options.url} --maxWorkers=3 --coverage",
-          "nyc report --reporter=lcov --reporter=text-summary -t coverage/storybook --report-dir coverage/storybook --check-coverage"
+          "test-storybook --url http://localhost:{args.port} --maxWorkers=3 --coverage --coverageDirectory={args.coverageDir}",
+          "nx storybook:coverage {projectName} --coverageDir={args.coverageDir}"
         ],
-        "parallel": false
+        "parallel": false,
+        "coverageDir": "coverage/storybook",
+        "port": 6006
+      }
+    },
+    "storybook:test:no-coverage": {
+      "executor": "nx:run-commands",
+      "inputs": ["^default", "excludeTests"],
+      "options": {
+        "cwd": "{projectRoot}",
+        "commands": [
+          "test-storybook --url http://localhost:{args.port} --maxWorkers=2"
+        ],
+        "port": 6006
+      }
+    },
+    "storybook:coverage": {
+      "executor": "nx:run-commands",
+      "cache": true,
+      "inputs": [
+        "^default",
+        "excludeTests",
+        "{projectRoot}/coverage/storybook/coverage-storybook.json"
+      ],
+      "outputs": [
+        "{projectRoot}/coverage/storybook",
+        "!{projectRoot}/coverage/storybook/coverage-storybook.json"
+      ],
+      "options": {
+        "command": "npx nyc report --reporter={args.reporter} --reporter=text-summary -t {args.coverageDir} --report-dir {args.coverageDir} --check-coverage --cwd={projectRoot}",
+        "coverageDir": "coverage/storybook",
+        "reporter": "lcov"
+      },
+      "configurations": {
+        "text": { "reporter": "text" }
+      }
+    },
+    "storybook:serve-and-test:static": {
+      "executor": "nx:run-commands",
+      "options": {
+        "commands": [
+          "npx concurrently --kill-others --success=first -n SB,TEST 'nx storybook:serve:static {projectName} --port={args.port}' 'npx wait-on tcp:{args.port} && nx storybook:test {projectName} --port={args.port}'"
+        ],
+        "port": 6006
+      }
+    },
+    "storybook:serve-and-test:static:performance": {
+      "executor": "nx:run-commands",
+      "options": {
+        "commands": [
+          "npx concurrently --kill-others --success=first -n SB,TEST 'nx storybook:serve:dev {projectName} --configuration=performance --port={args.port}' 'npx wait-on tcp:{args.port} && nx storybook:test:no-coverage {projectName} --port={args.port} --configuration=performance'"
+        ],
+        "port": 6006
       }
     },
     "chromatic": {
       "executor": "nx:run-commands",
       "options": {
         "cwd": "{projectRoot}",
-        "command": "cross-var chromatic --project-token=$CHROMATIC_PROJECT_TOKEN --build-script-name=storybook:build --exit-zero-on-changes={args.ci}",
-        "ci": false
+        "commands": [
+          {
+            "command": "nx storybook:build {projectName}",
+            "forwardAllArgs": false
+          },
+          "cross-var chromatic --project-token=$CHROMATIC_PROJECT_TOKEN --storybook-build-dir=storybook-static {args.ci}"
+        ],
+        "parallel": false
       },
       "configurations": {
         "ci": {
-          "ci": true
+          "ci": "--exit-zero-on-changes"
         }
       }
     },
     "@nx/jest:jest": {
       "cache": true,
-      "inputs": ["default", "^default", "{workspaceRoot}/jest.preset.js"],
+      "inputs": [
+        "^default",
+        "excludeStories",
+        "{workspaceRoot}/jest.preset.js"
+      ],
       "options": {
         "passWithNoTests": true
       },

oss-gg/twenty-content-challenges/1-create-youtube-video-about-20.md

@@ -0,0 +1,21 @@
+**Side Quest**: Create a YouTube Video about Twenty showcasing a specific way to use Twenty effectively.
+**Points**: 750 Points
+**Proof**: Add your oss handle and YouTube video link to the list below.
+
+Please follow the following schema:
+
+---
+
+» 05-April-2024 by YOUR oss.gg HANDLE » YouTube Link: https://link.to/content
+
+---
+
+////////////////////////////
+
+Your turn 👇
+
+////////////////////////////
+
+» 02-October-2024 by [yourhandle](https://oss.gg/yourhandle) YouTube Link: [YouTube](https://twenty.com/)
+
+---

oss-gg/twenty-content-challenges/2-write-blog-post-about-20.md

@@ -0,0 +1,21 @@
+**Side Quest**: Write a blog post about sharing your experience using Twenty in a detailed format on any platform.
+**Points**: 750 Points
+**Proof**: Add your oss handle and blog link to the list below.
+
+Please follow the following schema:
+
+---
+
+» 05-April-2024 by YOUR oss.gg HANDLE » blog Link: https://link.to/content
+
+---
+
+////////////////////////////
+
+Your turn 👇
+
+////////////////////////////
+
+» 02-October-2024 by [yourhandle](https://oss.gg/yourhandle) blog Link: [blog](https://twenty.com/)
+
+---

oss-gg/twenty-content-challenges/3-write-selfthost-guide-blog-post-20.md

@@ -0,0 +1,21 @@
+**Side Quest**: Write a blog post about self-hosting Twenty in a detailed format on any platform.
+**Points**: 750 Points
+**Proof**: Add your oss handle and blog link to the list below.
+
+Please follow the following schema:
+
+---
+
+» 05-April-2024 by YOUR oss.gg HANDLE » blog Link: https://link.to/content
+
+---
+
+////////////////////////////
+
+Your turn 👇
+
+////////////////////////////
+
+» 02-October-2024 by [yourhandle](https://oss.gg/yourhandle) blog Link: [blog](https://twenty.com/)
+
+---

oss-gg/twenty-content-challenges/4-create-promotional-video-20-share.md

@@ -0,0 +1,21 @@
+**Side Quest**: Create a promotional video for Twenty and share it on social media.
+**Points**: 750 Points
+**Proof**: Add your oss handle and video link to the list below.
+
+Please follow the following schema:
+
+---
+
+» 05-April-2024 by YOUR oss.gg HANDLE » video Link: https://link.to/content
+
+---
+
+////////////////////////////
+
+Your turn 👇
+
+////////////////////////////
+
+» 02-October-2024 by [yourhandle](https://oss.gg/yourhandle) video Link: [video](https://twenty.com/)
+
+---

oss-gg/twenty-design-challenges/1-design-promotional-poster-20-share.md

@@ -0,0 +1,23 @@
+**Side Quest**: Design a promotional poster of Twenty and share it on social media.
+**Points**: 300 Points
+**Proof**: Add your oss handle and poster link to the list below.
+
+Please follow the following schema:
+
+---
+
+» 05-April-2024 by YOUR oss.gg HANDLE » poster Link: https://link.to/content
+
+---
+
+////////////////////////////
+
+Your turn 👇
+
+////////////////////////////
+
+» 02-October-2024 by [yourhandle](https://oss.gg/yourhandle) poster Link: [poster](https://twenty.com/)
+
+» 11-October-2024 by [thefool76](https://oss.gg/thefool76) poster Link: [poster](https://drive.google.com/file/d/1cIC1eitvY6zKVTXKq2LnVrS_2Ho9H8-P/view?usp=sharing)
+
+---

oss-gg/twenty-design-challenges/2-design-new-logo-twenty.md

@@ -0,0 +1,24 @@
+**Side Quest**: Design/Create new Twenty logo, tweet your design, and mention @twentycrm.
+**Points**: 300 Points
+**Proof**: Create a logo uploade it on any of the platform and add your oss handle and logo link to the list below.
+
+Please follow the following schema:
+
+---
+
+» 05-April-2024 by YOUR oss.gg HANDLE » Logo Link: https://link.to/content » tweet Link: https://link.to/content
+
+---
+
+////////////////////////////
+
+Your turn 👇
+
+////////////////////////////
+
+» 08-October-2024 by [adityadeshlahre](https://oss.gg/adityadeshlahre) Logo Link: [logo](https://drive.google.com/drive/folders/13k22xMnX2fhnWK94vas_hO1t-ImqXcHZ?usp=drive_link) » tweet Link: [tweet](https://x.com/adityadeshlahre/status/1843354963176718374)
+
+» 11-October-2024 by [thefool76](https://oss.gg/thefool76) Logo Link: [logo](https://drive.google.com/file/d/1DxSwNY_i90kGgWzPQj5SxScBz_6r02l4/view?usp=sharing) » tweet Link: [tweet](https://x.com/thefool1135/status/1844693487067034008)
+
+
+---

oss-gg/twenty-design-challenges/3-create-custom-interfact-theme-20.md

@@ -0,0 +1,21 @@
+**Side Quest**: Duplicate the Figma file from the main repo and customize the variables to create a unique interface theme for Twenty.
+**Points**: 750 Points
+**Proof**: Add your oss handle and Figma link to the list below.
+
+Please follow the following schema:
+
+---
+
+» 05-April-2024 by YOUR oss.gg HANDLE » Figma Link: https://link.to/content 
+
+---
+
+////////////////////////////
+
+Your turn 👇
+
+////////////////////////////
+
+» 02-October-2024 by [yourhandle](https://oss.gg/yourhandle) Figma Link: [Figma](https://twenty.com/)
+
+---

oss-gg/twenty-dev-challenges/1-write-migration-script-other-crm-to-20.md

@@ -0,0 +1,21 @@
+**Side Quest**: Develop a script to facilitate the migration of data from another CRM to Twenty. 
+**Points**: 750 Points
+**Proof**: Add your oss handle and record video and share link to the list below. In video show the working proof of your created script.
+
+Please follow the following schema:
+
+---
+
+» 05-April-2024 by YOUR oss.gg HANDLE » video Link: https://link.to/content
+
+---
+
+////////////////////////////
+
+Your turn 👇
+
+////////////////////////////
+
+» 02-October-2024 by [yourhandle](https://oss.gg/yourhandle) video Link: [video](https://twenty.com/)
+
+---

oss-gg/twenty-dev-challenges/2-create-raycast-integration-for-20.md

@@ -0,0 +1,21 @@
+**Side Quest**: Develop an integration for Raycast that enables users to create records on any object within Twenty directly from Raycast.
+**Points**: 1500 Points
+**Proof**: Add your oss handle and record video and share link to the list below. In video show the workflow of the your integration created and perform some task.
+
+Please follow the following schema:
+
+---
+
+» 05-April-2024 by YOUR oss.gg HANDLE » video Link: https://link.to/content
+
+---
+
+////////////////////////////
+
+Your turn 👇
+
+////////////////////////////
+
+» 02-October-2024 by [yourhandle](https://oss.gg/yourhandle) video Link: [video](https://twenty.com/)
+
+---

oss-gg/twenty-no-code-challenges/1-create-n8n-template-integrate-20-API.md

@@ -0,0 +1,21 @@
+**Side Quest**: Create an n8n workflow that empowers Twenty by connecting it to another tool.
+**Points**: 750 Points
+**Proof**: Add your oss handle and template link to the list below.
+
+Please follow the following schema:
+
+---
+
+» 05-April-2024 by YOUR oss.gg HANDLE » template Link: https://link.to/content
+
+---
+
+////////////////////////////
+
+Your turn 👇
+
+////////////////////////////
+
+» 02-October-2024 by [yourhandle](https://oss.gg/yourhandle) template Link: [template](https://twenty.com/)
+
+---

oss-gg/twenty-no-code-challenges/2-write-selfthost-guide-blog-post-20.md

@@ -0,0 +1,21 @@
+**Side Quest**: Write a comprehensive guide on how to integrate Twenty with marketing automation tool (n8n, Zapier). Include a concrete use case and explain how to leverage AI to write API requests for non-developers and share it.
+**Points**: 1500 Points
+**Proof**: Add your oss handle and guide link to the list below.
+
+Please follow the following schema:
+
+---
+
+» 05-April-2024 by YOUR oss.gg HANDLE » guide Link: https://link.to/content
+
+---
+
+////////////////////////////
+
+Your turn 👇
+
+////////////////////////////
+
+» 02-October-2024 by [yourhandle](https://oss.gg/yourhandle) guide Link: [guide](https://twenty.com/)
+
+---

oss-gg/twenty-side-quest/1-quote-tweet-20-oss-gg-launch.md

@@ -0,0 +1,30 @@
+**Side Quest**: Like & Re-Tweet oss.gg Launch Tweet. Quote-tweet it tagging @twentycrm to say you’ll be contributing.
+**Points**: 50 Points
+**Proof**: Add a screenshot of the retweet to the PR description. Add a link to your retweet in the list below.
+
+Please follow the following schema:
+
+---
+
+» 05-April-2024 by YOUR NAME
+» Link to Tweet: https://x.com/...
+
+---
+
+////////////////////////////
+
+Your turn 👇
+
+////////////////////////////
+
+» 10-October-2024 by Devansh Baghel
+» Link to Tweet: https://x.com/DevanshBaghel5/status/1844359648037748954
+
+» 11-October-2024 by Bhavesh Mishra
+» Link to Tweet: https://x.com/thefool1135/status/1844453425188405326
+
+» 11-October-2024 by Chirag Arora
+» Link to Tweet: https://x.com/Chirag8023/status/1844689900668682699
+
+» 11-October-2024 by Aritra Sadhukhan
+» Link to Tweet: https://x.com/AritraDevelops/status/1844670236512878646

oss-gg/twenty-side-quest/2-tweet-about-fav-twenty-feature.md

@@ -0,0 +1,26 @@
+**Side Quest**: Share a tweet about your favorite feature in Twenty. Tweet about your favorite feature in Twenty and mention @twentycrm.
+**Points**: 50 Points
+**Proof**: Add a screenshot of the tweet to the PR description. Add a link to your tweet in the list below.
+
+Please follow the following schema:
+
+---
+
+» 05-April-2024 by YOUR NAME
+» Link to Tweet: https://x.com/...
+
+---
+
+////////////////////////////
+
+Your turn 👇
+
+////////////////////////////
+
+» 10-October-2024 by Devansh Baghel
+» Link to Tweet: https://x.com/DevanshBaghel5/status/1844384722119704972
+
+» 11-October-2024 by Bhavesh Mishra
+» Link to Tweet: https://x.com/thefool1135/status/1844456500380696969
+
+---

oss-gg/twenty-side-quest/3-bug-report.md

@@ -0,0 +1,23 @@
+**Side Quest**: Create a bug report. Use the Twenty bug issue template to report a bug in detail, including steps to reproduce it.
+**Points**: 50-150 Points
+**Proof**: Add a link to your bug report in the list below.
+
+Please follow the following schema:
+
+---
+
+» 05-April-2024 by YOUR NAME
+» Link to bug report: https://github.com/twentyhq/twenty/issues/...
+
+---
+
+////////////////////////////
+
+Your turn 👇
+
+////////////////////////////
+
+» 10-October-2024 by Devansh Baghel
+» Link to bug report: https://github.com/twentyhq/twenty/issues/7560
+
+---

oss-gg/twenty-side-quest/4-meme-magic.md

@@ -0,0 +1,26 @@
+**Side Quest**: Meme Magic: Craft a meme where the number twenty plays a role. Tweet it, and tag @twentycrm.
+**Points**: 150 Points
+**Proof**: Add a screenshot of meme to the PR description. Add a link to your tweet in the list below.
+
+Please follow the following schema:
+
+---
+
+» 05-April-2024 by YOUR NAME
+» Link to Tweet: https://x.com/...
+
+---
+
+////////////////////////////
+
+Your turn 👇
+
+////////////////////////////
+
+» 10-October-2024 by Teddy ASSIH
+» Link to Tweet: https://x.com/ion_finisher/status/1844389252253299173
+
+» 11-October-2024 by Bhavesh Mishra
+» Link to Tweet: https://x.com/thefool1135/status/1844458836402503931
+
+---

oss-gg/twenty-side-quest/5-gif-magic.md

@@ -0,0 +1,26 @@
+**Side Quest**: Gif Magic: Create a gif related to Twenty. Tweet it, and tag  @twentycrm.
+**Points**: 150 Points
+**Proof**: Add a screenshot of GIF on Giphy to the PR description. Add a link to your GIPHY in the list below.
+
+Please follow the following schema:
+
+---
+
+» 05-April-2024 by YOUR NAME
+» Link to gif: https://giphy.com/...
+
+---
+
+////////////////////////////
+
+Your turn 👇
+
+////////////////////////////
+
+» 10-October-2024 by Teddy ASSIH
+» Link to gif: https://giphy.com/gifs/oss-crm-twenty-VWDHAIlGTbc6Nqdza9
+
+» 11-October-2024 by Bhavesh Mishra
+» Link to gif: https://shorturl.at/yln9H
+
+---

oss-gg/twenty-side-quest/6-quest-wizard.md

@@ -0,0 +1,19 @@
+**Side Quest**: Complete all Twenty side quests
+**Points**: 300 Points
+**Proof**: Add screenshots for each side quest to the PR description. Add your name to the list below.
+
+Please follow the following schema:
+
+---
+
+ » 05-April-2024 by YOUR NAME
+
+////////////////////////////
+
+Your turn 👇
+
+////////////////////////////
+
+» 01-October-2024 by X
+
+---

package.json

@@ -3,15 +3,13 @@
     "@air/react-drag-to-select": "^5.0.8",
     "@apollo/client": "^3.7.17",
     "@apollo/server": "^4.7.3",
+    "@aws-sdk/client-lambda": "^3.614.0",
     "@aws-sdk/client-s3": "^3.363.0",
     "@aws-sdk/credential-providers": "^3.363.0",
-    "@blocknote/core": "^0.12.1",
-    "@blocknote/react": "^0.12.2",
-    "@chakra-ui/accordion": "^2.3.0",
-    "@chakra-ui/system": "^2.6.0",
+    "@blocknote/mantine": "^0.15.3",
+    "@blocknote/react": "^0.15.3",
     "@codesandbox/sandpack-react": "^2.13.5",
-    "@docusaurus/core": "^3.1.0",
-    "@docusaurus/preset-classic": "^3.1.0",
+    "@dagrejs/dagre": "^1.1.2",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@envelop/on-resolve": "^4.1.0",
@@ -22,6 +20,8 @@
     "@hello-pangea/dnd": "^16.2.0",
     "@hookform/resolvers": "^3.1.1",
     "@jsdevtools/rehype-toc": "^3.0.2",
+    "@linaria/core": "^6.2.0",
+    "@linaria/react": "^6.2.1",
     "@mdx-js/react": "^3.0.0",
     "@nestjs/apollo": "^11.0.5",
     "@nestjs/axios": "^3.0.1",
@@ -36,35 +36,34 @@
     "@nestjs/serve-static": "^4.0.1",
     "@nestjs/terminus": "^9.2.2",
     "@nestjs/typeorm": "^10.0.0",
-    "@nivo/calendar": "^0.84.0",
-    "@nivo/core": "^0.84.0",
     "@nx/eslint-plugin": "^17.2.8",
     "@octokit/graphql": "^7.0.2",
     "@ptc-org/nestjs-query-core": "^4.2.0",
     "@ptc-org/nestjs-query-typeorm": "4.2.1-alpha.2",
     "@react-email/components": "0.0.12",
     "@react-email/render": "0.0.10",
-    "@sentry/node": "^7.99.0",
-    "@sentry/profiling-node": "^1.3.4",
-    "@sentry/react": "^7.88.0",
-    "@sentry/tracing": "^7.99.0",
+    "@sentry/node": "^8",
+    "@sentry/profiling-node": "^8",
+    "@sentry/react": "^8",
     "@sniptt/guards": "^0.2.0",
     "@stoplight/elements": "^8.0.5",
-    "@storybook/icons": "^1.2.9",
     "@swc/jest": "^0.2.29",
     "@tabler/icons-react": "^2.44.0",
     "@types/dompurify": "^3.0.5",
     "@types/facepaint": "^1.2.5",
     "@types/lodash.camelcase": "^4.3.7",
+    "@types/lodash.chunk": "^4.2.9",
     "@types/lodash.merge": "^4.6.7",
     "@types/lodash.pick": "^4.3.7",
-    "@types/mailparser": "^3.4.4",
     "@types/nodemailer": "^6.4.14",
     "@types/passport-microsoft": "^1.0.3",
+    "@wyw-in-js/vite": "^0.5.3",
     "add": "^2.0.6",
+    "addressparser": "^1.0.1",
     "afterframe": "^1.0.2",
     "apollo-server-express": "^3.12.0",
     "apollo-upload-client": "^17.0.0",
+    "archiver": "^7.0.1",
     "axios": "^1.6.2",
     "bcrypt": "^5.1.1",
     "better-sqlite3": "^9.2.2",
@@ -72,16 +71,15 @@
     "bullmq": "^4.14.0",
     "bytes": "^3.1.2",
     "class-transformer": "^0.5.1",
-    "clsx": "^1.2.1",
+    "clsx": "^2.1.1",
     "cross-env": "^7.0.3",
-    "crypto-js": "^4.2.0",
+    "css-loader": "^7.1.2",
     "danger-plugin-todos": "^1.3.1",
     "dataloader": "^2.2.2",
     "date-fns": "^2.30.0",
     "date-fns-tz": "^2.0.0",
     "debounce": "^2.0.0",
     "deep-equal": "^2.2.2",
-    "docusaurus-node-polyfills": "^1.0.0",
     "dompurify": "^3.0.11",
     "dotenv-cli": "^7.2.1",
     "drizzle-orm": "^0.29.3",
@@ -95,6 +93,7 @@
     "graphql-fields": "^2.0.3",
     "graphql-middleware": "^6.1.35",
     "graphql-rate-limit": "^3.3.0",
+    "graphql-scalars": "^1.23.0",
     "graphql-subscriptions": "2.0.0",
     "graphql-tag": "^2.12.6",
     "graphql-type-json": "^0.3.2",
@@ -110,8 +109,11 @@
     "jsonwebtoken": "^9.0.0",
     "libphonenumber-js": "^1.10.26",
     "lodash.camelcase": "^4.3.0",
+    "lodash.chunk": "^4.2.0",
+    "lodash.compact": "^3.0.1",
     "lodash.debounce": "^4.0.8",
     "lodash.groupby": "^4.6.0",
+    "lodash.identity": "^3.0.0",
     "lodash.isempty": "^4.4.0",
     "lodash.isequal": "^4.5.0",
     "lodash.isobject": "^3.0.2",
@@ -120,11 +122,12 @@
     "lodash.merge": "^4.6.2",
     "lodash.omit": "^4.5.0",
     "lodash.pick": "^4.4.0",
+    "lodash.pickby": "^4.6.0",
     "lodash.snakecase": "^4.1.1",
     "lodash.upperfirst": "^4.3.1",
     "luxon": "^3.3.0",
-    "mailparser": "^3.6.5",
     "microdiff": "^1.3.2",
+    "moize": "^6.1.6",
     "nest-commander": "^3.12.0",
     "next": "14.0.4",
     "next-mdx-remote": "^4.4.1",
@@ -163,6 +166,7 @@
     "react-router-dom": "^6.4.4",
     "react-textarea-autosize": "^8.4.1",
     "react-tooltip": "^5.13.1",
+    "reactflow": "^11.11.3",
     "recoil": "^0.7.7",
     "rehype-slug": "^6.0.0",
     "remark-behead": "^3.1.0",
@@ -175,20 +179,21 @@
     "stripe": "^14.17.0",
     "ts-key-enum": "^2.0.12",
     "tslib": "^2.3.0",
-    "tsup": "^8.0.1",
+    "tsup": "^8.2.4",
     "type-fest": "4.10.1",
-    "typeorm": "^0.3.17",
+    "typescript": "5.3.3",
+    "use-context-selector": "^2.0.0",
     "use-debounce": "^10.0.0",
     "uuid": "^9.0.0",
     "vite-tsconfig-paths": "^4.2.1",
     "xlsx-ugnis": "^0.19.3",
-    "zod": "^3.22.2"
+    "zod": "3.23.8"
   },
   "devDependencies": {
     "@babel/core": "^7.14.5",
     "@babel/preset-react": "^7.14.5",
-    "@docusaurus/module-type-aliases": "^3.1.0",
-    "@docusaurus/tsconfig": "3.1.0",
+    "@babel/preset-typescript": "^7.24.6",
+    "@crxjs/vite-plugin": "^1.0.14",
     "@graphql-codegen/cli": "^3.3.1",
     "@graphql-codegen/client-preset": "^4.1.0",
     "@graphql-codegen/typescript": "^3.0.4",
@@ -206,6 +211,7 @@
     "@nx/storybook": "18.3.3",
     "@nx/vite": "18.3.3",
     "@nx/web": "18.3.3",
+    "@playwright/test": "^1.46.0",
     "@sentry/types": "^7.109.0",
     "@storybook/addon-actions": "^7.6.3",
     "@storybook/addon-coverage": "^1.0.0",
@@ -215,6 +221,7 @@
     "@storybook/addon-onboarding": "^1.0.10",
     "@storybook/blocks": "^7.6.3",
     "@storybook/core-server": "7.6.3",
+    "@storybook/icons": "^1.2.9",
     "@storybook/jest": "^0.2.3",
     "@storybook/react": "^7.6.3",
     "@storybook/react-vite": "^7.6.3",
@@ -228,26 +235,31 @@
     "@swc/helpers": "~0.5.2",
     "@testing-library/jest-dom": "^6.1.5",
     "@testing-library/react": "14.0.0",
+    "@types/addressparser": "^1.0.3",
     "@types/apollo-upload-client": "^17.0.2",
     "@types/bcrypt": "^5.0.0",
     "@types/better-sqlite3": "^7.6.8",
     "@types/bytes": "^3.1.1",
-    "@types/crypto-js": "^4.2.2",
+    "@types/chrome": "^0.0.267",
     "@types/deep-equal": "^1.0.1",
     "@types/express": "^4.17.13",
     "@types/graphql-fields": "^1.3.6",
     "@types/graphql-upload": "^8.0.12",
     "@types/jest": "^29.5.11",
     "@types/js-cookie": "^3.0.3",
+    "@types/js-levenshtein": "^1.1.3",
     "@types/lodash.camelcase": "^4.3.7",
+    "@types/lodash.compact": "^3.0.9",
     "@types/lodash.debounce": "^4.0.7",
     "@types/lodash.groupby": "^4.6.9",
+    "@types/lodash.identity": "^3.0.9",
     "@types/lodash.isempty": "^4.4.7",
     "@types/lodash.isequal": "^4.5.7",
     "@types/lodash.isobject": "^3.0.7",
     "@types/lodash.kebabcase": "^4.1.7",
     "@types/lodash.mapvalues": "^4.6.9",
     "@types/lodash.omit": "^4.5.9",
+    "@types/lodash.pickby": "^4.6.9",
     "@types/lodash.snakecase": "^4.1.7",
     "@types/lodash.upperfirst": "^4.3.7",
     "@types/luxon": "^3.3.0",
@@ -255,6 +267,7 @@
     "@types/node": "18.19.26",
     "@types/passport-google-oauth20": "^2.0.11",
     "@types/passport-jwt": "^3.0.8",
+    "@types/pluralize": "^0.0.33",
     "@types/react": "^18.2.39",
     "@types/react-datepicker": "^6.2.0",
     "@types/react-dom": "^18.2.15",
@@ -273,7 +286,7 @@
     "danger": "^11.3.0",
     "dotenv-cli": "^7.2.1",
     "drizzle-kit": "^0.20.14",
-    "esbuild": "^0.20.2",
+    "esbuild": "^0.23.0",
     "eslint": "^8.53.0",
     "eslint-config-next": "14.0.4",
     "eslint-config-prettier": "^9.1.0",
@@ -297,7 +310,7 @@
     "msw": "^2.0.11",
     "msw-storybook-addon": "2.0.0--canary.122.b3ed3b1.0",
     "nx": "18.3.3",
-    "playwright": "^1.40.1",
+    "playwright": "^1.46.0",
     "prettier": "^3.1.1",
     "raw-loader": "^4.0.2",
     "rimraf": "^5.0.5",
@@ -305,15 +318,14 @@
     "storybook": "^7.6.3",
     "storybook-addon-cookie": "^3.2.0",
     "storybook-addon-pseudo-states": "^2.1.2",
-    "storybook-dark-mode": "^4.0.1",
+    "storybook-dark-mode": "^3.0.3",
     "supertest": "^6.1.3",
     "ts-jest": "^29.1.1",
     "ts-loader": "^9.2.3",
     "ts-node": "10.9.1",
     "tsconfig-paths": "^4.2.0",
-    "tsx": "^4.7.2",
-    "typescript": "5.3.3",
-    "vite": "^5.0.0",
+    "tsx": "^4.17.0",
+    "vite": "^5.4.0",
     "vite-plugin-checker": "^0.6.2",
     "vite-plugin-dts": "3.8.1",
     "vite-plugin-svgr": "^4.2.0",
@@ -326,7 +338,7 @@
   },
   "license": "AGPL-3.0",
   "name": "twenty",
-  "packageManager": "yarn@4.0.2",
+  "packageManager": "yarn@4.4.0",
   "resolutions": {
     "graphql": "16.8.0",
     "type-fest": "4.10.1",
@@ -341,13 +353,13 @@
     "packages": [
       "packages/twenty-chrome-extension",
       "packages/twenty-front",
-      "packages/twenty-docs",
       "packages/twenty-server",
       "packages/twenty-emails",
       "packages/twenty-ui",
       "packages/twenty-utils",
       "packages/twenty-zapier",
       "packages/twenty-website",
+      "packages/twenty-e2e-testing",
       "tools/eslint-rules"
     ]
   }

packages/twenty-chrome-extension/.env.example

@@ -1,3 +1,6 @@
 VITE_SERVER_BASE_URL=https://api.twenty.com
 VITE_FRONT_BASE_URL=https://app.twenty.com
-VITE_MODE=production
+VITE_MODE=production
+
+# Used to generate packages/twenty-chrome-extension/src/generated/graphql.tsx
+AUTH_TOKEN=<YOUR-TOKEN-HERE>

packages/twenty-chrome-extension/.eslintrc.cjs

@@ -1,6 +1,6 @@
 module.exports = {
   extends: ['../../.eslintrc.cjs', '../../.eslintrc.react.cjs'],
-  ignorePatterns: ['!**/*', 'node_modules', 'dist', 'src/generated/*.tsx'],
+  ignorePatterns: ['!**/*', 'node_modules', 'dist', '**/generated/*'],
   overrides: [
     {
       files: ['*.ts', '*.tsx'],

packages/twenty-chrome-extension/.prettierignore

@@ -0,0 +1 @@
+src/generated

packages/twenty-chrome-extension/codegen.ts

@@ -1,7 +1,17 @@
 import { CodegenConfig } from '@graphql-codegen/cli';
 
 const config: CodegenConfig = {
-  schema: ['http://localhost:3000/graphql'],
+  schema: [
+    {
+      [`${import.meta.env.VITE_SERVER_BASE_URL}/graphql`]: {
+        // some of the mutations and queries require authorization (people or companies)
+        // so to regenerate the schema with types we need to pass an auth token
+        headers: {
+          Authorization: `Bearer ${import.meta.env.AUTH_TOKEN}`,
+        },
+      },
+    },
+  ],
   overwrite: true,
   documents: ['./src/**/*.ts', '!src/generated/**/*.*'],
   generates: {

packages/twenty-chrome-extension/options.html

@@ -1,12 +0,0 @@
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" href="/icons/android/android-launchericon-48-48.png" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Twenty</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/options/index.tsx"></script>
-  </body>
-</html>

packages/twenty-chrome-extension/package.json

@@ -5,19 +5,6 @@
   "version": "0.0.1",
   "type": "module",
   "scripts": {
-    "nx": "NX_DEFAULT_PROJECT=twenty-chrome-extension node ../../node_modules/nx/bin/nx.js",
-    "clean": "npx rimraf ./dist",
-    "start": "yarn clean && VITE_MODE=development vite",
-    "build": "yarn clean && npx tsc && npx vite build",
-    "lint": "eslint . --report-unused-disable-directives --max-warnings 0 --config .eslintrc.cjs",
-    "graphql:generate": "graphql-codegen",
-    "fmt": "prettier --check \"src/**/*.ts\" \"src/**/*.tsx\"",
-    "fmt:fix": "prettier --cache --write \"src/**/*.ts\" \"src/**/*.tsx\""
-  },
-  "dependencies": {
-    "@types/chrome": "^0.0.256"
-  },
-  "devDependencies": {
-    "@crxjs/vite-plugin": "^1.0.14"
+    "build": "npx vite build"
   }
 }

packages/twenty-chrome-extension/page-inaccessible.html

@@ -0,0 +1,12 @@
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/icons/android/android-launchericon-48-48.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Twenty</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/options/page-inaccessible-index.tsx"></script>
+  </body>
+</html>

packages/twenty-chrome-extension/project.json

@@ -0,0 +1,70 @@
+{
+  "name": "twenty-chrome-extension",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "application",
+  "tags": ["scope:frontend"],
+  "targets": {
+    "build": {
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "outputPath": "{projectRoot}/dist"
+      }
+    },
+    "start": {
+      "executor": "nx:run-commands",
+      "dependsOn": ["build"],
+      "options": {
+        "cwd": "packages/twenty-chrome-extension",
+        "command": "VITE_MODE=development vite"
+      }
+    },
+    "preview": {
+      "executor": "@nx/vite:preview-server",
+      "options": {
+        "buildTarget": "twenty-chrome-extension:build",
+        "port": 3002,
+        "open": true
+      }
+    },
+    "reset:env": {
+      "executor": "nx:run-commands",
+      "inputs": ["{projectRoot}/.env.example"],
+      "outputs": ["{projectRoot}/.env"],
+      "cache": true,
+      "options": {
+        "cwd": "{projectRoot}",
+        "command": "cp .env.example .env"
+      }
+    },
+    "typecheck": {},
+    "lint": {
+      "options": {
+        "lintFilePatterns": [
+          "{projectRoot}/src/**/*.{ts,tsx,json}",
+          "{projectRoot}/package.json"
+        ],
+        "maxWarnings": 0,
+        "reportUnusedDisableDirectives": "error"
+      },
+      "configurations": {
+        "ci": { "eslintConfig": "{projectRoot}/.eslintrc-ci.cjs" },
+        "fix": {}
+      }
+    },
+    "fmt": {
+      "options": {
+        "files": "src"
+      },
+      "configurations": {
+        "fix": {}
+      }
+    },
+    "graphql:generate": {
+      "executor": "nx:run-commands",
+      "options": {
+        "cwd": "{projectRoot}",
+        "command": "graphql-codegen"
+      }
+    }
+  }
+}

packages/twenty-chrome-extension/sidepanel.html

@@ -0,0 +1,22 @@
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/icons/android/android-launchericon-48-48.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Twenty</title>
+    <style>
+      /* Reset margin and padding */
+      html, body {
+        margin: 0;
+        padding: 0;
+        height: 100%; /* Ensure body takes full viewport height */
+        overflow: hidden; /* Prevents scrollbars from appearing */
+      }
+    </style>
+
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/options/index.tsx"></script>
+  </body>
+</html>

packages/twenty-chrome-extension/src/background/index.ts

@@ -1,40 +1,35 @@
-import Crypto from 'crypto-js';
-
-import { openOptionsPage } from '~/background/utils/openOptionsPage';
-import { exchangeAuthorizationCode } from '~/db/auth.db';
 import { isDefined } from '~/utils/isDefined';
 
 // Open options page programmatically in a new tab.
-chrome.runtime.onInstalled.addListener((details) => {
-  if (details.reason === 'install') {
-    openOptionsPage();
-  }
-});
+// chrome.runtime.onInstalled.addListener((details) => {
+//   if (details.reason === 'install') {
+//     openOptionsPage();
+//   }
+// });
 
-// Open options page when extension icon is clicked.
-chrome.action.onClicked.addListener((tab) => {
-  chrome.tabs.sendMessage(tab.id ?? 0, { action: 'TOGGLE' });
-});
+chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: true });
 
 // This listens for an event from other parts of the extension, such as the content script, and performs the required tasks.
 // The cases themselves are labelled such that their operations are reflected by their names.
 chrome.runtime.onMessage.addListener((message, _, sendResponse) => {
   switch (message.action) {
-    case 'getActiveTab': // e.g. "https://linkedin.com/company/twenty/"
-      chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
-        if (isDefined(tabs) && isDefined(tabs[0])) {
-          sendResponse({ tab: tabs[0] });
+    case 'getActiveTab': {
+      // e.g. "https://linkedin.com/company/twenty/"
+      chrome.tabs.query({ active: true, currentWindow: true }, ([tab]) => {
+        if (isDefined(tab) && isDefined(tab.id)) {
+          sendResponse({ tab });
         }
       });
       break;
-    case 'openOptionsPage':
-      openOptionsPage();
-      break;
-    case 'CONNECT':
-      launchOAuth(({ status, message }) => {
-        sendResponse({ status, message });
+    }
+    case 'openSidepanel': {
+      chrome.tabs.query({ active: true, currentWindow: true }, ([tab]) => {
+        if (isDefined(tab) && isDefined(tab.id)) {
+          chrome.sidePanel.open({ tabId: tab.id });
+        }
       });
       break;
+    }
     default:
       break;
   }
@@ -42,89 +37,61 @@ chrome.runtime.onMessage.addListener((message, _, sendResponse) => {
   return true;
 });
 
-const generateRandomString = (length: number) => {
-  const charset =
-    'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_';
-  let result = '';
-  for (let i = 0; i < length; i++) {
-    result += charset.charAt(Math.floor(Math.random() * charset.length));
-  }
-  return result;
-};
-
-const generateCodeVerifierAndChallenge = () => {
-  const codeVerifier = generateRandomString(32);
-  const hash = Crypto.SHA256(codeVerifier);
-  const codeChallenge = hash
-    .toString(Crypto.enc.Base64)
-    .replace(/\+/g, '-')
-    .replace(/\//g, '_')
-    .replace(/=+$/, '');
-
-  return { codeVerifier, codeChallenge };
-};
-
-const launchOAuth = (
-  callback: ({ status, message }: { status: boolean; message: string }) => void,
-) => {
-  const { codeVerifier, codeChallenge } = generateCodeVerifierAndChallenge();
-  const redirectUrl = chrome.identity.getRedirectURL();
-  chrome.identity
-    .launchWebAuthFlow({
-      url: `${
-        import.meta.env.VITE_FRONT_BASE_URL
-      }/authorize?clientId=chrome&codeChallenge=${codeChallenge}&redirectUrl=${redirectUrl}`,
-      interactive: true,
-    })
-    .then((responseUrl) => {
-      if (typeof responseUrl === 'string') {
-        const url = new URL(responseUrl);
-        const authorizationCode = url.searchParams.get(
-          'authorizationCode',
-        ) as string;
-        exchangeAuthorizationCode({
-          authorizationCode,
-          codeVerifier,
-        }).then((tokens) => {
-          if (isDefined(tokens)) {
-            chrome.storage.local.set({
-              loginToken: tokens.loginToken,
-            });
-
-            chrome.storage.local.set({
-              accessToken: tokens.accessToken,
-            });
-
-            chrome.storage.local.set({
-              refreshToken: tokens.refreshToken,
-            });
-
-            callback({ status: true, message: '' });
-
-            chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
-              if (isDefined(tabs) && isDefined(tabs[0])) {
-                chrome.tabs.sendMessage(tabs[0].id ?? 0, {
-                  action: 'AUTHENTICATED',
-                });
-              }
-            });
-          }
-        });
-      }
-    })
-    .catch((error) => {
-      callback({ status: false, message: error.message });
-    });
-};
-
-chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
+chrome.tabs.onUpdated.addListener(async (tabId, _, tab) => {
   const isDesiredRoute =
     tab.url?.match(/^https?:\/\/(?:www\.)?linkedin\.com\/company(?:\/\S+)?/) ||
     tab.url?.match(/^https?:\/\/(?:www\.)?linkedin\.com\/in(?:\/\S+)?/);
 
-  if (changeInfo.status === 'complete' && tab.active) {
+  if (tab.active === true) {
     if (isDefined(isDesiredRoute)) {
       chrome.tabs.sendMessage(tabId, { action: 'executeContentScript' });
     }
   }
+
+  await chrome.sidePanel.setOptions({
+    tabId,
+    path: tab.url?.match(/^https?:\/\/(?:www\.)?linkedin\.com/)
+      ? 'sidepanel.html'
+      : 'page-inaccessible.html',
+    enabled: true,
+  });
 });
+
+const setTokenStateFromCookie = (cookie: string) => {
+  const decodedValue = decodeURIComponent(cookie);
+  const tokenPair = JSON.parse(decodedValue);
+  if (isDefined(tokenPair)) {
+    chrome.storage.local.set({
+      isAuthenticated: true,
+      accessToken: tokenPair.accessToken,
+      refreshToken: tokenPair.refreshToken,
+    });
+  }
+};
+
+chrome.cookies.onChanged.addListener(async ({ cookie }) => {
+  if (cookie.name === 'tokenPair') {
+    const store = await chrome.storage.local.get(['clientUrl']);
+    const clientUrl = isDefined(store.clientUrl)
+      ? store.clientUrl
+      : import.meta.env.VITE_FRONT_BASE_URL;
+    chrome.cookies.get({ name: 'tokenPair', url: `${clientUrl}` }, (cookie) => {
+      if (isDefined(cookie)) {
+        setTokenStateFromCookie(cookie.value);
+      }
+    });
+  }
+});
+
+// This will only run the very first time the extension loads, after we have stored the
+// cookiesRead variable to true, this will not allow to change the token state everytime background script runs
+chrome.cookies.get(
+  { name: 'tokenPair', url: `${import.meta.env.VITE_FRONT_BASE_URL}` },
+  async (cookie) => {
+    const store = await chrome.storage.local.get(['cookiesRead']);
+    if (isDefined(cookie) && !isDefined(store.cookiesRead)) {
+      setTokenStateFromCookie(cookie.value);
+      chrome.storage.local.set({ cookiesRead: true });
+    }
+  },
+);

packages/twenty-chrome-extension/src/background/utils/openOptionsPage.ts

@@ -1,5 +0,0 @@
-const openOptionsPage = () => {
-  chrome.runtime.openOptionsPage();
-};
-
-export { openOptionsPage };

packages/twenty-chrome-extension/src/contentScript/createButton.ts

@@ -1,13 +1,16 @@
 import { isDefined } from '~/utils/isDefined';
 
+interface CustomDiv extends HTMLDivElement {
+  onClickHandler: (newHandler: () => void) => void;
+}
+
 export const createDefaultButton = (
   buttonId: string,
-  onClickHandler?: () => void,
   buttonText = '',
-) => {
-  const btn = document.getElementById(buttonId);
+): CustomDiv => {
+  const btn = document.getElementById(buttonId) as CustomDiv;
   if (isDefined(btn)) return btn;
-  const div = document.createElement('div');
+  const div = document.createElement('div') as CustomDiv;
   const img = document.createElement('img');
   const span = document.createElement('span');
 
@@ -33,6 +36,7 @@ export const createDefaultButton = (
     padding: '0 1rem',
     cursor: 'pointer',
     height: '32px',
+    width: 'max-content',
   };
 
   Object.assign(div.style, divStyles);
@@ -52,19 +56,18 @@ export const createDefaultButton = (
     Object.assign(div.style, divStyles);
   });
 
-  // Handle the click event.
-  div.addEventListener('click', async (e) => {
-    e.preventDefault();
-    const store = await chrome.storage.local.get();
+  div.onClickHandler = (newHandler) => {
+    div.onclick = async () => {
+      const store = await chrome.storage.local.get();
 
-    // If an api key is not set, the options page opens up to allow the user to configure an api key.
-    if (!store.accessToken) {
-      chrome.runtime.sendMessage({ action: 'openOptionsPage' });
-      return;
-    }
-
-    onClickHandler?.();
-  });
+      // If an api key is not set, the options page opens up to allow the user to configure an api key.
+      if (!store.accessToken) {
+        chrome.runtime.sendMessage({ action: 'openSidepanel' });
+        return;
+      }
+      newHandler();
+    };
+  };
 
   div.id = buttonId;
 

packages/twenty-chrome-extension/src/contentScript/extractCompanyProfile.ts

@@ -1,4 +1,5 @@
 import { createDefaultButton } from '~/contentScript/createButton';
+import changeSidePanelUrl from '~/contentScript/utils/changeSidepanelUrl';
 import extractCompanyLinkedinLink from '~/contentScript/utils/extractCompanyLinkedinLink';
 import extractDomain from '~/contentScript/utils/extractDomain';
 import { createCompany, fetchCompany } from '~/db/company.db';
@@ -71,47 +72,55 @@ export const addCompany = async () => {
   const companyURL = extractCompanyLinkedinLink(activeTab.url);
   companyInputData.linkedinLink = { url: companyURL, label: companyURL };
 
-  const company = await createCompany(companyInputData);
-  return company;
+  const companyId = await createCompany(companyInputData);
+
+  if (isDefined(companyId)) {
+    await changeSidePanelUrl(`/object/company/${companyId}`);
+  }
+
+  return companyId;
 };
 
 export const insertButtonForCompany = async () => {
-  const companyButtonDiv = createDefaultButton(
-    'twenty-company-btn',
-    async () => {
-      if (isDefined(companyButtonDiv)) {
-        const companyBtnSpan = companyButtonDiv.getElementsByTagName('span')[0];
-        companyBtnSpan.textContent = 'Saving...';
-        const company = await addCompany();
-        if (isDefined(company)) {
-          companyBtnSpan.textContent = 'Saved';
-          Object.assign(companyButtonDiv.style, { pointerEvents: 'none' });
-        } else {
-          companyBtnSpan.textContent = 'Try again';
-        }
-      }
-    },
+  const companyButtonDiv = createDefaultButton('twenty-company-btn');
+
+  const companyDiv: HTMLDivElement | null = document.querySelector(
+    '.org-top-card__primary-content',
   );
 
-  const parentDiv: HTMLDivElement | null = document.querySelector(
-    '.org-top-card-primary-actions__inner',
-  );
-
-  if (isDefined(parentDiv)) {
+  if (isDefined(companyDiv)) {
     Object.assign(companyButtonDiv.style, {
-      marginLeft: '.8rem',
-      marginTop: '.4rem',
+      marginTop: '.8rem',
     });
-    parentDiv.prepend(companyButtonDiv);
+    companyDiv.parentElement?.append(companyButtonDiv);
   }
 
-  const companyBtnSpan = companyButtonDiv.getElementsByTagName('span')[0];
+  const companyButtonSpan = companyButtonDiv.getElementsByTagName('span')[0];
   const company = await checkIfCompanyExists();
 
+  const openCompanyOnSidePanel = (companyId: string) => {
+    companyButtonSpan.textContent = 'View in Twenty';
+    companyButtonDiv.onClickHandler(async () => {
+      await changeSidePanelUrl(`/object/company/${companyId}`);
+      chrome.runtime.sendMessage({ action: 'openSidepanel' });
+    });
+  };
+
   if (isDefined(company)) {
-    companyBtnSpan.textContent = 'Saved';
-    Object.assign(companyButtonDiv.style, { pointerEvents: 'none' });
+    await changeSidePanelUrl(`/object/company/${company.id}`);
+    if (isDefined(company.id)) openCompanyOnSidePanel(company.id);
   } else {
-    companyBtnSpan.textContent = 'Add to Twenty';
+    await changeSidePanelUrl(`/objects/companies`);
+    companyButtonSpan.textContent = 'Add to Twenty';
+
+    companyButtonDiv.onClickHandler(async () => {
+      companyButtonSpan.textContent = 'Saving...';
+      const companyId = await addCompany();
+      if (isDefined(companyId)) {
+        openCompanyOnSidePanel(companyId);
+      } else {
+        companyButtonSpan.textContent = 'Try again';
+      }
+    });
   }
 };

packages/twenty-chrome-extension/src/contentScript/extractPersonProfile.ts

@@ -1,4 +1,5 @@
 import { createDefaultButton } from '~/contentScript/createButton';
+import changeSidePanelUrl from '~/contentScript/utils/changeSidepanelUrl';
 import extractFirstAndLastName from '~/contentScript/utils/extractFirstAndLastName';
 import { createPerson, fetchPerson } from '~/db/person.db';
 import { PersonInput } from '~/db/types/person.types';
@@ -82,44 +83,51 @@ export const addPerson = async () => {
   }
 
   personData.linkedinLink = { url: activeTabUrl, label: activeTabUrl };
-  const person = await createPerson(personData);
-  return person;
+  const personId = await createPerson(personData);
+
+  if (isDefined(personId)) {
+    await changeSidePanelUrl(`/object/person/${personId}`);
+  }
+
+  return personId;
 };
 
 export const insertButtonForPerson = async () => {
-  const personButtonDiv = createDefaultButton('twenty-person-btn', async () => {
-    if (isDefined(personButtonDiv)) {
-      const personBtnSpan = personButtonDiv.getElementsByTagName('span')[0];
-      personBtnSpan.textContent = 'Saving...';
-      const person = await addPerson();
-      if (isDefined(person)) {
-        personBtnSpan.textContent = 'Saved';
-        Object.assign(personButtonDiv.style, { pointerEvents: 'none' });
-      } else {
-        personBtnSpan.textContent = 'Try again';
-      }
-    }
-  });
+  const personButtonDiv = createDefaultButton('twenty-person-btn');
 
   if (isDefined(personButtonDiv)) {
-    const parentDiv: HTMLDivElement | null = document.querySelector(
-      '.pv-top-card-v2-ctas',
-    );
+    const addedProfileDiv = document.querySelector('.artdeco-card > .ph5');
 
-    if (isDefined(parentDiv)) {
+    if (isDefined(addedProfileDiv)) {
       Object.assign(personButtonDiv.style, {
-        marginRight: '.8rem',
+        marginTop: '.8rem',
       });
-      parentDiv.prepend(personButtonDiv);
+      addedProfileDiv.append(personButtonDiv);
     }
 
-    const personBtnSpan = personButtonDiv.getElementsByTagName('span')[0];
+    const personButtonSpan = personButtonDiv.getElementsByTagName('span')[0];
     const person = await checkIfPersonExists();
+
+    const openPersonOnSidePanel = (personId: string) => {
+      personButtonSpan.textContent = 'View in Twenty';
+      personButtonDiv.onClickHandler(async () => {
+        await changeSidePanelUrl(`/object/person/${personId}`);
+        chrome.runtime.sendMessage({ action: 'openSidepanel' });
+      });
+    };
+
     if (isDefined(person)) {
-      personBtnSpan.textContent = 'Saved';
-      Object.assign(personButtonDiv.style, { pointerEvents: 'none' });
+      await changeSidePanelUrl(`/object/person/${person.id}`);
+      if (isDefined(person.id)) openPersonOnSidePanel(person.id);
     } else {
-      personBtnSpan.textContent = 'Add to Twenty';
+      await changeSidePanelUrl(`/objects/people`);
+      personButtonSpan.textContent = 'Add to Twenty';
+      personButtonDiv.onClickHandler(async () => {
+        personButtonSpan.textContent = 'Saving...';
+        const personId = await addPerson();
+        if (isDefined(personId)) openPersonOnSidePanel(personId);
+        else personButtonSpan.textContent = 'Try again';
+      });
     }
   }
 };

packages/twenty-chrome-extension/src/contentScript/index.ts

@@ -5,10 +5,23 @@ import { isDefined } from '~/utils/isDefined';
 // Inject buttons into the DOM when SPA is reloaded on the resource url.
 // e.g. reload the page when on https://www.linkedin.com/in/mabdullahabaid/
 // await insertButtonForCompany();
-(async () => {
-  await insertButtonForCompany();
-  await insertButtonForPerson();
-})();
+
+const companyRoute = /^https?:\/\/(?:www\.)?linkedin\.com\/company(?:\/\S+)?/;
+const personRoute = /^https?:\/\/(?:www\.)?linkedin\.com\/in(?:\/\S+)?/;
+
+const executeScript = async () => {
+  const loc = window.location.href;
+  switch (true) {
+    case companyRoute.test(loc):
+      await insertButtonForCompany();
+      break;
+    case personRoute.test(loc):
+      await insertButtonForPerson();
+      break;
+    default:
+      break;
+  }
+};
 
 // The content script gets executed upon load, so the the content script is executed when a user visits https://www.linkedin.com/feed/.
 // However, there would never be another reload in a single page application unless triggered manually.
@@ -16,89 +29,16 @@ import { isDefined } from '~/utils/isDefined';
 // e.g. create "Add to Twenty" button when a user navigates to https://www.linkedin.com/in/mabdullahabaid/ from https://www.linkedin.com/feed/
 chrome.runtime.onMessage.addListener(async (message, _, sendResponse) => {
   if (message.action === 'executeContentScript') {
-    await insertButtonForCompany();
-    await insertButtonForPerson();
-  }
-
-  if (message.action === 'TOGGLE') {
-    await toggle();
-  }
-
-  if (message.action === 'AUTHENTICATED') {
-    await authenticated();
+    await executeScript();
   }
 
   sendResponse('Executing!');
 });
 
-const IFRAME_WIDTH = '400px';
-
-const createIframe = () => {
-  const iframe = document.createElement('iframe');
-  iframe.style.background = 'lightgrey';
-  iframe.style.height = '100vh';
-  iframe.style.width = IFRAME_WIDTH;
-  iframe.style.position = 'fixed';
-  iframe.style.top = '0px';
-  iframe.style.right = `-${IFRAME_WIDTH}`;
-  iframe.style.zIndex = '9000000000000000000';
-  iframe.style.transition = 'ease-in-out 0.3s';
-  return iframe;
-};
-
-const handleContentIframeLoadComplete = () => {
-  //If the pop-out window is already open then we replace loading iframe with our content iframe
-  if (optionsIframe.style.right === '0px') contentIframe.style.right = '0px';
-  optionsIframe.style.display = 'none';
-  contentIframe.style.display = 'block';
-};
-
-//Creating one iframe where we are loading our front end in the background
-const contentIframe = createIframe();
-contentIframe.style.display = 'none';
-
-chrome.storage.local.get().then((store) => {
-  if (isDefined(store.loginToken)) {
-    contentIframe.src = `${import.meta.env.VITE_FRONT_BASE_URL}`;
-    contentIframe.onload = handleContentIframeLoadComplete;
+chrome.storage.local.onChanged.addListener(async (store) => {
+  if (isDefined(store.accessToken)) {
+    if (isDefined(store.accessToken.newValue)) {
+      await executeScript();
+    }
   }
 });
-
-const optionsIframe = createIframe();
-optionsIframe.src = chrome.runtime.getURL('options.html');
-
-document.body.appendChild(contentIframe);
-document.body.appendChild(optionsIframe);
-
-const toggleIframe = (iframe: HTMLIFrameElement) => {
-  if (
-    iframe.style.right === `-${IFRAME_WIDTH}` &&
-    iframe.style.display !== 'none'
-  ) {
-    iframe.style.right = '0px';
-  } else if (iframe.style.right === '0px' && iframe.style.display !== 'none') {
-    iframe.style.right = `-${IFRAME_WIDTH}`;
-  }
-};
-
-const toggle = async () => {
-  const store = await chrome.storage.local.get();
-  if (isDefined(store.accessToken)) {
-    toggleIframe(contentIframe);
-  } else {
-    toggleIframe(optionsIframe);
-  }
-};
-
-const authenticated = async () => {
-  const store = await chrome.storage.local.get();
-  if (isDefined(store.loginToken)) {
-    contentIframe.src = `${
-      import.meta.env.VITE_FRONT_BASE_URL
-    }/verify?loginToken=${store.loginToken.token}`;
-    contentIframe.onload = handleContentIframeLoadComplete;
-    toggleIframe(contentIframe);
-  } else {
-    toggleIframe(optionsIframe);
-  }
-};

packages/twenty-chrome-extension/src/contentScript/insertSettingsButton.ts

@@ -0,0 +1,59 @@
+import { isDefined } from '~/utils/isDefined';
+
+const btn = document.getElementById('twenty-settings-btn');
+if (!isDefined(btn)) {
+  const div = document.createElement('div');
+  const img = document.createElement('img');
+  img.src =
+    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAA7EAAAOxAGVKw4bAAACb0lEQVR4nO2VO4taQRTHr3AblbjxEVlwCwVhg7BoqqCIjy/gAyyFWNlYBOxsfH0KuxgQGwXRUkGuL2S7i1barGAgiwbdW93SnGOc4BonPiKahf3DwXFmuP/fPM4ZlvmlTxAhCBdzHnEQWYiv7Mr4C3NeuVYhQYDPzOUUQgDLBQGcLHNhvQK8DACPx8PTxiqVyvISG43GbyaT6Qfpn06n0m63e/tPAPF4vJ1MJu8kEsnWTCkWi1yr1RKGw+GDRqPBOTfr44vFQvD7/Q/lcpmaaVQAr9fLp1IpO22c47hGOBz+MB6PH+Vy+VYDAL8qlUoGtVotzOfzq4MAgsHgE/6KojiQyWR/bKVSqbSszHFM8Pl8z1YK48JsNltCOBwOnrYLO+8AAIjb+nHbycoTiUQfDJ7tFq4YAHiVSmXBxcD41u8flQU8z7fhzO0r83atVns3Go3u9Xr9x0O/RQXo9/tsIBBg6vX606a52Wz+bZ7P5/WwG29gxSJzhKgA6XTaDoFNF+krFAocmC//4yWEcSf2wTm7mCO19xFgSsKOLI16vV7b7XY7mRNoLwA0JymJ5uQIzgIAuX5PzDElT2m+E8BqtQ4ymcx7Yq7T6a6ZE4sKgOadTucaCwkxp1UzlEKh0GDxIXOwDWHAdi6Xe3swQDQa/Q7mywoolUpvsaptymazDWKxmBHTlWXZm405BFZoNpuGgwEmk4mE2SGtVivii4f1AO7J3ZopkQCQj7Ar1FeRChCJRJzVapX6DKNIfSc1Ax+wtQWQ55h6bH8FWDfYV4fO3wlwDr0C/BcADYiTPCxHqIEA2QsCZAkAKnRGkMbKN/sTX5YHPQ1e7SkAAAAASUVORK5CYII=';
+  img.height = 20;
+  img.width = 20;
+  img.alt = 'Twenty logo';
+
+  // Write universal styles for the button
+  const divStyles = {
+    border: '1px solid black',
+    borderRadius: '50%',
+    backgroundColor: 'black',
+    color: 'white',
+    fontWeight: '600',
+    fontSize: '1.5rem',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '5px',
+    justifyContent: 'center',
+    padding: '0 1rem',
+    cursor: 'pointer',
+    height: '50px',
+    width: '50px',
+    position: 'fixed',
+    bottom: '80px',
+    right: '20px',
+    zIndex: '9999999999999999999999999',
+  };
+
+  div.addEventListener('mouseenter', () => {
+    const hoverStyles = {
+      //eslint-disable-next-line @nx/workspace-no-hardcoded-colors
+      backgroundColor: '#5e5e5e',
+      //eslint-disable-next-line @nx/workspace-no-hardcoded-colors
+      borderColor: '#5e5e5e',
+    };
+    Object.assign(div.style, hoverStyles);
+  });
+
+  div.addEventListener('mouseleave', () => {
+    Object.assign(div.style, divStyles);
+  });
+
+  div.onclick = async () => {
+    chrome.runtime.sendMessage({ action: 'openSidepanel' });
+    chrome.storage.local.set({ navigateSidepanel: 'settings' });
+  };
+
+  div.appendChild(img);
+
+  Object.assign(div.style, divStyles);
+
+  document.body.appendChild(div);
+}

packages/twenty-chrome-extension/src/contentScript/utils/changeSidepanelUrl.ts

@@ -0,0 +1,13 @@
+import { isDefined } from '~/utils/isDefined';
+
+const changeSidePanelUrl = async (url: string) => {
+  if (isDefined(url)) {
+    chrome.storage.local.set({ navigateSidepanel: 'sidepanel' });
+    // we first clear the sidepanelUrl to trigger the onchange listener on sidepanel
+    // which will pass the post meessage to handle internal navigation of iframe
+    chrome.storage.local.set({ sidepanelUrl: '' });
+    chrome.storage.local.set({ sidepanelUrl: url });
+  }
+};
+
+export default changeSidePanelUrl;

packages/twenty-chrome-extension/src/db/auth.db.ts

@@ -18,9 +18,3 @@ export const exchangeAuthorizationCode = async (
     return data.exchangeAuthorizationCode;
   else return null;
 };
-
-// export const RenewToken = async (appToken: string): Promise<Tokens | null> => {
-//   const data = await callQuery<Tokens>(RENEW_TOKEN, { appToken });
-//   if (isDefined(data)) return data;
-//   else return null;
-// };

packages/twenty-chrome-extension/src/db/token.db.ts

@@ -0,0 +1,36 @@
+import { ApolloClient, InMemoryCache } from '@apollo/client';
+
+import { Tokens } from '~/db/types/auth.types';
+import { RENEW_TOKEN } from '~/graphql/auth/mutations';
+import { isDefined } from '~/utils/isDefined';
+
+export const renewToken = async (
+  appToken: string,
+): Promise<{ renewToken: { tokens: Tokens } } | null> => {
+  const store = await chrome.storage.local.get();
+  const serverUrl = `${
+    isDefined(store.serverBaseUrl)
+      ? store.serverBaseUrl
+      : import.meta.env.VITE_SERVER_BASE_URL
+  }/graphql`;
+
+  // Create new client to call refresh token graphql mutation
+  const client = new ApolloClient({
+    uri: serverUrl,
+    cache: new InMemoryCache({}),
+  });
+
+  const { data } = await client.mutate({
+    mutation: RENEW_TOKEN,
+    variables: {
+      appToken,
+    },
+    fetchPolicy: 'network-only',
+  });
+
+  if (isDefined(data)) {
+    return data;
+  } else {
+    return null;
+  }
+};

packages/twenty-chrome-extension/src/graphql/auth/mutations.ts

@@ -26,3 +26,20 @@ export const EXCHANGE_AUTHORIZATION_CODE = gql`
     }
   }
 `;
+
+export const RENEW_TOKEN = gql`
+  mutation RenewToken($appToken: String!) {
+    renewToken(appToken: $appToken) {
+      tokens {
+        accessToken {
+          token
+          expiresAt
+        }
+        refreshToken {
+          token
+          expiresAt
+        }
+      }
+    }
+  }
+`;

packages/twenty-chrome-extension/src/graphql/auth/queries.ts

@@ -1,20 +0,0 @@
-// import { gql } from '@apollo/client';
-
-// export const RENEW_TOKEN = gql`
-//   query RenewToken($appToken: String!) {
-//     renewToken(appToken: $appToken) {
-//       loginToken {
-//         token
-//         expiresAt
-//       }
-//       accessToken {
-//         token
-//         expiresAt
-//       }
-//       refreshToken {
-//         token
-//         expiresAt
-//       }
-//     }
-//   }
-// `;

packages/twenty-chrome-extension/src/graphql/company/queries.ts

@@ -5,6 +5,7 @@ export const FIND_COMPANY = gql`
     companies(filter: $filter) {
       edges {
         node {
+          id
           name
           linkedinLink {
             url

packages/twenty-chrome-extension/src/graphql/person/queries.ts

@@ -5,6 +5,7 @@ export const FIND_PERSON = gql`
     people(filter: $filter) {
       edges {
         node {
+          id
           name {
             firstName
             lastName

packages/twenty-chrome-extension/src/manifest.ts

@@ -2,10 +2,6 @@ import { defineManifest } from '@crxjs/vite-plugin';
 
 import packageData from '../package.json';
 
-const host_permissions =
-  process.env.VITE_MODE === 'development'
-    ? ['https://www.linkedin.com/*', 'http://localhost:3001/*']
-    : ['https://www.linkedin.com/*'];
 const external_sites =
   process.env.VITE_MODE === 'development'
     ? [`https://app.twenty.com/*`, `http://localhost:3001/*`]
@@ -26,7 +22,7 @@ export default defineManifest({
   action: {},
 
   //TODO: change this to a documenation page
-  options_page: 'options.html',
+  options_page: 'sidepanel.html',
 
   background: {
     service_worker: 'src/background/index.ts',
@@ -36,21 +32,27 @@ export default defineManifest({
   content_scripts: [
     {
       matches: ['https://www.linkedin.com/*'],
-      js: ['src/contentScript/index.ts'],
+      js: [
+        'src/contentScript/index.ts',
+        'src/contentScript/insertSettingsButton.ts',
+      ],
       run_at: 'document_end',
     },
   ],
 
   web_accessible_resources: [
     {
-      resources: ['options.html'],
+      resources: ['sidepanel.html', 'page-inaccessible.html'],
       matches: ['https://www.linkedin.com/*'],
     },
   ],
 
-  permissions: ['activeTab', 'storage', 'identity'],
+  permissions: ['activeTab', 'storage', 'identity', 'sidePanel', 'cookies'],
 
-  host_permissions: host_permissions,
+  // setting host permissions to all http connections will allow
+  // for people who host on their custom domain to get access to
+  // extension instead of white listing individual urls
+  host_permissions: ['https://*/*', 'http://*/*'],
 
   externally_connectable: {
     matches: external_sites,

packages/twenty-chrome-extension/src/options/App.tsx

@@ -0,0 +1,42 @@
+import { useEffect, useState } from 'react';
+
+import Settings from '~/options/Settings';
+import Sidepanel from '~/options/Sidepanel';
+import { isDefined } from '~/utils/isDefined';
+
+const App = () => {
+  const [currentScreen, setCurrentScreen] = useState('');
+
+  useEffect(() => {
+    const setCurrentScreenState = async () => {
+      const store = await chrome.storage.local.get(['navigateSidepanel']);
+      if (isDefined(store.navigateSidepanel)) {
+        setCurrentScreen(store.navigateSidepanel);
+      }
+    };
+
+    setCurrentScreenState();
+  }, []);
+
+  useEffect(() => {
+    chrome.storage.local.onChanged.addListener((updatedStore) => {
+      if (
+        isDefined(updatedStore.navigateSidepanel) &&
+        isDefined(updatedStore.navigateSidepanel.newValue)
+      ) {
+        setCurrentScreen(updatedStore.navigateSidepanel.newValue);
+      }
+    });
+  }, [setCurrentScreen]);
+
+  switch (currentScreen) {
+    case 'sidepanel':
+      return <Sidepanel />;
+    case 'settings':
+      return <Settings />;
+    default:
+      return <Settings />;
+  }
+};
+
+export default App;

packages/twenty-chrome-extension/src/options/Options.tsx

@@ -1,124 +0,0 @@
-import { useEffect, useState } from 'react';
-import styled from '@emotion/styled';
-
-import { Loader } from '@/ui/display/loader/components/Loader';
-import { MainButton } from '@/ui/input/button/MainButton';
-import { TextInput } from '@/ui/input/components/TextInput';
-
-const StyledWrapper = styled.div`
-  align-items: center;
-  background: ${({ theme }) => theme.background.noisy};
-  display: flex;
-  height: 100vh;
-  justify-content: center;
-`;
-
-const StyledContainer = styled.div`
-  background: ${({ theme }) => theme.background.primary};
-  width: 400px;
-  height: 350px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: ${({ theme }) => theme.spacing(2)};
-`;
-
-const StyledActionContainer = styled.div`
-  align-items: center;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  justify-content: center;
-  width: 300px;
-`;
-
-const StyledLabel = styled.span`
-  color: ${({ theme }) => theme.font.color.primary};
-  font-size: ${({ theme }) => theme.font.size.md};
-  font-weight: ${({ theme }) => theme.font.weight.semiBold};
-  margin-bottom: ${({ theme }) => theme.spacing(1)};
-  text-transform: uppercase;
-`;
-
-const Options = () => {
-  const [isAuthenticating, setIsAuthenticating] = useState(false);
-  const [isAuthenticated, setIsAuthenticated] = useState(false);
-  const [error, setError] = useState('');
-  const [serverBaseUrl, setServerBaseUrl] = useState(
-    import.meta.env.VITE_SERVER_BASE_URL,
-  );
-  const authenticate = () => {
-    setIsAuthenticating(true);
-    setError('');
-    chrome.runtime.sendMessage({ action: 'CONNECT' }, ({ status, message }) => {
-      if (status === true) {
-        setIsAuthenticated(true);
-        setIsAuthenticating(false);
-        chrome.storage.local.set({ isAuthenticated: true });
-      } else {
-        setError(message);
-        setIsAuthenticating(false);
-      }
-    });
-  };
-
-  useEffect(() => {
-    const getState = async () => {
-      const store = await chrome.storage.local.get();
-      if (store.serverBaseUrl !== '') {
-        setServerBaseUrl(store.serverBaseUrl);
-      } else {
-        setServerBaseUrl(import.meta.env.VITE_SERVER_BASE_URL);
-      }
-
-      if (store.isAuthenticated === true) setIsAuthenticated(true);
-    };
-    void getState();
-  }, []);
-
-  const handleBaseUrlChange = (value: string) => {
-    setServerBaseUrl(value);
-    setError('');
-    chrome.storage.local.set({ serverBaseUrl: value });
-  };
-
-  return (
-    <StyledWrapper>
-      <StyledContainer>
-        <img src="/logo/32-32.svg" alt="twenty-logo" height={64} width={64} />
-        <StyledActionContainer>
-          <TextInput
-            label="Server URL"
-            value={serverBaseUrl}
-            onChange={handleBaseUrlChange}
-            placeholder="My base server URL"
-            error={error}
-            fullWidth
-          />
-          {isAuthenticating ? (
-            <Loader />
-          ) : isAuthenticated ? (
-            <StyledLabel>Connected!</StyledLabel>
-          ) : (
-            <>
-              <MainButton
-                title="Connect your account"
-                onClick={() => authenticate()}
-                fullWidth
-              />
-              <MainButton
-                title="Sign up"
-                variant="secondary"
-                onClick={() => window.open(`${serverBaseUrl}`, '_blank')}
-                fullWidth
-              />
-            </>
-          )}
-        </StyledActionContainer>
-      </StyledContainer>
-    </StyledWrapper>
-  );
-};
-
-export default Options;

packages/twenty-chrome-extension/src/options/PageInaccessible.tsx

@@ -0,0 +1,64 @@
+import styled from '@emotion/styled';
+
+import { MainButton } from '@/ui/input/button/MainButton';
+
+const StyledWrapper = styled.div`
+  align-items: center;
+  background: ${({ theme }) => theme.background.primary};
+  display: flex;
+  height: 100vh;
+  justify-content: center;
+`;
+
+const StyledContainer = styled.div`
+  width: 400px;
+  height: 350px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: ${({ theme }) => theme.spacing(8)};
+`;
+
+const StyledTextContainer = styled.div`
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(2)};
+  justify-content: center;
+`;
+
+const StyledLargeText = styled.div`
+  color: ${({ theme }) => theme.font.color.primary};
+  font-size: ${({ theme }) => theme.font.size.lg};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+`;
+
+const StyledMediumText = styled.div`
+  color: ${({ theme }) => theme.font.color.light};
+  font-size: ${({ theme }) => theme.font.size.md};
+`;
+
+const PageInaccessible = () => {
+  return (
+    <StyledWrapper>
+      <StyledContainer>
+        <img src="/logo/32-32.svg" alt="twenty-logo" height={40} width={40} />
+        <StyledTextContainer>
+          <StyledLargeText>
+            Extension not available on the website
+          </StyledLargeText>
+          <StyledMediumText>
+            Open LinkedIn to use the extension
+          </StyledMediumText>
+        </StyledTextContainer>
+        <MainButton
+          title="Go to LinkedIn"
+          onClick={() => window.open('https://www.linkedin.com/')}
+        />
+      </StyledContainer>
+    </StyledWrapper>
+  );
+};
+
+export default PageInaccessible;

packages/twenty-chrome-extension/src/options/Settings.tsx

@@ -0,0 +1,123 @@
+import { useEffect, useState } from 'react';
+import styled from '@emotion/styled';
+
+import { MainButton } from '@/ui/input/button/MainButton';
+import { TextInput } from '@/ui/input/components/TextInput';
+import { clearStore } from '~/utils/apolloClient';
+import { isDefined } from '~/utils/isDefined';
+
+const StyledWrapper = styled.div`
+  align-items: center;
+  background: ${({ theme }) => theme.background.primary};
+  display: flex;
+  height: 100vh;
+  justify-content: center;
+`;
+
+const StyledContainer = styled.div`
+  width: 400px;
+  height: 350px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: ${({ theme }) => theme.spacing(8)};
+`;
+
+const StyledActionContainer = styled.div`
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  justify-content: center;
+  width: 300px;
+`;
+
+const Settings = () => {
+  const [serverBaseUrl, setServerBaseUrl] = useState('');
+  const [clientUrl, setClientUrl] = useState('');
+  const [currentClientUrl, setCurrentClientUrl] = useState('');
+  const [currentServerUrl, setCurrentServerUrl] = useState('');
+
+  useEffect(() => {
+    const getState = async () => {
+      const store = await chrome.storage.local.get([
+        'serverBaseUrl',
+        'clientUrl',
+      ]);
+      if (isDefined(store.serverBaseUrl)) {
+        setServerBaseUrl(store.serverBaseUrl);
+        setCurrentServerUrl(store.serverBaseUrl);
+      } else {
+        setServerBaseUrl(import.meta.env.VITE_SERVER_BASE_URL);
+        setCurrentServerUrl(import.meta.env.VITE_SERVER_BASE_URL);
+      }
+
+      if (isDefined(store.clientUrl)) {
+        setClientUrl(store.clientUrl);
+        setCurrentClientUrl(store.clientUrl);
+      } else {
+        setClientUrl(import.meta.env.VITE_FRONT_BASE_URL);
+        setCurrentClientUrl(import.meta.env.VITE_FRONT_BASE_URL);
+      }
+    };
+    void getState();
+  }, []);
+
+  const handleSettingsChange = () => {
+    chrome.storage.local.set({
+      serverBaseUrl,
+      clientUrl,
+      navigateSidepanel: 'sidepanel',
+    });
+    clearStore();
+  };
+
+  const handleCloseSettings = () => {
+    chrome.storage.local.set({
+      navigateSidepanel: 'sidepanel',
+    });
+  };
+
+  return (
+    <StyledWrapper>
+      <StyledContainer>
+        <img src="/logo/32-32.svg" alt="twenty-logo" height={40} width={40} />
+        <StyledActionContainer>
+          <TextInput
+            label="Client URL"
+            value={clientUrl}
+            onChange={setClientUrl}
+            placeholder="My client URL"
+            fullWidth
+          />
+          <TextInput
+            label="Server URL"
+            value={serverBaseUrl}
+            onChange={setServerBaseUrl}
+            placeholder="My server URL"
+            fullWidth
+          />
+          <MainButton
+            title="Done"
+            disabled={
+              currentClientUrl === clientUrl &&
+              currentServerUrl === serverBaseUrl
+            }
+            variant="primary"
+            onClick={handleSettingsChange}
+            fullWidth
+          />
+          <MainButton
+            title="Close"
+            variant="secondary"
+            onClick={handleCloseSettings}
+            fullWidth
+          />
+        </StyledActionContainer>
+      </StyledContainer>
+    </StyledWrapper>
+  );
+};
+
+export default Settings;

packages/twenty-chrome-extension/src/options/Sidepanel.tsx

@@ -0,0 +1,173 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import styled from '@emotion/styled';
+
+import { MainButton } from '@/ui/input/button/MainButton';
+import { isDefined } from '~/utils/isDefined';
+
+const StyledIframe = styled.iframe`
+  display: block;
+  width: 100%;
+  height: 100vh;
+  border: none;
+`;
+
+const StyledWrapper = styled.div`
+  align-items: center;
+  background: ${({ theme }) => theme.background.primary};
+  display: flex;
+  height: 100vh;
+  justify-content: center;
+`;
+
+const StyledContainer = styled.div`
+  width: 400px;
+  height: 350px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: ${({ theme }) => theme.spacing(8)};
+`;
+
+const StyledActionContainer = styled.div`
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  justify-content: center;
+  width: 300px;
+`;
+
+const Sidepanel = () => {
+  const [isAuthenticated, setIsAuthenticated] = useState(false);
+  const [clientUrl, setClientUrl] = useState(
+    import.meta.env.VITE_FRONT_BASE_URL,
+  );
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+
+  const setIframeState = useCallback(async () => {
+    const store = await chrome.storage.local.get([
+      'isAuthenticated',
+      'sidepanelUrl',
+      'clientUrl',
+      'accessToken',
+      'refreshToken',
+    ]);
+
+    if (
+      store.isAuthenticated === true &&
+      isDefined(store.accessToken) &&
+      isDefined(store.refreshToken) &&
+      new Date(store.accessToken.expiresAt).getTime() >= Date.now()
+    ) {
+      setIsAuthenticated(true);
+      if (isDefined(store.sidepanelUrl)) {
+        if (isDefined(store.clientUrl)) {
+          setClientUrl(`${store.clientUrl}${store.sidepanelUrl}`);
+        } else {
+          setClientUrl(
+            `${import.meta.env.VITE_FRONT_BASE_URL}${store.sidepanelUrl}`,
+          );
+        }
+      }
+    } else {
+      chrome.storage.local.set({ isAuthenticated: false });
+      if (isDefined(store.clientUrl)) {
+        setClientUrl(store.clientUrl);
+      }
+    }
+  }, [setClientUrl]);
+
+  useEffect(() => {
+    void setIframeState();
+  }, [setIframeState]);
+
+  useEffect(() => {
+    window.addEventListener('message', async (event) => {
+      const store = await chrome.storage.local.get([
+        'clientUrl',
+        'accessToken',
+        'refreshToken',
+      ]);
+      const clientUrl = isDefined(store.clientUrl)
+        ? store.clientUrl
+        : import.meta.env.VITE_FRONT_BASE_URL;
+
+      if (
+        isDefined(store.accessToken) &&
+        isDefined(store.refreshToken) &&
+        event.origin === clientUrl &&
+        event.data === 'loaded'
+      ) {
+        event.source?.postMessage(
+          {
+            type: 'tokens',
+            value: {
+              accessToken: {
+                token: store.accessToken.token,
+                expiresAt: store.accessToken.expiresAt,
+              },
+              refreshToken: {
+                token: store.refreshToken.token,
+                expiresAt: store.refreshToken.expiresAt,
+              },
+            },
+          },
+          clientUrl,
+        );
+      }
+    });
+  }, []);
+
+  useEffect(() => {
+    chrome.storage.local.onChanged.addListener(async (updatedStore) => {
+      if (isDefined(updatedStore.isAuthenticated)) {
+        if (updatedStore.isAuthenticated.newValue === true) {
+          setIframeState();
+        }
+      }
+
+      if (isDefined(updatedStore.sidepanelUrl)) {
+        if (isDefined(updatedStore.sidepanelUrl.newValue)) {
+          const store = await chrome.storage.local.get(['clientUrl']);
+          const clientUrl = isDefined(store.clientUrl)
+            ? store.clientUrl
+            : import.meta.env.VITE_FRONT_BASE_URL;
+
+          iframeRef.current?.contentWindow?.postMessage(
+            {
+              type: 'navigate',
+              value: updatedStore.sidepanelUrl.newValue,
+            },
+            clientUrl,
+          );
+        }
+      }
+    });
+  }, [setIframeState]);
+
+  return isAuthenticated ? (
+    <StyledIframe
+      ref={iframeRef}
+      title="twenty-website"
+      src={clientUrl}
+    ></StyledIframe>
+  ) : (
+    <StyledWrapper>
+      <StyledContainer>
+        <img src="/logo/32-32.svg" alt="twenty-logo" height={40} width={40} />
+        <StyledActionContainer>
+          <MainButton
+            title="Connect your account"
+            fullWidth
+            onClick={() => {
+              window.open(clientUrl, '_blank');
+            }}
+          />
+        </StyledActionContainer>
+      </StyledContainer>
+    </StyledWrapper>
+  );
+};
+
+export default Sidepanel;

packages/twenty-chrome-extension/src/options/index.tsx

@@ -3,14 +3,14 @@ import ReactDOM from 'react-dom/client';
 
 import { AppThemeProvider } from '@/ui/theme/components/AppThemeProvider';
 import { ThemeType } from '@/ui/theme/constants/ThemeLight';
-import Options from '~/options/Options';
+import App from '~/options/App';
 
 import '~/index.css';
 
 ReactDOM.createRoot(document.getElementById('app') as HTMLElement).render(
   <AppThemeProvider>
     <React.StrictMode>
-      <Options />
+      <App />
     </React.StrictMode>
   </AppThemeProvider>,
 );

packages/twenty-chrome-extension/src/options/modules/ui/input/button/MainButton.tsx

@@ -22,7 +22,7 @@ const StyledButton = styled.button<
 
     switch (variant) {
       case 'primary':
-        return theme.background.radialGradient;
+        return theme.background.primaryInverted;
       case 'secondary':
         return theme.background.primary;
       default:
@@ -37,7 +37,7 @@ const StyledButton = styled.button<
 
     switch (variant) {
       case 'primary':
-        return theme.background.transparent.light;
+        return theme.background.transparent.strong;
       case 'secondary':
         return theme.border.color.medium;
       default:
@@ -59,7 +59,7 @@ const StyledButton = styled.button<
 
     switch (variant) {
       case 'primary':
-        return theme.grayScale.gray0;
+        return theme.font.color.inverted;
       case 'secondary':
         return theme.font.color.primary;
       default:
@@ -88,7 +88,7 @@ const StyledButton = styled.button<
       default:
         return `
           &:hover {
-            background: ${theme.background.radialGradientHover}};
+            background: ${theme.background.primaryInvertedHover}};
           }
         `;
     }

packages/twenty-chrome-extension/src/options/modules/ui/input/components/Toggle.tsx

@@ -15,7 +15,7 @@ type ContainerProps = {
 const StyledContainer = styled.div<ContainerProps>`
   align-items: center;
   background-color: ${({ theme, isOn, color }) =>
-    isOn ? color ?? theme.color.blue : theme.background.quaternary};
+    isOn ? (color ?? theme.color.blue) : theme.background.quaternary};
   border-radius: 10px;
   cursor: pointer;
   display: flex;

packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/BackgroundDark.ts

@@ -12,16 +12,17 @@ export const BACKGROUND_DARK = {
   quaternary: GRAY_SCALE.gray70,
   danger: COLOR.red80,
   transparent: {
-    primary: RGBA(GRAY_SCALE.gray85, 0.8),
-    secondary: RGBA(GRAY_SCALE.gray80, 0.8),
+    primary: RGBA(GRAY_SCALE.gray85, 0.5),
+    secondary: RGBA(GRAY_SCALE.gray80, 0.5),
     strong: RGBA(GRAY_SCALE.gray0, 0.14),
     medium: RGBA(GRAY_SCALE.gray0, 0.1),
     light: RGBA(GRAY_SCALE.gray0, 0.06),
     lighter: RGBA(GRAY_SCALE.gray0, 0.03),
     danger: RGBA(COLOR.red, 0.08),
-    forBackdropFilter: RGBA(GRAY_SCALE.gray80, 0.5),
   },
   overlay: RGBA(GRAY_SCALE.gray80, 0.8),
   radialGradient: `radial-gradient(50% 62.62% at 50% 0%, #505050 0%, ${GRAY_SCALE.gray60} 100%)`,
   radialGradientHover: `radial-gradient(76.32% 95.59% at 50% 0%, #505050 0%, ${GRAY_SCALE.gray60} 100%)`,
+  primaryInverted: GRAY_SCALE.gray20,
+  primaryInvertedHover: GRAY_SCALE.gray15,
 };

packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/BackgroundLight.ts

@@ -12,16 +12,17 @@ export const BACKGROUND_LIGHT = {
   quaternary: GRAY_SCALE.gray20,
   danger: COLOR.red10,
   transparent: {
-    primary: RGBA(GRAY_SCALE.gray0, 0.8),
-    secondary: RGBA(GRAY_SCALE.gray10, 0.8),
+    primary: RGBA(GRAY_SCALE.gray0, 0.5),
+    secondary: RGBA(GRAY_SCALE.gray10, 0.5),
     strong: RGBA(GRAY_SCALE.gray100, 0.16),
     medium: RGBA(GRAY_SCALE.gray100, 0.08),
     light: RGBA(GRAY_SCALE.gray100, 0.04),
     lighter: RGBA(GRAY_SCALE.gray100, 0.02),
     danger: RGBA(COLOR.red, 0.08),
-    forBackdropFilter: RGBA(GRAY_SCALE.gray10, 0.5),
   },
   overlay: RGBA(GRAY_SCALE.gray80, 0.8),
   radialGradient: `radial-gradient(50% 62.62% at 50% 0%, #505050 0%, ${GRAY_SCALE.gray60} 100%)`,
   radialGradientHover: `radial-gradient(76.32% 95.59% at 50% 0%, #505050 0%, ${GRAY_SCALE.gray60} 100%)`,
+  primaryInverted: GRAY_SCALE.gray60,
+  primaryInvertedHover: GRAY_SCALE.gray55,
 };

packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/OverlayBackground.ts

@@ -4,6 +4,6 @@ import { ThemeType } from '@/ui/theme/constants/ThemeLight';
 
 export const OVERLAY_BACKGROUND = (props: { theme: ThemeType }) => css`
   backdrop-filter: blur(12px) saturate(200%) contrast(50%) brightness(130%);
-  background: ${props.theme.background.transparent.forBackdropFilter};
+  background: ${props.theme.background.transparent.secondary};
   box-shadow: ${props.theme.boxShadow.strong};
 `;

packages/twenty-chrome-extension/src/options/page-inaccessible-index.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+
+import { AppThemeProvider } from '@/ui/theme/components/AppThemeProvider';
+import { ThemeType } from '@/ui/theme/constants/ThemeLight';
+import PageInaccessible from '~/options/PageInaccessible';
+
+import '~/index.css';
+
+ReactDOM.createRoot(document.getElementById('app') as HTMLElement).render(
+  <AppThemeProvider>
+    <React.StrictMode>
+      <PageInaccessible />
+    </React.StrictMode>
+  </AppThemeProvider>,
+);
+
+declare module '@emotion/react' {
+  export interface Theme extends ThemeType {}
+}

packages/twenty-chrome-extension/src/utils/apolloClient.ts

@@ -1,37 +1,54 @@
 import { ApolloClient, from, HttpLink, InMemoryCache } from '@apollo/client';
+import { setContext } from '@apollo/client/link/context';
 import { onError } from '@apollo/client/link/error';
 
 import { isDefined } from '~/utils/isDefined';
 
-const clearStore = () => {
-  chrome.storage.local.remove('loginToken');
-
-  chrome.storage.local.remove('accessToken');
-
-  chrome.storage.local.remove('refreshToken');
-
+export const clearStore = () => {
+  chrome.storage.local.remove([
+    'loginToken',
+    'accessToken',
+    'refreshToken',
+    'sidepanelUrl',
+  ]);
   chrome.storage.local.set({ isAuthenticated: false });
 };
 
-const getApolloClient = async () => {
+export const getServerUrl = async () => {
   const store = await chrome.storage.local.get();
   const serverUrl = `${
     isDefined(store.serverBaseUrl)
       ? store.serverBaseUrl
       : import.meta.env.VITE_SERVER_BASE_URL
   }/graphql`;
+  return serverUrl;
+};
 
+const getAuthToken = async () => {
+  const store = await chrome.storage.local.get();
+  if (isDefined(store.accessToken)) return `Bearer ${store.accessToken.token}`;
+  else return '';
+};
+
+const getApolloClient = async () => {
+  const authLink = setContext(async (_, { headers }) => {
+    const token = await getAuthToken();
+    return {
+      headers: {
+        ...headers,
+        authorization: token,
+      },
+    };
+  });
   const errorLink = onError(({ graphQLErrors, networkError }) => {
     if (isDefined(graphQLErrors)) {
       for (const graphQLError of graphQLErrors) {
         if (graphQLError.message === 'Unauthorized') {
-          //TODO: replace this with renewToken mutation
           clearStore();
           return;
         }
         switch (graphQLError?.extensions?.code) {
           case 'UNAUTHENTICATED': {
-            //TODO: replace this with renewToken mutation
             clearStore();
             break;
           }
@@ -56,17 +73,12 @@ const getApolloClient = async () => {
   });
 
   const httpLink = new HttpLink({
-    uri: serverUrl,
-    headers: isDefined(store.accessToken)
-      ? {
-          Authorization: `Bearer ${store.accessToken.token}`,
-        }
-      : {},
+    uri: await getServerUrl(),
   });
 
   const client = new ApolloClient({
     cache: new InMemoryCache(),
-    link: from([errorLink, httpLink]),
+    link: from([errorLink, authLink, httpLink]),
   });
 
   return client;

packages/twenty-chrome-extension/src/vite-env.d.ts

@@ -4,6 +4,7 @@ interface ImportMetaEnv {
   readonly VITE_SERVER_BASE_URL: string;
   readonly VITE_FRONT_BASE_URL: string;
   readonly VITE_MODE: string;
+  readonly AUTH_TOKEN: string | undefined;
 }
 
 interface ImportMeta {

packages/twenty-chrome-extension/tsconfig.app.json

@@ -1,8 +1,5 @@
 {
   "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../.cache/tsc"
-  },
   "exclude": [
     "**/*.spec.ts",
     "**/*.test.ts",
@@ -10,5 +7,5 @@
     "**/*.test.tsx",
     "jest.config.ts"
   ],
-  "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
 }

packages/twenty-chrome-extension/tsconfig.json

@@ -1,15 +1,16 @@
 {
+  "extends": "../../tsconfig.base.json",
   "compilerOptions": {
+    "outDir": "../../.cache/tsc",
     "target": "ES2022",
     "useDefineForClassFields": true,
     "lib": ["ES2022", "DOM", "DOM.Iterable"],
     "module": "ESNext",
     "skipLibCheck": true,
     "esModuleInterop": true,
-    "baseUrl": ".",
     "paths": {
-      "@/*": ["src/options/modules/*"],
-      "~/*": ["src/*"]
+      "@/*": ["packages/twenty-chrome-extension/src/options/modules/*"],
+      "~/*": ["packages/twenty-chrome-extension/src/*"]
     },
 
     /* Bundler mode */

packages/twenty-chrome-extension/tsconfig.spec.json

@@ -1,10 +1,10 @@
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
-    "outDir": "../../.cache/tsc",
     "types": ["jest", "node"]
   },
   "include": [
+    "codegen.ts",
     "vite.config.ts",
     "jest.config.ts",
     "**/*.test.ts",

packages/twenty-chrome-extension/vite.config.ts

@@ -19,6 +19,9 @@ const viteManifestHack: Plugin & {
 
 export default defineConfig(() => {
   return {
+    root: __dirname,
+    cacheDir: '../../node_modules/.vite/packages/twenty-chrome-extension',
+
     build: {
       emptyOutDir: true,
       outDir: 'dist',

packages/twenty-docker/.env.example

@@ -5,8 +5,8 @@ TAG=latest
 PG_DATABASE_HOST=db:5432
 
 SERVER_URL=http://localhost:3000
-# Uncoment if you are serving your front on another server than the API (eg. bucket)
-# FRONT_BASE_URL=http://localhost:3000
+# REDIS_HOST=redis
+# REDIS_PORT=6379
 
 # Use openssl rand -base64 32 for each secret
 # ACCESS_TOKEN_SECRET=replace_me_with_a_random_string_access

packages/twenty-docker/Makefile

@@ -23,12 +23,6 @@ dev-postgres-build:
 	@docker volume rm twenty_db_data || true
 	@docker compose -f dev/docker-compose.yml up --build postgres -d
 
-prod-docs-build:
-	@cd ../.. && docker build -f ./packages/twenty-docker/twenty-docs/Dockerfile --tag twenty-docs . && cd -
-
-prod-docs-run:
-	@docker run -d -p 3000:3000 --name twenty-docs twenty-docs
-
 prod-build:
 	@cd ../.. && docker build -f ./packages/twenty-docker/twenty/Dockerfile --tag twenty . && cd -
 
@@ -47,14 +41,6 @@ prod-website-build:
 prod-website-run:
 	@docker run -d -p 3000:3000 --name twenty-website twenty-website
 
-release-docs:
-	@cd ../.. && docker buildx build \
-		--push \
-		--no-cache \
-		--platform linux/amd64,linux/arm64 \
-		-f ./packages/twenty-docker/twenty-docs/Dockerfile -t twentycrm/twenty-docs:$(version) -t twentycrm/twenty-docs:latest . \
-		&& cd -
-
 release-postgres:
 	@cd ../.. && docker buildx build \
 		--push \

packages/twenty-docker/docker-compose.yml

@@ -2,10 +2,22 @@ version: "3.9"
 name: twenty
 
 services:
+  change-vol-ownership:
+    image: ubuntu
+    user: root
+    volumes:
+      - server-local-data:/tmp/server-local-data
+      - docker-data:/tmp/docker-data
+    command: >
+      bash -c "
+      chown -R 1000:1000 /tmp/server-local-data
+      && chown -R 1000:1000 /tmp/docker-data"
+
   server:
     image: twentycrm/twenty:${TAG}
     volumes:
-      - server-local-data:/app/${STORAGE_LOCAL_PATH:-.local-storage}
+      - server-local-data:/app/packages/twenty-server/${STORAGE_LOCAL_PATH:-.local-storage}
+      - docker-data:/app/docker-data
     ports:
       - "3000:3000"
     environment:
@@ -13,6 +25,8 @@ services:
       PG_DATABASE_URL: postgres://twenty:twenty@${PG_DATABASE_HOST}/default
       SERVER_URL: ${SERVER_URL}
       FRONT_BASE_URL: ${FRONT_BASE_URL:-$SERVER_URL}
+      REDIS_PORT: ${REDIS_PORT:-6379}
+      REDIS_HOST: ${REDIS_HOST:-redis}
 
       ENABLE_DB_MIGRATIONS: "true"
 
@@ -21,11 +35,14 @@ services:
       STORAGE_S3_REGION: ${STORAGE_S3_REGION}
       STORAGE_S3_NAME: ${STORAGE_S3_NAME}
       STORAGE_S3_ENDPOINT: ${STORAGE_S3_ENDPOINT}
+
       ACCESS_TOKEN_SECRET: ${ACCESS_TOKEN_SECRET}
       LOGIN_TOKEN_SECRET: ${LOGIN_TOKEN_SECRET}
       REFRESH_TOKEN_SECRET: ${REFRESH_TOKEN_SECRET}
       FILE_TOKEN_SECRET: ${FILE_TOKEN_SECRET}
     depends_on:
+      change-vol-ownership:
+        condition: service_completed_successfully
       db:
         condition: service_healthy
     healthcheck:
@@ -35,6 +52,34 @@ services:
       retries: 10
     restart: always
 
+  worker:
+    image: twentycrm/twenty:${TAG}
+    command: ["yarn", "worker:prod"]
+    environment:
+      PG_DATABASE_URL: postgres://twenty:twenty@${PG_DATABASE_HOST}/default
+      SERVER_URL: ${SERVER_URL}
+      FRONT_BASE_URL: ${FRONT_BASE_URL:-$SERVER_URL}
+      REDIS_PORT: ${REDIS_PORT:-6379}
+      REDIS_HOST: ${REDIS_HOST:-redis}
+
+      ENABLE_DB_MIGRATIONS: "false" # it already runs on the server
+
+      STORAGE_TYPE: ${STORAGE_TYPE}
+      STORAGE_S3_REGION: ${STORAGE_S3_REGION}
+      STORAGE_S3_NAME: ${STORAGE_S3_NAME}
+      STORAGE_S3_ENDPOINT: ${STORAGE_S3_ENDPOINT}
+
+      ACCESS_TOKEN_SECRET: ${ACCESS_TOKEN_SECRET}
+      LOGIN_TOKEN_SECRET: ${LOGIN_TOKEN_SECRET}
+      REFRESH_TOKEN_SECRET: ${REFRESH_TOKEN_SECRET}
+      FILE_TOKEN_SECRET: ${FILE_TOKEN_SECRET}
+    depends_on:
+      db:
+        condition: service_healthy
+      server:
+        condition: service_healthy
+    restart: always
+
   db:
     image: twentycrm/twenty-postgres:${TAG}
     volumes:
@@ -48,6 +93,13 @@ services:
       retries: 10
     restart: always
 
+  redis:
+    image: redis
+    ports:
+      - "6379:6379"
+    restart: always
+
 volumes:
+  docker-data:
   db-data:
   server-local-data:

packages/twenty-docker/k8s/README.md

@@ -0,0 +1,113 @@
+# README
+
+## Overview
+
+This repository contains Kubernetes manifests and Terraform files to help you deploy and manage the TwentyCRM application. The files are located in the `packages/twenty-docker/k8s` directory.
+
+## Prerequisites
+
+Before using these files, ensure you have the following installed and configured on your system:
+
+- Kubernetes cluster (e.g., Minikube, EKS, GKE)
+- kubectl
+- Terraform
+- Docker
+
+## Setup Instructions
+
+### Step 1: Clone the Repository
+
+Clone the repository to your local machine:
+
+``` bash
+git clone https://github.com/twentyhq/twenty.git
+cd twentycrm/packages/twenty-docker/k8s
+```
+
+### Step 2: Customize the Manifests and Terraform Files
+
+**Important:** These files require customization for your specific implementation. Update the placeholders and configurations according to your environment and requirements.
+
+### Step 3: Deploy with Terraform
+
+1. Navigate to the Terraform directory:
+
+    ```bash
+    cd terraform
+    ```
+
+2. Initialize Terraform:
+
+    ```bash
+    terraform init
+    ```
+
+3. Plan the deployment:
+
+    ```bash
+    terraform plan
+    ```
+
+4. Apply the deployment:
+
+    ```bash
+    terraform apply
+    ```
+
+## OR
+
+### Step 3: Deploy with Kubernetes Manifests
+
+1. Navigate to the Kubernetes manifests directory:
+
+    ```bash
+    cd ../k8s
+    ```
+
+2. Create Server Secret
+
+    ``` bash
+    kubectl create secret generic -n twentycrm tokens --from-literal accessToken=changeme --from-literal loginToken="changeme" --from-literal refreshToken="changeme" --from-literal fileToken="changeme"
+    ```
+
+3. Apply the manifests:
+
+    ```bash
+    kubectl apply -f .
+    ```
+
+## Customization
+
+### Kubernetes Manifests
+
+- **Namespace:** Update the `namespace` in the manifests as needed.
+- **Resource Limits:** Adjust the resource limits and requests according to your application's requirements.
+- **Environment Variables:** Configure server tokens in the `Secret` command above.
+
+### Terraform Files
+
+- **Variables:** Update the variables in the `variables.tf` file to match your environment.
+- **Locals:** Update the locals in the `main.tf` file to match your environment.
+- **Providers:** Ensure the provider configurations (e.g., AWS, GCP) are correct for your setup.
+- **Resources:** Modify the resource definitions as needed to fit your infrastructure.
+
+## Troubleshooting
+
+### Common Issues
+
+- **Connectivity:** Ensure your Kubernetes cluster is accessible and configured correctly.
+- **Permissions:** Verify that you have the necessary permissions to deploy resources in your cloud provider.
+- **Resource Limits:** Adjust resource limits if you encounter issues related to insufficient resources.
+
+### Logs and Debugging
+
+- Use `kubectl logs` to check the logs of your Kubernetes pods.
+- Use `terraform show` and `terraform state` to inspect your Terraform state and configurations.
+
+## Conclusion
+
+This setup provides a basic structure for deploying the TwentyCRM application using Kubernetes and Terraform. Ensure you thoroughly customize the manifests and Terraform files to suit your specific needs. For any issues or questions, please refer to the official documentation of Kubernetes and Terraform or seek support from your cloud provider.
+
+---
+
+Feel free to contribute and improve this repository by submitting pull requests or opening issues. Happy deploying!

packages/twenty-docker/k8s/manifests/deployment-db.yaml

@@ -0,0 +1,54 @@
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  labels:
+    app: twentycrm-db
+  name: twentycrm-db
+  namespace: twentycrm
+spec:
+  progressDeadlineSeconds: 600
+  replicas: 1
+  strategy:
+    rollingUpdate:
+      maxSurge: 1
+      maxUnavailable: 1
+    type: RollingUpdate
+  selector:
+    matchLabels:
+      app: twentycrm-db
+  template:
+    metadata:
+      labels:
+        app: twentycrm-db
+    spec:
+      volumes:
+        - name: twentycrm-db-data
+          persistentVolumeClaim:
+            claimName: twentycrm-db-pvc
+      containers:
+        - name: twentycrm
+          image: twentycrm/twenty-postgres:latest
+          imagePullPolicy: Always
+          env:
+            - name: POSTGRES_PASSWORD
+              value: "twenty"
+            - name: BITNAMI_DEBUG
+              value: "true"
+          ports:
+            - containerPort: 5432
+              name: tcp
+              protocol: TCP
+          resources:
+            requests:
+              memory: "256Mi"
+              cpu: "250m"
+            limits:
+              memory: "1024Mi"
+              cpu: "1000m"
+          stdin: true
+          tty: true
+          volumeMounts:
+            - mountPath: /bitnami/postgresql
+              name: twentycrm-db-data
+      dnsPolicy: ClusterFirst
+      restartPolicy: Always

packages/twenty-docker/k8s/manifests/deployment-redis.yaml

@@ -0,0 +1,44 @@
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  labels:
+    app: twentycrm-redis
+  name: twentycrm-redis
+  namespace: twentycrm
+spec:
+  progressDeadlineSeconds: 600
+  replicas: 1
+  strategy:
+    rollingUpdate:
+      maxSurge: 1
+      maxUnavailable: 1
+    type: RollingUpdate
+  selector:
+    matchLabels:
+      app: twentycrm-redis
+  template:
+    metadata:
+      labels:
+        app: twentycrm-redis
+    spec:
+      containers:
+        - name: redis
+          image: redis/redis-stack-server:latest
+          imagePullPolicy: Always
+          env:
+            - name: PORT
+              value: 6379
+          ports:
+            - containerPort: 6379
+              name: redis
+              protocol: TCP
+          resources:
+            requests:
+              memory: "1024Mi"
+              cpu: "250m"
+            limits:
+              memory: "2048Mi"
+              cpu: "500m"
+
+      dnsPolicy: ClusterFirst
+      restartPolicy: Always

packages/twenty-docker/k8s/manifests/deployment-server.yaml

@@ -0,0 +1,99 @@
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  labels:
+    app: twentycrm-server
+  name: twentycrm-server
+  namespace: twentycrm
+spec:
+  progressDeadlineSeconds: 600
+  replicas: 1
+  strategy:
+    rollingUpdate:
+      maxSurge: 1
+      maxUnavailable: 1
+    type: RollingUpdate
+  selector:
+    matchLabels:
+      app: twentycrm-server
+  template:
+    metadata:
+      labels:
+        app: twentycrm-server
+    spec:
+      volumes:
+        - name: twentycrm-server-data
+          persistentVolumeClaim:
+            claimName: twentycrm-server-pvc
+        - name: twentycrm-docker-data
+          persistentVolumeClaim:
+            claimName: twentycrm-docker-data-pvc
+      containers:
+        - name: twentycrm
+          image: twentycrm/twenty:latest
+          imagePullPolicy: Always
+          env:
+            - name: PORT
+              value: 3000
+            - name: SERVER_URL
+              value: "https://crm.example.com:443"
+            - name: FRONT_BASE_URL
+              value: "https://crm.example.com:443"
+            - name: "PG_DATABASE_URL"
+              value: "postgres://twenty:twenty@twenty-db.twentycrm.svc.cluster.local/default"
+            - name: "REDIS_HOST"
+              value: "twentycrm-redis.twentycrm.svc.cluster.local"
+            - name: "REDIS_PORT"
+              value: 6379
+            - name: ENABLE_DB_MIGRATIONS
+              value: "true"
+            - name: SIGN_IN_PREFILLED
+              value: "true"
+            - name: STORAGE_TYPE
+              value: "local"
+            - name: "MESSAGE_QUEUE_TYPE"
+              value: "bull-mq"
+            - name: "ACCESS_TOKEN_EXPIRES_IN"
+              value: "7d"
+            - name: "LOGIN_TOKEN_EXPIRES_IN"
+              value: "1h"
+            - name: ACCESS_TOKEN_SECRET
+              valueFrom:
+                secretKeyRef:
+                  name: tokens
+                  key: accessToken
+            - name: LOGIN_TOKEN_SECRET
+              valueFrom:
+                secretKeyRef:
+                  name: tokens
+                  key: loginToken
+            - name: REFRESH_TOKEN_SECRET
+              valueFrom:
+                secretKeyRef:
+                  name: tokens
+                  key: refreshToken
+            - name: FILE_TOKEN_SECRET
+              valueFrom:
+                secretKeyRef:
+                  name: tokens
+                  key: fileToken
+          ports:
+            - containerPort: 3000
+              name: http-tcp
+              protocol: TCP
+          resources:
+            requests:
+              memory: "256Mi"
+              cpu: "250m"
+            limits:
+              memory: "1024Mi"
+              cpu: "1000m"
+          stdin: true
+          tty: true
+          volumeMounts:
+            - mountPath: /app/docker-data
+              name: twentycrm-docker-data
+            - mountPath: /app/packages/twenty-server/.local-storage
+              name: twentycrm-server-data
+      dnsPolicy: ClusterFirst
+      restartPolicy: Always

packages/twenty-docker/k8s/manifests/deployment-worker.yaml

@@ -0,0 +1,80 @@
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  labels:
+    app: twentycrm-worker
+  name: twentycrm-worker
+  namespace: twentycrm
+spec:
+  progressDeadlineSeconds: 600
+  replicas: 1
+  strategy:
+    rollingUpdate:
+      maxSurge: 1
+      maxUnavailable: 1
+    type: RollingUpdate
+  selector:
+    matchLabels:
+      app: twentycrm-worker
+  template:
+    metadata:
+      labels:
+        app: twentycrm-worker
+    spec:
+      containers:
+        - name: twentycrm
+          image: twentycrm/twenty:latest
+          imagePullPolicy: Always
+          env:
+            - name: SERVER_URL
+              value: "https://crm.example.com:443"
+            - name: FRONT_BASE_URL
+              value: "https://crm.example.com:443"
+            - name: PG_DATABASE_URL
+              value: "postgres://twenty:twenty@twenty-db.twentycrm.svc.cluster.local/default"
+            - name: ENABLE_DB_MIGRATIONS
+              value: "false" # it already runs on the server
+            - name: STORAGE_TYPE
+              value: "local"
+            - name: "MESSAGE_QUEUE_TYPE"
+              value: "bull-mq"
+            - name: "CACHE_STORAGE_TYPE"
+              value: "redis"
+            - name: "REDIS_HOST"
+              value: "twentycrm-redis.twentycrm.svc.cluster.local"
+            - name: "REDIS_PORT"
+              value: 6379
+            - name: ACCESS_TOKEN_SECRET
+              valueFrom:
+                secretKeyRef:
+                  name: tokens
+                  key: accessToken
+            - name: LOGIN_TOKEN_SECRET
+              valueFrom:
+                secretKeyRef:
+                  name: tokens
+                  key: loginToken
+            - name: REFRESH_TOKEN_SECRET
+              valueFrom:
+                secretKeyRef:
+                  name: tokens
+                  key: refreshToken
+            - name: FILE_TOKEN_SECRET
+              valueFrom:
+                secretKeyRef:
+                  name: tokens
+                  key: fileToken
+          command:
+            - yarn
+            - worker:prod
+          resources:
+            requests:
+              memory: "1024Mi"
+              cpu: "250m"
+            limits:
+              memory: "2048Mi"
+              cpu: "1000m"
+          stdin: true
+          tty: true
+      dnsPolicy: ClusterFirst
+      restartPolicy: Always

packages/twenty-docker/k8s/manifests/ingress.yaml

@@ -0,0 +1,24 @@
+apiVersion: networking.k8s.io/v1
+kind: Ingress
+metadata:
+  name: twentycrm
+  namespace: twentycrm
+  annotations:
+    nginx.ingress.kubernetes.io/configuration-snippet: |
+      more_set_headers "X-Forwarded-For $http_x_forwarded_for";
+    nginx.ingress.kubernetes.io/force-ssl-redirect: "false"
+    kubernetes.io/ingress.class: "nginx"
+    nginx.ingress.kubernetes.io/backend-protocol: "HTTP"
+spec:
+  ingressClassName: nginx
+  rules:
+    - host: crm.example.com
+      http:
+        paths:
+          - path: /
+            pathType: Prefix
+            backend:
+              service:
+                name: twentycrm-server
+                port:
+                  name: http-tcp

packages/twenty-docker/k8s/manifests/pv-db.yaml

@@ -0,0 +1,11 @@
+apiVersion: v1
+kind: PersistentVolume
+metadata:
+  name: twentycrm-db-pv
+spec:
+  storageClassName: default
+  capacity:
+    storage: 10Gi
+  accessModes:
+    - ReadWriteOnce
+  persistentVolumeReclaimPolicy: Retain

packages/twenty-docker/k8s/manifests/pv-docker-data.yaml

@@ -0,0 +1,11 @@
+apiVersion: v1
+kind: PersistentVolume
+metadata:
+  name: twentycrm-docker-data-pv
+spec:
+  storageClassName: default
+  capacity:
+    storage: 100Mi
+  accessModes:
+    - ReadWriteOnce
+  persistentVolumeReclaimPolicy: Retain

packages/twenty-docker/k8s/manifests/pv-server.yaml

@@ -0,0 +1,12 @@
+apiVersion: v1
+kind: PersistentVolume
+metadata:
+  name: twentycrm-server-pv
+  namespace: twentycrm
+spec:
+  storageClassName: default
+  capacity:
+    storage: 10Gi
+  accessModes:
+    - ReadWriteOnce
+  persistentVolumeReclaimPolicy: Retain

packages/twenty-docker/k8s/manifests/pvc-db.yaml

@@ -0,0 +1,13 @@
+apiVersion: v1
+kind: PersistentVolumeClaim
+metadata:
+  name: twentycrm-db-pvc
+  namespace: twentycrm
+spec:
+  storageClassName: default
+  volumeName: twentycrm-db-pv
+  accessModes:
+    - ReadWriteOnce
+  resources:
+    requests:
+      storage: 10Gi

packages/twenty-docker/k8s/manifests/pvc-docker-data.yaml

@@ -0,0 +1,13 @@
+apiVersion: v1
+kind: PersistentVolumeClaim
+metadata:
+  name: twentycrm-docker-data-pvc
+  namespace: twentycrm
+spec:
+  storageClassName: default
+  volumeName: twentycrm-docker-data-pv
+  accessModes:
+    - ReadWriteOnce
+  resources:
+    requests:
+      storage: 100Mi

packages/twenty-docker/k8s/manifests/pvc-server.yaml

@@ -0,0 +1,13 @@
+apiVersion: v1
+kind: PersistentVolumeClaim
+metadata:
+  name: twentycrm-server-pvc
+  namespace: twentycrm
+spec:
+  storageClassName: default
+  volumeName: twentycrm-server-pv
+  accessModes:
+    - ReadWriteOnce
+  resources:
+    requests:
+      storage: 10Gi