Adds color support for navigation menu items.
---------
Co-authored-by: Copilot Autofix powered by AI <223894421+github-code-quality[bot]@users.noreply.github.com>
Co-authored-by: Devessier <baptiste@devessier.fr>
Co-authored-by: Charles Bochet <charles@twenty.com>
## Summary
Add Home/Chat tabs and a dedicated threads list in the navigation
drawer.
## Changes
- **Navbar tabs:** Tabs in the drawer to switch between Home and Chat
(with “New chat” button). Shown on desktop when expanded and on mobile
below the workspace selector.
- **Navbar threads list:** New `NavigationDrawerAIChatThreadsList` for
the Chat tab with date groups (Today / Yesterday / Older), thread rows
as `NavigationDrawerItem` (IconComment, title, timestamp). Shared
`useAIChatThreadClick` hook used by navbar and command menu; navbar
passes `resetNavigationStack: true`.
- **NavigationDrawerItem:** New `alwaysShowRightOptions` prop so the
timestamp is always visible (no hover-only).
---------
Co-authored-by: Etienne <45695613+etiennejouan@users.noreply.github.com>
Co-authored-by: Félix Malfait <felix@twenty.com>
Co-authored-by: Charles Bochet <charles@twenty.com>
## Summary
- Migrate more hand-written test mocks to auto-generated data from a
real Twenty instance
- Add generators for views, billing plans, API keys; extend record
generator for workspace members, favorites, connected accounts, calendar
events
- Remove 9 hand-written mock files replaced by generated equivalents
- Update 16 test/story files to use generated data
- Fix WorkflowEditActionEmailBase story assertion to match configured
recipient email
## Test plan
- [x] Lint, typecheck, unit tests pass
- [ ] Storybook tests pass in CI
This PR pgrades all BlockNote packages (@blocknote/core,
@blocknote/react, @blocknote/mantine, @blocknote/server-util,
@blocknote/xl-docx-exporter, @blocknote/xl-pdf-exporter) to 0.47.0 and
adapts the codebase to the new API.
### Changes
- Dependency upgrades: Bumped all BlockNote packages to 0.47.0, added
required Mantine v8 peer dependencies, removed unnecessary prosemirror
resolutions
- Formatting toolbar: Replaced the manual reimplementation of
FormattingToolbarController (which handled visibility, positioning,
portal rendering, text-alignment-based placement, and a
dangerouslySetInnerHTML transition trick) with BlockNote's built-in
FormattingToolbarController. The toolbar buttons themselves are
unchanged.
- Side menu: Replaced manual drag handle menu positioning and rendering
(DashboardBlockDragHandleMenu, DashboardBlockColorPicker, and their
floating configs) with BlockNote's built-in SideMenuController,
DragHandleButton, and DragHandleMenu components. Deleted 4 files that
became dead code.
- Extension API migration: Replaced deprecated editor.suggestionMenus
and editor.formattingToolbar APIs with the new extension system
(SuggestionMenu, useExtensionState, editor.getExtension())
- Slash menu fixes: Filtered out BlockNote's new default "File" item
(added in 0.47) to avoid duplicates with our custom one; added icon
mappings for new block types (Toggle List, Divider, Toggle Headings,
Headings 4-6)
- Server-side: Switched @blocknote/server-util to dynamic import() to
handle ESM-only transitive dependencies in CJS context
- Eliminated the StyledDropIndicator component, which was previously used to visually indicate drop targets during drag-and-drop operations.
- Updated the WorkspaceDndKitSortableItem to remove references to isDropTarget, streamlining the component's functionality.
- Introduced `FavoritesDragDropProviderContent` to manage drag-and-drop interactions for favorite items within the workspace.
- Updated `CurrentWorkspaceMemberFavoritesFolders` to wrap favorite components with the new `FavoritesDragProvider`, enabling drag-and-drop functionality.
- Refactored `PageDragDropProvider` to utilize `FavoritesDragDropProviderContent`, streamlining drag-and-drop logic.
- Added new components for handling workspace navigation items with drag-and-drop capabilities, including `WorkspaceSectionListDndKit` and `WorkspaceSectionListHelloPangea`.
- Enhanced existing components to support the new drag-and-drop context and improve user experience during item manipulation.
- Introduced `DndKitDropTargetIdSeparator.ts` to define a constant for separating droppable IDs in drag-and-drop functionality.
- Added `getDndKitDropTargetId.ts` to generate a unique drop target ID using the droppable ID and index.
- Created `parseDropTargetIdToDestination.ts` to parse the drop target ID back into its components, returning the droppable ID and index or null if invalid.
- Updated the `preloadWorkspaceDndKit` function to enhance code clarity by adding braces around the return statement when `preloadScheduled` is true. This change improves the readability of the conditional logic.
- Updated `CommandMenuAddToNavDraggablePlaceholder.tsx` to conditionally render children based on the `WorkspaceDndKitContext`, allowing for better integration with drag-and-drop features.
- Modified `CommandMenuAddToNavDroppable.tsx` to utilize lazy loading for the `CommandMenuAddToNavDroppableDndKit` component when in DnD mode, improving performance.
- Enhanced `CommandMenuItemWithAddToNavigationDrag.tsx` to support lazy loading of the `CommandMenuItemWithAddToNavigationDragDndKit` component, streamlining drag-and-drop interactions.
- Refactored imports in `CurrentWorkspaceMemberFavorites.tsx` for improved state management and consistency across components.
- Introduced `SortableDropTargetRefContext.tsx`, creating a context for managing references to sortable drop targets in the navigation menu.
- This context will facilitate the integration of drag-and-drop features within the workspace navigation, enhancing user interaction.
- Introduced `WorkspaceDndKitProvider.tsx`, a new provider component that manages drag-and-drop interactions within the workspace navigation.
- Added `WorkspaceDndKitContext.tsx` to create a context for sharing drag-and-drop state across components.
- Implemented state management for drag events, including handling drag start, drag over, and drop actions, utilizing `@dnd-kit/react` for enhanced drag-and-drop capabilities.
- Introduced `WorkspaceDndKitSortableItem.tsx`, a new component for implementing sortable drag-and-drop functionality within the workspace navigation menu.
- Utilizes `@dnd-kit/react/sortable` for drag-and-drop capabilities and includes styled components for visual indicators during sorting.
- Introduced `CommandMenuItemWithAddToNavigationDragDndKit.tsx` for draggable command menu items with navigation integration.
- Added `WorkspaceDndKitDraggableItem.tsx` to facilitate drag-and-drop functionality for workspace items, supporting custom item components and scrollable containers.
- Introduced `CommandMenuItemWithAddToNavigationDragDndKit.tsx` for draggable command menu items with navigation integration.
- Added `WorkspaceDndKitDraggableItem.tsx` to facilitate drag-and-drop functionality for workspace items, supporting custom item components and scrollable containers.
- Introduced a new file `preloadWorkspaceDndKit.ts` that contains a function to preload the WorkspaceDndKitProvider.
- The function ensures that preloading is scheduled only once, utilizing `requestIdleCallback` or a fallback `setTimeout` for efficient resource loading.
- Added @dnd-kit packages (abstract, collision, dom, geometry, react, state) at version 0.3.2 to yarn.lock and package.json.
- Updated @preact/signals-core to version 1.13.0 in yarn.lock.
## Summary
Unifies test mocking tooling across Jest and Storybook, replaces
handcrafted mock data with auto-generated server-fetched data, and
restructures the mock data generation script for maintainability.
### Mock data generation
- Split `generate-mock-data.ts` into three focused modules under
`scripts/mock-data/`:
- `utils.ts` — shared authentication, GraphQL client, and file writer
- `generate-metadata.ts` — fetches object metadata from `/metadata`
- `generate-record-data.ts` — fetches record data from `/graphql` using
metadata-driven dynamic queries
- The orchestrator (`generate-mock-data.ts`) authenticates once and
passes the token to both generators
- Company records are now fetched from the actual server (limited to 10
records) instead of being handcrafted
- Generated files are organized under `generated/metadata/objects/` and
`generated/data/companies/`
### Unified test utilities
- Consolidated Jest and MSW mocking into shared utilities that compose
production code (`prefillRecord`, `getRecordNodeFromRecord`,
`getRecordConnectionFromRecords`) with mock metadata
- Renamed `generateEmptyJestRecordNode` → `generateMockRecordNode` and
moved to `testing/utils/`
- Extracted `generateMockRecordConnection` into its own file
- Removed `sanitizeInputForPrefill` workaround (no longer needed with
correctly shaped generated data)
- Add media-specific events
- Extend `iFrame` with missing properties
- Enrich `SerializedEventData` with media-related target fields so
serialized events carry the media element state.
- Refactor the `remote-elements` code generator to support per-element
custom events
## Remove all Recoil references and replace with Jotai
### Summary
- Removed every occurrence of Recoil from the entire codebase, replacing
with Jotai equivalents where applicable
- Updated `README.md` tech stack: `Recoil` → `Jotai`
- Rewrote documentation code examples to use
`createAtomState`/`useAtomState` instead of `atom`/`useRecoilState`, and
removed `RecoilRoot` wrappers
- Cleaned up source code comment and Cursor rules that referenced Recoil
- Applied changes across all 13 locale translations (ar, cs, de, es, fr,
it, ja, ko, pt, ro, ru, tr, zh)
## Summary
The global `jotaiStore` singleton was shared across all tests without
reset, leaking state between test suites and causing unbounded heap
growth within each Jest worker.
- `getJestMetadataAndApolloMocksWrapper` now creates a **fresh Jotai
store per wrapper** (equivalent of RecoilRoot isolation), so each test
gets clean state
- Added `workerIdleMemoryLimit: '512MB'` to recycle workers that still
accumulate memory
- Set `maxWorkers: 3` for CI
## Performance
Measured on 48 test suites (command-menu + views + object-record hooks),
single worker:
| Metric | Before | After |
|---|---|---|
| Peak heap | **1519 MB** | **~530 MB** (-65%) |
| Final heap | **1519 MB** | **437 MB** (-71%) |
| Growth pattern | Monotonic (never freed) | Bounded sawtooth (recycled
at 512MB) |
## Fix SDK first-run build failure when generated API client is missing
### Problem
When running `twenty app:dev` for the first time, the build pipeline
crashes because:
1. The esbuild front-component watcher tries to resolve
`twenty-sdk/generated`, but the generated API client doesn't exist yet —
it's only created later in the pipeline after syncing with the server.
2. The typecheck plugin (`tsc --noEmit`) runs as a blocking esbuild
`onStart` hook, so even with stub files, type errors on the empty client
classes (e.g. `Property 'query' does not exist on type 'CoreApiClient'`)
cause the build to fail before the real client can be generated.
This creates a chicken-and-egg problem: the watchers need the generated
client to build, but the client is generated after the watchers produce
their output.
### Solution
**1. Stub generated client on startup**
Added `ensureGeneratedClientStub` to `ClientService` that writes minimal
placeholder files (`CoreApiClient`, `MetadataApiClient`) into
`node_modules/twenty-sdk/generated/` if the directory doesn't already
exist. This is called in `DevModeOrchestrator.start()` before any
watchers are created, so the `twenty-sdk/generated` import always
resolves.
**2. Skip typecheck on first sync round**
Made the esbuild typecheck plugin accept a `shouldSkipTypecheck`
callback. The orchestrator starts with `skipTypecheck = true` and passes
`() => this.skipTypecheck` through the watcher chain. After the real API
client is generated, the flag is flipped to `false`, so subsequent
rebuilds enforce full type checking with the real generated types.
This PR allows to handle ObjectMetadataItem, FieldMetadataItem and
NavigationMenuItem SSE events.
---------
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Abdul Rahman
