WeikoandGitHub
3bbaff801a
Add Twenty app settings custom app (#18273)
## Context
This PR adds the ability to define a front-component as a custom tab for
the application settings, allowing app creators to inject some
logic/rendering the their app settings.
## Example
```typescript
// packages/twenty-apps/my-test-app/src/front-components/settings-custom-tab.tsx
import { defineFrontComponent } from 'twenty-sdk';
export const SETTINGS_CUSTOM_TAB_UNIVERSAL_IDENTIFIER =
'a42a88a8-21ce-4d22-bc44-d5146da64726';
export const SettingsCustomTab = () => {
return (
<div style={{ padding: '20px', fontFamily: 'sans-serif' }}>
<h2>My Test App Settings</h2>
<p>This is a custom settings tab provided by My Test App.</p>
<p>Application creators can customize this component freely.</p>
</div>
);
};
export default defineFrontComponent({
universalIdentifier: SETTINGS_CUSTOM_TAB_UNIVERSAL_IDENTIFIER,
name: 'settings-custom-tab',
description: 'Custom settings tab for the application',
component: SettingsCustomTab,
});
```
```typescript
// packages/twenty-apps/my-test-app/src/application-config.ts
export default defineApplication({
universalIdentifier: '52870ce6-e584-4bd4-bc1a-6c63c508982e',
displayName: 'My test app',
description: '',
defaultRoleUniversalIdentifier: DEFAULT_ROLE_UNIVERSAL_IDENTIFIER,
settingsCustomTabFrontComponentUniversalIdentifier:
SETTINGS_CUSTOM_TAB_UNIVERSAL_IDENTIFIER,
});
```
<img width="786" height="757" alt="Screenshot 2026-02-26 at 14 54 09"
src="https://github.com/user-attachments/assets/fcba70db-35da-48f1-bd65-359e894a691d"
/>
2026-02-26 16:26:49 +01:00
..
2026-02-03 16:16:02 +00:00
2026-02-03 16:16:02 +00:00
2026-02-24 10:14:24 +01:00
2026-02-24 12:51:46 +01:00
2026-02-26 16:26:49 +01:00
2026-02-11 10:05:24 +00:00
2026-02-11 10:05:24 +00:00
2026-02-18 11:26:20 +00:00
2026-02-26 13:44:54 +01:00
2026-02-23 12:13:19 +01:00
2026-02-04 13:30:55 +01:00
2026-02-12 11:40:49 +01:00
2026-02-11 10:05:24 +00:00
2026-02-10 09:16:51 +00:00
2026-02-24 12:51:46 +01:00
2026-02-09 08:23:57 +00:00
2026-02-11 10:05:24 +00:00
2026-02-11 10:05:24 +00:00
2026-01-27 15:59:37 +00:00
2026-02-03 16:16:02 +00:00
2026-02-11 10:05:24 +00:00
2026-02-20 11:46:03 +01:00
2026-02-20 17:11:59 +00:00
2026-02-18 21:41:01 +01:00
2026-02-11 10:05:24 +00:00
2026-02-02 11:16:28 +00:00
2026-02-18 14:12:47 +00:00
2026-02-09 19:09:13 +01:00
2026-02-24 18:10:28 +01:00
2026-02-18 22:15:10 +01:00
2026-02-11 10:05:24 +00:00
2026-02-18 21:41:01 +01:00
2026-02-11 10:05:24 +00:00
2026-02-24 19:37:29 +01:00
2026-02-03 17:16:54 +00:00
2026-02-09 19:09:13 +01:00
2026-02-18 01:05:56 +01:00
2026-02-09 19:09:13 +01:00
2026-02-11 10:05:24 +00:00
2026-02-11 15:32:41 +00:00
2026-02-11 10:05:24 +00:00
2026-02-11 10:05:24 +00:00
2026-02-17 13:57:26 +00:00
2026-01-27 17:24:51 +00:00
2026-02-11 09:08:59 +00:00
2026-02-20 14:08:20 +01:00
2026-01-27 15:59:37 +00:00
2026-02-18 22:15:10 +01:00
2026-02-09 15:29:32 +01:00
2026-02-11 10:05:24 +00:00
2026-02-10 09:16:51 +00:00
2026-02-18 14:12:47 +00:00
2026-02-03 16:16:02 +00:00
2026-02-25 16:49:26 +01:00
2026-02-24 10:14:24 +01:00
2026-02-20 14:41:31 +01:00
2026-02-18 21:41:01 +01:00
2026-02-17 15:42:50 +00:00
2026-02-11 10:05:24 +00:00
2026-02-24 12:51:46 +01:00
2026-02-11 10:05:24 +00:00
2026-02-12 17:14:25 +00:00