Commit Graph

15 Commits

Author SHA1 Message Date
Charles Bochet ef499b6d47 Re-enable disabled lint rules and right-size CI runners (#18461)
## Summary

- Re-enable one lint rule that was temporarily disabled during the
ESLint-to-Oxlint migration:
- **`twenty/sort-css-properties-alphabetically`** in twenty-front — 578
violations auto-fixed across 390 files
- Document why **`typescript/consistent-type-imports`** cannot be
auto-fixed in twenty-server: NestJS relies on `emitDecoratorMetadata`
for DI, so converting constructor parameter imports to `import type`
erases them at compile time and breaks dependency injection at runtime
- Right-size CI runners, reducing 8-core usage from 18 jobs to 3:

| Change | Jobs | Rationale |
|--------|------|-----------|
| **Keep 8-core** | `ci-merge-queue/e2e-test`,
`ci-front/front-sb-build`, `ci-front/front-build` | Heavy builds needing
max CPU + memory (10GB NODE_OPTIONS, full Storybook webpack bundling) |
| **8-core → 4-core** | `ci-server` (build, lint-typecheck, validation,
test, integration-test), `ci-front/front-sb-test`,
`ci-zapier/server-setup`, `ci-sdk/sdk-e2e-test` | Already sharded into
10-12 parallel instances, I/O-bound (DB/Redis), or moderate single
builds |
| **8-core → 2-core** | `ci-emails/emails-test` | Trivially lightweight
(build + curl health check) |
| **Removed** | `ci-front/front-chromatic-deployment` | Dead code —
permanently disabled with `if: false` |

- Fix merge queue CI issues:
- **Concurrency**: Use `merge_group.base_ref` instead of unique merge
group ref so new queue entries cancel previous runs
- **Required status checks**: Add `merge_group` trigger to all 6
required CI workflows (front, server, shared, website, docker-compose,
sdk) with `changed-files-check` auto-skipped for merge_group events —
status check jobs auto-pass without re-running full CI
- **Build caching**: Add Nx build cache restore/save to E2E test job
with fallback to `main` branch cache for faster frontend and server
builds

## Test plan

- [ ] CI passes on this PR (verifies lint rule auto-fix works)
- [ ] Verify 4-core runner jobs complete within their 30-minute timeouts
- [ ] Verify merge queue status checks auto-pass (ci-front-status-check,
ci-server-status-check, etc.)
- [ ] Verify merge queue E2E concurrency cancels previous runs when a
new PR enters the queue
2026-03-06 13:33:02 +00:00
Charles Bochet 647c32ff3e Deprecate runtime theme objects in favor of CSS variables (#18402)
## Summary

- **Eliminate `ICON_SIZES` / `ICON_STROKES` constants**: all icon
dimensions are now resolved at runtime via
`resolveThemeVariableAsNumber(themeCssVariables.icon.size.X)`, ensuring
values always come from computed CSS variables
- **No more consumer imports from `twenty-ui/theme`**: moved
`ColorSchemeContext`, `ColorSchemeProvider`, `ThemeColor`,
`MAIN_COLOR_NAMES`, `getNextThemeColor`, `AnimationDuration` to
`twenty-ui/theme-constants`
- **Remove `ThemeContext` / `ThemeContextProvider` / `ThemeProvider` /
`ThemeType`**: replaced across ~300 files with `themeCssVariables` (for
CSS contexts) or `resolveThemeVariable` / `resolveThemeVariableAsNumber`
(for JS runtime values)
- **Simplify provider chain**: only `ColorSchemeProvider` remains — it
toggles `light`/`dark` class on `document.documentElement` and provides
`colorScheme` via React context
- **Fix pre-existing test failures**: `useIcons.test.ts`
(non-configurable ES module spy) and
`turnRecordFilterGroupIntoGqlOperationFilter.test.ts`
(`Omit<RecordFilter, 'id'>` type mismatch)

### Theme access pattern (before → after)

| Context | Before | After |
|---------|--------|-------|
| CSS (Linaria) | `${({ theme }) => theme.font.color.primary}` |
`${themeCssVariables.font.color.primary}` |
| JS runtime (icon size, animation) | `theme.icon.size.md` /
`ICON_SIZES.md` |
`resolveThemeVariableAsNumber(themeCssVariables.icon.size.md)` |
| Color scheme check | `theme.name === 'dark'` |
`useContext(ColorSchemeContext).colorScheme === 'dark'` |
2026-03-05 14:39:01 +01:00
Charles Bochet 802a5b0af6 chore(twenty-front): migrate auth, activities, AI, pages and small modules from Emotion to Linaria (PR 2-3/10) (#18328)
## Summary

- Migrate ~200 files from `@emotion/styled` / `@emotion/react` to
`@linaria/react` + `themeCssVariables`, continuing the zero-runtime
CSS-in-JS migration (PR 2-3 of the [migration
plan](docs/emotion-to-linaria-migration-plan.md))
- Modules covered: **auth** (19), **activities** (53), **ai** (30),
**pages** (70), **action-menu** (3), **object-metadata** (4),
**onboarding** (2), **workspace** (2), **file** (3), **error-handler**
(2), **front-components** (1), **geo-map** (1), **loading** (5),
**testing** (5), plus a `style` prop addition to `TableRow`
- Handles `styled(FunctionComponent)<Props>` incompatibility with
Linaria by using CSS custom properties via `style` + `var()` references

## Test plan

- [x] `npx nx lint:diff-with-main twenty-front` passes
- [x] `npx nx typecheck twenty-front` passes
- [ ] Visual spot-check of auth, onboarding, settings, activities, and
AI chat screens
- [ ] No remaining `@emotion/styled` or `@emotion/react` imports in
migrated files


Made with [Cursor](https://cursor.com)
2026-03-03 11:17:47 +01:00
Félix Malfait 4fe8e3d3b6 feat: add resizable navigation drawer and command menu panels (#16612)
## Summary

Adds Notion-style resizable panels for the navigation drawer (left
sidebar) and command menu (right panel).

## Behavior

- **Hover** at panel edge → resize cursor appears
- **Click** → collapse/close the panel
- **Drag** → resize the panel (5px movement threshold to distinguish
from click)

## Constraints

| Panel | Min | Max | Default | Collapse Threshold |
|-------|-----|-----|---------|-------------------|
| Navigation Drawer | 180px | 350px | 220px | 150px |
| Command Menu | 320px | 600px | 400px | 250px |

## Performance Optimizations

- **CSS variables** for smooth 60fps resize (no React re-renders during
drag)
- **Table resize observer disabled** during panel resize to prevent
expensive recalculations
- **React.memo wrapper** on page body to prevent unnecessary re-renders

## Architecture

- `useResizablePanel` hook following the same pattern as
`useResizeTableHeader`
- `ResizablePanelEdge` - resize handle positioned at panel edge
- `ResizablePanelGap` - resize handle in the gap between panels
- `cssVariableEffect` - Recoil effect to sync CSS variables with state

## Refactoring

- Split `recoil-effects.ts` into separate files in `utils/recoil/` (one
export per file)
- Persist panel widths to localStorage via existing `localStorageEffect`
2025-12-18 09:09:21 +01:00
Charles Bochet c166cff315 Fix linter performance front (#13527) 2025-07-31 15:03:32 +02:00
Paul Rastoin 4a4e65fe4a [REFACTOR] Twenty UI multi barrel (#11301)
# Introduction
closes https://github.com/twentyhq/core-team-issues/issues/591
Same than for `twenty-shared` made in
https://github.com/twentyhq/twenty/pull/11083.

## TODO
- [x] Manual migrate twenty-website twenty-ui imports

## What's next:
- Generate barrel and migration script factorization within own package
+ tests
- Refactoring using preconstruct ? TimeBox
- Lint circular dependencies
- Lint import from barrel and forbid them

### Preconstruct
We need custom rollup plugins addition, but preconstruct does not expose
its rollup configuration. It might be possible to handle this using the
babel overrides. But was a big tunnel.
We could give it a try afterwards ! ( allowing cjs interop and stuff
like that )
Stuck to vite lib app

Closed related PRs:
- https://github.com/twentyhq/twenty/pull/11294
- https://github.com/twentyhq/twenty/pull/11203
2025-04-03 09:47:55 +00:00
Jérémy M d4b038f24a fix: skeleton not using theme variables (#9712)
Fix linked to this discord issue:
https://discord.com/channels/1130383047699738754/1329509340494692444

---------

Co-authored-by: Weiko <corentin@twenty.com>
2025-01-21 09:19:06 +01:00
Félix Malfait 056cb7c66d Translation followup (#9735)
Address PR comments and more progress on translation
2025-01-19 13:29:19 +01:00
nitin a9deede9ba feat - Compact sidebar (#7414) 2024-10-15 14:02:28 +02:00
gitstart-app[bot] 8afa504b65 Add Skeleton loading for side panel (#7394)
This PR was created by [GitStart](https://gitstart.com/) to address the
requirements from this ticket:
[TWNTY-7112](https://clients.gitstart.com/twenty/5449/tickets/TWNTY-7112).

 --- 


### Description

- To test you can use `await new Promise(r => setTimeout(r, 5000));`
line 74 of \`openCreateActivityDrawer.ts\`
- We added a recoil state to define the loading status
- Design points to note:

1 - We did not change the chip component styles because would be
unrelated to the issue can you confirm if you still need this change?


![](https://assets-service.gitstart.com/28455/c5999ef1-a7fc-4c53-b425-d0588092ba90.png)

2- In Figma, the loading state shows the Chip rendering an initial name
before showing the loaded name, currently, we are rendering the correct
name while loading, the change that makes this possible is below


![](https://assets-service.gitstart.com/28455/a0e14045-9a14-4d19-9570-62781fba1aa4.png)

if we set it as null, the initial name would appear, but also the
previous data in the state would affect the UI, passing the
`activityObjectNameSingular` data allows us to clear the previous data,
and make the Chip instantly updated, let us know if this behavior is
fine, or if you still want an initial name to be rendered while is
loading.

3 - Currently, the loading state of the tabs does not affect the
selected tab (auto-defined by the component) should we change this logic
for all Tabs used in the app, or make this behavior optional by using
props?


![](https://assets-service.gitstart.com/28455/223c2e9f-3f4b-4107-b40d-f98a95266d5d.png)

### Demo


<https://www.loom.com/share/590df738a8ec41e6b64232bde237c01f?sid=7f8f4e40-ec82-4282-a43d-452a1cf27f4a>

### Refs

#7112

---------

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: gitstart-twenty <140154534+gitstart-twenty@users.noreply.github.com>
Co-authored-by: Marie Stoppa <marie.stoppa@essec.edu>
2024-10-04 11:41:05 +02:00
NitinPSingh 5404a8ba2d fixes #6499 alignment issue on workspace switcher (#6589)
fix #6499 

- fix the size of workspace switcher to 32px from 40px

![Screenshot 2024-08-09
140212](https://github.com/user-attachments/assets/425c9089-8969-4d59-82ef-10572cfa7027)

- fix alignment issues

![Screenshot 2024-08-09
142357](https://github.com/user-attachments/assets/2e3e76f2-8a81-48e9-86ff-691c11215583)

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
2024-08-16 15:31:04 +02:00
nitin 9618639744 Align Workspace Switcher with Breadcrumb by Adjusting Height (#6384)
@Bonapara 
Issue #6375 

This change makes sure the container height is 32px instead of 28px.
should the container inside it should also be 32px, please refer video
below for context


https://github.com/user-attachments/assets/fe97f0de-e1fd-4fda-a9a7-e9585469c530


Also skeleton height is 20px (refer video below), the black component in
the video is the skeleton for this particular component.
What should be skeletons height?


https://github.com/user-attachments/assets/0956c8d9-8e4e-4c20-bb71-7fb1e2cba4fd

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
2024-07-25 13:59:46 +02:00
Dhruv 45fe537055 Update Mobile Navigation bar css for better usage (#6209)
Closes #5744 
## Description
- Made Navigation Bar fixed in Mobile screens.
- Added `margin-bottom` so, last entries doesn't get hidden.

<img width="340" alt="Screenshot 2024-07-10 at 11 58 50 PM"
src="https://github.com/twentyhq/twenty/assets/91935072/a888fe06-77bf-4368-ac6d-a5d41d591bd0">
<img width="290" alt="Screenshot 2024-07-10 at 11 59 06 PM"
src="https://github.com/twentyhq/twenty/assets/91935072/c1d0c6ed-9178-4132-8b49-7ed39caf3d10">

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
2024-07-11 08:15:49 +02:00
spiderman3000 24941c66b7 [Improvement] LeftPanel skeleton loader (#5705)
This change solves #5664 
This modifies the left-side panel skeleton loader in accordance with the
default view.

![old-loading-ui](https://github.com/twentyhq/twenty/assets/171416711/83fe8a06-6f49-4581-bb84-00d2a0291f37)

![new-loading-ui](https://github.com/twentyhq/twenty/assets/171416711/4ba45fc0-8932-4ee9-b558-9f810d7891bd)

![default-loaded-view](https://github.com/twentyhq/twenty/assets/171416711/40c301d2-1015-4a2c-9458-0d2fb9d7de75)
2024-06-03 14:49:57 +02:00
gitstart-twenty 10abd7f0ad User & Metadata Loading (#5347)
### Description
User & Metadata Loading

### Refs
#4456

### Demo


https://github.com/twentyhq/twenty/assets/140154534/4c20fca6-feaf-45f6-ac50-6532d2ebf050


Fixes #4456

---------

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com>
Co-authored-by: Charles Bochet <charles@twenty.com>
2024-05-27 10:38:37 +02:00