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