Bump version to 0.23.1 (#6567)

As title

---------

Co-authored-by: Weiko <corentin@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/CONTRIBUTING.md

@@ -42,35 +42,39 @@ Therefore, ensure you are assigned to an issue before beginning work on it.
 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.
+
+```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.
 
 
-3. **Make Changes:** Make your desired changes and ensure that your code adheres to Twenty's coding standards.
+5. **Test Locally:** Test your changes locally to ensure they work as expected.
 
 
-4. **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
 ```
 
 
-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.
+8. **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.
 
 
-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. **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.
+10. **Merge:** Once approved, maintainers will merge your pull request into the main repository.
 
 
 <br>

.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

@@ -21,6 +21,7 @@ jobs:
     runs-on: ubuntu-latest
     env:
       REACT_APP_SERVER_BASE_URL: http://localhost:3000
+      NX_REJECT_UNKNOWN_LOCAL_CACHE: 0
     steps:
       - name: Cancel Previous Runs
         uses: styfle/cancel-workflow-action@0.11.0
@@ -47,6 +48,7 @@ jobs:
         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
@@ -62,7 +64,23 @@ jobs:
       - name: Front / Write .env
         run: npx nx reset:env twenty-front
       - name: Run storybook tests
-        run: npx nx storybook:static:test twenty-front --configuration=${{ matrix.storybook_scope }}
+        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
@@ -70,6 +88,7 @@ jobs:
     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:
@@ -87,32 +106,36 @@ jobs:
           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
+        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

@@ -19,6 +19,8 @@ concurrency:
 jobs:
   server-test:
     runs-on: ubuntu-latest
+    env:
+      NX_REJECT_UNKNOWN_LOCAL_CACHE: 0
     services:
       postgres:
         image: twentycrm/twenty-postgres
@@ -28,7 +30,7 @@ jobs:
         ports:
           - 5432:5432
     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

.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 }}

.gitignore

@@ -2,6 +2,7 @@
 .DS_Store
 /.idea
 **/**/node_modules/
+.cache
 
 # yarn is the recommended package manager across the project
 **/**/.package-lock.json

.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,14 @@
       "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-postgres",
       "path": "../packages/twenty-postgres"
@@ -47,21 +47,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 +99,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.3.1.cjs

README.md

@@ -2,22 +2,22 @@
 <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,7 +26,7 @@
 
 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>
 
@@ -38,8 +38,8 @@ 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 +61,18 @@ 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 +81,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 +91,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 +101,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 +111,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 +121,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 +131,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 +141,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

@@ -119,7 +119,7 @@ if command -v nc &> /dev/null; then
   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 +148,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

@@ -106,48 +106,38 @@
       "dependsOn": ["^build"]
     },
     "storybook:build": {
-      "executor": "@nx/storybook:build",
+      "executor": "nx:run-commands",
       "cache": true,
       "dependsOn": ["^build"],
       "inputs": ["^default", "excludeTests"],
-      "outputs": ["{options.outputDir}"],
+      "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",
-      "options": {
-        "staticFilePath": "{projectRoot}/storybook-static",
-        "parallel": false,
-        "watch": false
-      }
-    },
-    "storybook:coverage": {
+    "storybook:serve:static": {
       "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"
-      ],
+      "dependsOn": ["storybook:build"],
       "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"
+        "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": {
@@ -166,11 +156,52 @@
         "port": 6006
       }
     },
-    "storybook:static:test": {
+    "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:static {projectName} --port={args.port}' 'npx wait-on tcp:{args.port} && nx storybook:test {projectName} --port={args.port}'"
+          "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
       }
@@ -179,12 +210,18 @@
       "executor": "nx:run-commands",
       "options": {
         "cwd": "{projectRoot}",
-        "command": "cross-var chromatic --project-token=$CHROMATIC_PROJECT_TOKEN --build-script-name=build-storybook --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"
         }
       }
     },

package.json

@@ -3,13 +3,16 @@
     "@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",
+    "@blocknote/core": "^0.15.3",
+    "@blocknote/mantine": "^0.15.3",
+    "@blocknote/react": "^0.15.3",
     "@chakra-ui/accordion": "^2.3.0",
     "@chakra-ui/system": "^2.6.0",
     "@codesandbox/sandpack-react": "^2.13.5",
+    "@dagrejs/dagre": "^1.1.2",
     "@docusaurus/core": "^3.1.0",
     "@docusaurus/preset-classic": "^3.1.0",
     "@emotion/react": "^11.11.1",
@@ -22,6 +25,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",
@@ -56,15 +61,19 @@
     "@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",
+    "aws-sdk": "^2.1658.0",
     "axios": "^1.6.2",
     "bcrypt": "^5.1.1",
     "better-sqlite3": "^9.2.2",
@@ -72,9 +81,8 @@
     "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",
     "danger-plugin-todos": "^1.3.1",
     "dataloader": "^2.2.2",
     "date-fns": "^2.30.0",
@@ -89,12 +97,14 @@
     "facepaint": "^1.2.1",
     "file-type": "16.5.4",
     "framer-motion": "^10.12.17",
+    "fs-extra": "^11.2.0",
     "googleapis": "105",
     "graphiql": "^3.1.1",
     "graphql": "16.8.0",
     "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 +120,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 +133,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 +177,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",
@@ -177,16 +192,20 @@
     "tslib": "^2.3.0",
     "tsup": "^8.0.1",
     "type-fest": "4.10.1",
-    "typeorm": "^0.3.17",
+    "typeorm": "patch:typeorm@0.3.20#./packages/twenty-server/patches/typeorm+0.3.20.patch",
+    "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",
+    "@babel/preset-typescript": "^7.24.6",
+    "@crxjs/vite-plugin": "^1.0.14",
     "@docusaurus/module-type-aliases": "^3.1.0",
     "@docusaurus/tsconfig": "3.1.0",
     "@graphql-codegen/cli": "^3.3.1",
@@ -228,11 +247,12 @@
     "@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",
@@ -240,14 +260,17 @@
     "@types/jest": "^29.5.11",
     "@types/js-cookie": "^3.0.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",
@@ -312,7 +335,6 @@
     "ts-node": "10.9.1",
     "tsconfig-paths": "^4.2.0",
     "tsx": "^4.7.2",
-    "typescript": "5.3.3",
     "vite": "^5.0.0",
     "vite-plugin-checker": "^0.6.2",
     "vite-plugin-dts": "3.8.1",
@@ -326,7 +348,7 @@
   },
   "license": "AGPL-3.0",
   "name": "twenty",
-  "packageManager": "yarn@4.0.2",
+  "packageManager": "yarn@4.3.1",
   "resolutions": {
     "graphql": "16.8.0",
     "type-fest": "4.10.1",
@@ -341,7 +363,6 @@
     "packages": [
       "packages/twenty-chrome-extension",
       "packages/twenty-front",
-      "packages/twenty-docs",
       "packages/twenty-server",
       "packages/twenty-emails",
       "packages/twenty-ui",

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/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

@@ -7,6 +7,6 @@
   </head>
   <body>
     <div id="app"></div>
-    <script type="module" src="/src/options/index.tsx"></script>
+    <script type="module" src="/src/options/page-inaccessible-index.tsx"></script>
   </body>
-</html>
+</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/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

@@ -21,3 +21,5 @@ STORAGE_TYPE=local
 # STORAGE_S3_REGION=eu-west3
 # STORAGE_S3_NAME=my-bucket
 # STORAGE_S3_ENDPOINT=
+
+MESSAGE_QUEUE_TYPE=pg-boss

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,7 @@ services:
       PG_DATABASE_URL: postgres://twenty:twenty@${PG_DATABASE_HOST}/default
       SERVER_URL: ${SERVER_URL}
       FRONT_BASE_URL: ${FRONT_BASE_URL:-$SERVER_URL}
+      MESSAGE_QUEUE_TYPE: ${MESSAGE_QUEUE_TYPE}
 
       ENABLE_DB_MIGRATIONS: "true"
 
@@ -26,6 +39,8 @@ services:
       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 +50,32 @@ 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}
+      MESSAGE_QUEUE_TYPE: ${MESSAGE_QUEUE_TYPE}
+
+      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:
@@ -49,5 +90,6 @@ services:
     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:
+      - env:
+        - name: POSTGRES_PASSWORD
+          value: "twenty"
+        - name: BITNAMI_DEBUG
+          value: "true"
+      - image: twentycrm/twenty-postgres:latest
+        imagePullPolicy: Always
+        name: twentycrm
+        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-server.yaml

@@ -0,0 +1,82 @@
+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
+      containers:
+      - env:
+        - name: PORT
+          value: 3000
+        - name: SERVER_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: "true"
+        - name: SIGN_IN_PREFILLED
+          value: "true"
+        - name: STORAGE_TYPE
+          value: "local"
+        - 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
+      - image: twentycrm/twenty:latest
+        imagePullPolicy: Always
+        name: twentycrm
+        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/.local-storage
+          name: twentycrm-server-data
+      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-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-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

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

@@ -0,0 +1,18 @@
+apiVersion: v1
+kind: Service
+metadata:
+  name: twentycrm-db
+  namespace: twentycrm
+spec:
+  internalTrafficPolicy: Cluster
+  ports:
+  - port: 5432
+    protocol: TCP
+    targetPort: 5432
+  selector:
+    app: twentycrm-db
+  sessionAffinity: ClientIP
+  sessionAffinityConfig:
+    clientIP:
+      timeoutSeconds: 10800
+  type: ClusterIP

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

@@ -0,0 +1,19 @@
+apiVersion: v1
+kind: Service
+metadata:
+  name: twentycrm-server
+  namespace: twentycrm
+spec:
+  internalTrafficPolicy: Cluster
+  ports:
+  - name: http-tcp
+    port: 3000
+    protocol: TCP
+    targetPort: 3000
+  selector:
+    app: twentycrm-server
+  sessionAffinity: ClientIP
+  sessionAffinityConfig:
+    clientIP:
+      timeoutSeconds: 10800
+  type: ClusterIP

packages/twenty-docker/k8s/terraform/deployment-db.tf

@@ -0,0 +1,90 @@
+resource "kubernetes_deployment" "twentycrm_db" {
+  metadata {
+    name      = "${local.twentycrm_app_name}-db"
+    namespace = kubernetes_namespace.twentycrm.metadata.0.name
+    labels = {
+      app = "${local.twentycrm_app_name}-db"
+    }
+  }
+
+  spec {
+    replicas = 1
+    selector {
+      match_labels = {
+        app = "${local.twentycrm_app_name}-db"
+      }
+    }
+
+    strategy {
+      type = "RollingUpdate"
+      rolling_update {
+        max_surge       = "1"
+        max_unavailable = "1"
+      }
+    }
+
+    template {
+      metadata {
+        labels = {
+          app = "${local.twentycrm_app_name}-db"
+        }
+      }
+
+      spec {
+        # security_context {
+        #   fs_group = 0
+        # }
+        container {
+          image = local.twentycrm_db_image
+          name  = local.twentycrm_app_name
+          stdin = true
+          tty   = true
+          security_context {
+            allow_privilege_escalation = true
+          }
+
+          env {
+            name  = "POSTGRES_PASSWORD"
+            value = "twenty"
+          }
+          env {
+            name  = "BITNAMI_DEBUG"
+            value = true
+          }
+
+          port {
+            container_port = 5432
+            protocol       = "TCP"
+          }
+
+          resources {
+            requests = {
+              cpu    = "250m"
+              memory = "256Mi"
+            }
+            limits = {
+              cpu    = "1000m"
+              memory = "1024Mi"
+            }
+          }
+
+          volume_mount {
+            name       = "nfs-twentycrm-db-data"
+            mount_path = "/bitnami/postgresql"
+          }
+        }
+
+        volume {
+          name = "nfs-twentycrm-db-data"
+
+          persistent_volume_claim {
+            claim_name = "nfs-twentycrm-db-data-pvc"
+          }
+        }
+
+        dns_policy     = "ClusterFirst"
+        restart_policy = "Always"
+      }
+    }
+  }
+}

packages/twenty-docker/k8s/terraform/deployment-server.tf

@@ -0,0 +1,169 @@
+resource "kubernetes_deployment" "twentycrm_server" {
+  metadata {
+    name      = "${local.twentycrm_app_name}-server"
+    namespace = kubernetes_namespace.twentycrm.metadata.0.name
+    labels = {
+      app = "${local.twentycrm_app_name}-server"
+    }
+  }
+
+  spec {
+    replicas = 1
+    selector {
+      match_labels = {
+        app = "${local.twentycrm_app_name}-server"
+      }
+    }
+
+    strategy {
+      type = "RollingUpdate"
+      rolling_update {
+        max_surge       = "1"
+        max_unavailable = "1"
+      }
+    }
+
+    template {
+      metadata {
+        labels = {
+          app = "${local.twentycrm_app_name}-server"
+        }
+      }
+
+      spec {
+        container {
+          image = local.twentycrm_server_image
+          name  = local.twentycrm_app_name
+          stdin = true
+          tty   = true
+
+          security_context {
+            allow_privilege_escalation = true
+            privileged                 = true
+            run_as_user                = 1000
+          }
+
+          env {
+            name  = "PORT"
+            value = "3000"
+          }
+          env {
+            name  = "DEBUG_MODE"
+            value = false
+          }
+
+          env {
+            name  = "SERVER_URL"
+            value = "https://crm.example.com:443"
+          }
+
+          env {
+            name  = "FRONT_BASE_URL"
+            value = "https://crm.example.com:443"
+          }
+
+          env {
+            name  = "BACKEND_SERVER_URL"
+            value = "https://crm.example.com:443"
+          }
+
+          env {
+            name  = "PG_DATABASE_URL"
+            value = "postgres://twenty:twenty@twentycrm-db.twentycrm.svc.cluster.local/default"
+          }
+
+          env {
+            name  = "ENABLE_DB_MIGRATIONS"
+            value = "true"
+          }
+
+          env {
+            name  = "SIGN_IN_PREFILLED"
+            value = "true"
+          }
+
+          env {
+            name  = "STORAGE_TYPE"
+            value = "local"
+          }
+
+          env {
+            name = "ACCESS_TOKEN_SECRET"
+            value_from {
+              secret_key_ref {
+                name = "tokens"
+                key  = "accessToken"
+              }
+            }
+          }
+
+          env {
+            name = "LOGIN_TOKEN_SECRET"
+            value_from {
+              secret_key_ref {
+                name = "tokens"
+                key  = "loginToken"
+              }
+            }
+          }
+
+          env {
+            name = "REFRESH_TOKEN_SECRET"
+            value_from {
+              secret_key_ref {
+                name = "tokens"
+                key  = "refreshToken"
+              }
+            }
+          }
+
+          env {
+            name = "FILE_TOKEN_SECRET"
+            value_from {
+              secret_key_ref {
+                name = "tokens"
+                key  = "fileToken"
+              }
+            }
+          }
+
+          port {
+            container_port = 3000
+            protocol       = "TCP"
+          }
+
+          resources {
+            requests = {
+              cpu    = "250m"
+              memory = "256Mi"
+            }
+            limits = {
+              cpu    = "1000m"
+              memory = "1024Mi"
+            }
+          }
+
+          volume_mount {
+            name       = "nfs-twentycrm-server-data"
+            mount_path = "/app/.local-storage"
+          }
+        }
+
+        volume {
+          name = "nfs-twentycrm-server-data"
+
+          persistent_volume_claim {
+            claim_name = "nfs-twentycrm-server-data-pvc"
+          }
+        }
+
+        dns_policy     = "ClusterFirst"
+        restart_policy = "Always"
+      }
+    }
+  }
+  depends_on = [
+    kubernetes_deployment.twentycrm_db,
+    kubernetes_secret.twentycrm_tokens
+  ]
+}

packages/twenty-docker/k8s/terraform/ingress.tf

@@ -0,0 +1,30 @@
+resource "kubernetes_ingress" "twentycrm" {
+  wait_for_load_balancer = true
+  metadata {
+    name      = "${local.twentycrm_app_name}-ingress"
+    namespace = kubernetes_namespace.twentycrm.metadata.0.name
+    annotations = {
+      "kubernetes.io/ingress.class"                       = "nginx"
+      "nginx.ingress.kubernetes.io/configuration-snippet" = <<EOF
+      more_set_headers "X-Forwarded-For $http_x_forwarded_for";
+      EOF
+      "nginx.ingress.kubernetes.io/force-ssl-redirect"    = "false"
+      "nginx.ingress.kubernetes.io/backend-protocol"      = "HTTP"
+    }
+  }
+  spec {
+    ingress_class_name = "nginx"
+    rule {
+      host = local.twentycrm_app_hostname
+      http {
+        path {
+          path = "/*"
+          backend {
+            service_name = kubernetes_service.twentycrm_server.metadata.0.name
+            service_port = kubernetes_service.twentycrm_server.spec.0.port.0.port
+          }
+        }
+      }
+    }
+  }
+}

packages/twenty-docker/k8s/terraform/main.tf

@@ -0,0 +1,36 @@
+#############
+# Providers #
+#############
+provider "kubernetes" {
+  config_path = "~/.kube/config"
+}
+
+#################
+# Global Locals #
+#################
+locals {
+  twentycrm_app_name            = "twentycrm"
+  twentycrm_app_hostname        = "crm.example.com"
+  twentycrm_server_image        = "twentycrm/twenty:v0.10.4"
+  twentycrm_db_image            = "twentycrm/twenty-postgres:v0.10.4"
+  twentycrm_db_pv_path          = "/path/to/mystorage"
+  twentycrm_db_pv_capacity      = "10Gi"
+  twentycrm_db_pvc_requests     = "10Gi"
+  twentycrm_server_pv_path      = "/path/to/mystorage"
+  twentycrm_server_pv_capacity  = "10Gi"
+  twentycrm_server_pvc_requests = "10Gi"
+}
+
+####################
+# Terraform Config #
+####################
+terraform {
+  required_version = ">= 1.7.4"
+  required_providers {
+    kubernetes = {
+      source  = "hashicorp/kubernetes"
+      version = ">= 2.23.0"
+    }
+  }
+
+}

packages/twenty-docker/k8s/terraform/namespace.tf

@@ -0,0 +1,9 @@
+resource "kubernetes_namespace" "twentycrm" {
+  metadata {
+    annotations = {
+      name = "twentycrm"
+    }
+
+    name = "twentycrm"
+  }
+}

packages/twenty-docker/k8s/terraform/pv-db.tf

@@ -0,0 +1,19 @@
+resource "kubernetes_persistent_volume" "db" {
+  metadata {
+    name = "${local.twentycrm_app_name}-db-pv"
+  }
+  spec {
+    storage_class_name = "default"
+    capacity = {
+      storage = local.twentycrm_db_pv_capacity
+    }
+    access_modes = ["ReadWriteOnce"]
+    # refer to Terraform Docs for your specific implementation requirements 
+    # https://registry.terraform.io/providers/hashicorp/kubernetes/latest/docs/resources/persistent_volume
+    persistent_volume_source {
+      local {
+        path = local.twentycrm_db_pv_path
+      }
+    }
+  }
+}

packages/twenty-docker/k8s/terraform/pv-server.tf

@@ -0,0 +1,19 @@
+resource "kubernetes_persistent_volume" "server" {
+  metadata {
+    name = "${local.twentycrm_app_name}-server-pv"
+  }
+  spec {
+    storage_class_name = "default"
+    capacity = {
+      storage = local.twentycrm_server_pv_capacity
+    }
+    access_modes = ["ReadWriteOnce"]
+    # refer to Terraform Docs for your specific implementation requirements 
+    # https://registry.terraform.io/providers/hashicorp/kubernetes/latest/docs/resources/persistent_volume
+    persistent_volume_source {
+      local {
+        path = local.twentycrm_server_pv_path
+      }
+    }
+  }
+}

packages/twenty-docker/k8s/terraform/pvc-db.tf

@@ -0,0 +1,15 @@
+resource "kubernetes_persistent_volume_claim" "db" {
+  metadata {
+    name      = "${local.twentycrm_app_name}-db-pvc"
+    namespace = kubernetes_namespace.twentycrm.metadata.0.name
+  }
+  spec {
+    access_modes = ["ReadWriteOnce"]
+    resources {
+      requests = {
+        storage = local.twentycrm_db_pvc_requests
+      }
+    }
+    volume_name = kubernetes_persistent_volume.db.metadata.0.name
+  }
+}

packages/twenty-docker/k8s/terraform/pvc-server.tf

@@ -0,0 +1,15 @@
+resource "kubernetes_persistent_volume_claim" "server" {
+  metadata {
+    name      = "${local.twentycrm_app_name}-server-pvc"
+    namespace = kubernetes_namespace.twentycrm.metadata.0.name
+  }
+  spec {
+    access_modes = ["ReadWriteOnce"]
+    resources {
+      requests = {
+        storage = local.twentycrm_server_pvc_requests
+      }
+    }
+    volume_name = kubernetes_persistent_volume.server.metadata.0.name
+  }
+}

packages/twenty-docker/k8s/terraform/secret.tf

@@ -0,0 +1,15 @@
+resource "kubernetes_secret" "twentycrm_tokens" {
+  metadata {
+    name      = "tokens"
+    namespace = kubernetes_namespace.twentycrm.metadata.0.name
+  }
+
+  data = {
+    accessToken  = var.twentycrm_token_accessToken
+    loginToken   = var.twentycrm_token_loginToken
+    refreshToken = var.twentycrm_token_refreshToken
+    fileToken    = var.twentycrm_token_fileToken
+  }
+
+  # type = "kubernetes.io/basic-auth"
+}

packages/twenty-docker/k8s/terraform/service-db.tf

@@ -0,0 +1,18 @@
+resource "kubernetes_service" "twentycrm_db" {
+  metadata {
+    name      = "${local.twentycrm_app_name}-db"
+    namespace = kubernetes_namespace.twentycrm.metadata.0.name
+  }
+  spec {
+    selector = {
+      app = "${local.twentycrm_app_name}-db"
+    }
+    session_affinity = "ClientIP"
+    port {
+      port        = 5432
+      target_port = 5432
+    }
+
+    type = "ClusterIP"
+  }
+}

packages/twenty-docker/k8s/terraform/service-server.tf

@@ -0,0 +1,19 @@
+resource "kubernetes_service" "twentycrm_server" {
+  metadata {
+    name      = "${local.twentycrm_app_name}-server"
+    namespace = kubernetes_namespace.twentycrm.metadata.0.name
+  }
+  spec {
+    selector = {
+      app = "${local.twentycrm_app_name}-server"
+    }
+    session_affinity = "ClientIP"
+    port {
+      name        = "http-tcp"
+      port        = 3000
+      target_port = 3000
+    }
+
+    type = "ClusterIP"
+  }
+}

packages/twenty-docker/k8s/terraform/variables.tf

@@ -0,0 +1,24 @@
+variable "twentycrm_token_accessToken" {
+  type        = string
+  description = "TwentyCRM access Token"
+}
+
+variable "twentycrm_token_loginToken" {
+  type        = string
+  description = "TwentyCRM login Token"
+}
+
+variable "twentycrm_token_refreshToken" {
+  type        = string
+  description = "TwentyCRM refresh Token"
+}
+
+variable "twentycrm_token_fileToken" {
+  type        = string
+  description = "TwentyCRM file Token"
+}
+
+variable "twentycrm_pgdb_admin_password" {
+  type        = string
+  description = "TwentyCRM password for postgres database"
+}

packages/twenty-docker/twenty-docs/Dockerfile

@@ -1,32 +0,0 @@
-FROM node:18.17.1-alpine as twenty-docs-build
-
-WORKDIR /app
-
-ARG SHOULD_INDEX_DOC
-
-COPY ./package.json .
-COPY ./yarn.lock .
-COPY ./.yarnrc.yml .
-COPY ./.yarn/releases /app/.yarn/releases
-COPY ./packages/twenty-docs/package.json /app/packages/twenty-docs/package.json
-COPY ./packages/twenty-emails /app/packages/twenty-emails
-COPY ./packages/twenty-ui /app/packages/twenty-ui
-RUN yarn
-
-COPY ./packages/twenty-docs /app/packages/twenty-docs
-RUN npx nx build twenty-docs
-
-CMD ["tail", "-f", "/dev/null"]
-
-FROM node:18.17.1-alpine as twenty-docs
-
-WORKDIR /app/packages/twenty-docs
-
-COPY --from=twenty-docs-build /app/packages/twenty-docs/build ./build
-
-RUN yarn global add serve
-
-LABEL org.opencontainers.image.source=https://github.com/twentyhq/twenty
-LABEL org.opencontainers.image.description="This image provides a consistent and reproducible environment for the documentation."
-
-CMD ["serve", "-s", "./build"]

packages/twenty-docker/twenty-postgres-spilo/Dockerfile

@@ -1,6 +1,6 @@
 ARG POSTGRES_VERSION=15
 ARG SPILO_VERSION=3.2-p1
-ARG PG_GRAPHQL_VERSION=1.5.1
+ARG PG_GRAPHQL_VERSION=1.5.6
 ARG WRAPPERS_VERSION=0.2.0
 
 # Build the mysql_fdw extension

packages/twenty-docker/twenty-postgres/Dockerfile

@@ -3,7 +3,7 @@ ARG IMAGE_TAG='15.5.0-debian-11-r15'
 FROM bitnami/postgresql:${IMAGE_TAG}
 
 ARG PG_MAIN_VERSION=15
-ARG PG_GRAPHQL_VERSION=1.5.1
+ARG PG_GRAPHQL_VERSION=1.5.6
 ARG WRAPPERS_VERSION=0.2.0
 ARG TARGETARCH
 

packages/twenty-docker/twenty/entrypoint.sh

@@ -1,16 +1,16 @@
 #!/bin/sh
 
 # Check if the initialization has already been done and that we enabled automatic migration
-if [ "${ENABLE_DB_MIGRATIONS}" = "true" ] && [ ! -f /app/${STORAGE_LOCAL_PATH:-.local-storage}/db_initialized ]; then
+if [ "${ENABLE_DB_MIGRATIONS}" = "true" ] && [ ! -f /app/docker-data/db_status ]; then
     echo "Running database setup and migrations..."
 
     # Run setup and migration scripts
-    npx ts-node ./scripts/setup-db.ts
+    NODE_OPTIONS="--max-old-space-size=1500" npx ts-node ./scripts/setup-db.ts
     yarn database:migrate:prod
 
     # Mark initialization as done
     echo "Successfuly migrated DB!"
-    touch /app/${STORAGE_LOCAL_PATH:-.local-storage}/db_initialized
+    touch /app/docker-data/db_status
 fi
 
 # Continue with the original Docker command

packages/twenty-docs/.gitignore

@@ -1,22 +0,0 @@
-# Dependencies
-/node_modules
-
-# Production
-/build
-
-# Generated files
-.docusaurus
-.cache-loader
-
-# Misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-package-lock.json

packages/twenty-docs/README.md

@@ -1,5 +0,0 @@
-# Documentation
-
-The docs here are managed through [Docusaurus 2](https://docusaurus.io/).
-
-We recommend you go directly to the [statically generated website](https://docs.twenty.com) rather than read them here.

packages/twenty-docs/babel.config.js

@@ -1,3 +0,0 @@
-module.exports = {
-  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
-};

packages/twenty-docs/docs/contributor/_category_.json

@@ -1,4 +0,0 @@
-{
-  "label": "Contributing",
-  "position": 3
-}

packages/twenty-docs/docs/contributor/frontend/_category_.json

@@ -1,5 +0,0 @@
-{
-  "position": 3,
-  "collapsible": true,
-  "collapsed": true
-}

packages/twenty-docs/docs/contributor/frontend/hotkeys.mdx

@@ -1,23 +0,0 @@
----
-title: Hotkeys
-sidebar_position: 11
-sidebar_custom_props:
-  icon: TbKeyboard
----
-
-You can intercept any hotkey combination and execute a custom action.
-
-There's a thin wrapper on top of [react-hotkeys-hook](https://react-hotkeys-hook.vercel.app/docs/intro) that makes it more performant and avoids unnecessary re-renders.
-
-There's also a wrapper hook `useScopedHotkeys` that makes it easy to manage scopes. 
-
-```ts
-useScopedHotkeys(
-  'ctrl+k,meta+k',
-  () => {
-    openCommandMenu();
-  },
-  AppHotkeyScope.CommandMenu,
-  [openCommandMenu],
-);
-```

packages/twenty-docs/docs/contributor/server/_category_.json

@@ -1,5 +0,0 @@
-{
-  "position": 4,
-  "collapsible": true,
-  "collapsed": true
-}

packages/twenty-docs/docs/index.mdx

@@ -1,26 +0,0 @@
----
-id: homepage
-sidebar_position: 0
-sidebar_class_name: display-none
-title: Welcome
-hide_title: true
-hide_table_of_contents: true
-custom_edit_url: null
-pagination_next: null
----
-import ThemedImage from '@theme/ThemedImage';
-
-
-Twenty is a CRM designed to fit your unique business needs.  
-It was brought to life by a passionate community that cares about quality and precision in engineering.
-
-There are three different ways to get started:
-- **Managed Cloud:** The fastest and easiest way to try the app 
-- **Local Setup:** If you're a developer and would like to contribute to the app
-- **Self-Hosting:** If you know how to run a server and want to host the app yourself
-
-
-Once you're setup, you can check the "Extending" or "Contributing" section to start building.
-  
-<ThemedImage sources={{light: "../img/light-doc-preview.png", dark:"../img/dark-doc-preview.png"}} style={{width:'100%', maxWidth:'700px'}}/>
-