feat: add color property to ObjectMetadata for object icon customization (#18672)

## Summary

- Adds a `color` column to `ObjectMetadataEntity` with full GraphQL
support so object icon colors are persisted at the metadata level
- Adds a `type` column to `NavigationMenuItemEntity` (enum: `OBJECT`,
`VIEW`, `FOLDER`, `LINK`, `RECORD`) replacing field-based type inference
- Updates frontend to read object colors from `objectMetadata.color`
(falling back to standard defaults) in the sidebar nav, record index
header, and record show breadcrumb
- Simplifies `NavigationMenuItemIcon` color resolution via
`getEffectiveNavigationMenuItemColor` util

## Color rules

| Item type | Color source | Editable in sidebar? |
|-----------|-------------|---------------------|
| **Object** | `objectMetadata.color` | Yes — persisted to
`objectMetadata.color` on Save |
| **Folder** | `navigationMenuItem.color` | Yes |
| **Link** | Fixed default (`DEFAULT_NAVIGATION_MENU_ITEM_COLOR_LINK`) |
No |
| **View** | `objectMetadata.color` (from the parent object) | No |
| **Record** | None | No |

- **Object** items represent the whole object (e.g. "Companies") and
point to the INDEX view. Changing their color updates
`objectMetadata.color` via `useSaveObjectMetadataColorsFromDraft`.
- **View** items represent specific non-INDEX views. Their color comes
from the parent object's metadata (read-only).
- Only **folders** store their color on `navigationMenuItem.color` —
enforced by `hasNavigationMenuItemOwnColor` util.
- `getEffectiveNavigationMenuItemColor` returns `objectColor` for both
OBJECT and VIEW items, folder's own color for folders, and the fixed
default for links.

## NavigationMenuItemType enum

- Shared enum created in `twenty-shared` with values: `OBJECT`, `VIEW`,
`FOLDER`, `LINK`, `RECORD`
- Registered as a GraphQL enum on the backend
- Replaces string literals across entity, DTOs, input, converters, and
frontend hooks
- Migration backfills existing rows: INDEX views → `OBJECT`, non-INDEX
views → `VIEW`, based on join with the view table

## Design decisions

- **OBJECT vs VIEW distinction**: Items pointing to INDEX views are
typed as `OBJECT` (represent the whole object, color editable). Items
pointing to non-INDEX views are typed as `VIEW` (specific view, color
read-only from parent object).
- **Dual color storage**: `navigationMenuItem.color` is preserved for
folders only. Objects use `objectMetadata.color` as their source of
truth.
- **Type discriminator**: The `type` column replaces field-based
inference (checking `viewId`, `link`, `targetRecordId` presence) with an
explicit enum, simplifying `isNavigationMenuItemLink` /
`isNavigationMenuItemFolder` to simple `item.type ===` checks.
- **No settings page color picker**: Object color editing is done from
the sidebar edit panel, not the data model settings page.

## Test plan

- [ ] Verify objects display their default standard colors in the
sidebar
- [ ] Verify object color editing works in the sidebar edit panel
(persists to objectMetadata.color)
- [ ] Verify folder color editing works in the sidebar edit panel
- [ ] Verify views, links, and records do NOT show a color picker in the
sidebar edit panel
- [ ] Run `npx nx typecheck twenty-front` and `npx nx typecheck
twenty-server`
- [ ] Verify the database migrations add `color` to `objectMetadata` and
`type` to `navigationMenuItem`


Made with [Cursor](https://cursor.com)

packages/twenty-sdk/src/cli/__tests__/apps/postcard-app/__integration__/app-dev/expected-manifest.ts

@@ -3,6 +3,7 @@ import type { Manifest } from 'twenty-shared/application';
 import { PermissionFlagType } from 'twenty-shared/constants';
 import {
   FieldMetadataType,
+  NavigationMenuItemType,
   RelationOnDeleteAction,
   RelationType,
   ViewType,
@@ -1569,19 +1570,22 @@ export const EXPECTED_MANIFEST: Manifest = {
   ],
   navigationMenuItems: [
     {
+      type: NavigationMenuItemType.OBJECT,
       position: 2,
       universalIdentifier: 'c1a2b3c4-0003-4a7b-8c9d-0e1f2a3b4c5d',
-      viewUniversalIdentifier: 'b1a2b3c4-0003-4a7b-8c9d-0e1f2a3b4c5d',
+      targetObjectUniversalIdentifier: 'e1a2b3c4-5e6f-4a7b-8c9d-0e1f2a3b4c5e',
     },
     {
+      type: NavigationMenuItemType.OBJECT,
       position: 0,
       universalIdentifier: 'c1a2b3c4-0001-4a7b-8c9d-0e1f2a3b4c5d',
-      viewUniversalIdentifier: 'b1a2b3c4-0001-4a7b-8c9d-0e1f2a3b4c5d',
+      targetObjectUniversalIdentifier: '54b589ca-eeed-4950-a176-358418b85c05',
     },
     {
+      type: NavigationMenuItemType.OBJECT,
       position: 1,
       universalIdentifier: 'c1a2b3c4-0002-4a7b-8c9d-0e1f2a3b4c5d',
-      viewUniversalIdentifier: 'b1a2b3c4-0002-4a7b-8c9d-0e1f2a3b4c5d',
+      targetObjectUniversalIdentifier: 'd1a2b3c4-5e6f-4a7b-8c9d-0e1f2a3b4c5d',
     },
   ],
   logicFunctions: [

packages/twenty-sdk/src/cli/commands/entity/entity-add.ts

@@ -260,7 +260,8 @@ export class EntityAddCommand {
 
     const navFile = getNavigationMenuItemBaseFile({
       name: objectName,
-      viewUniversalIdentifier,
+      type: 'OBJECT',
+      targetObjectUniversalIdentifier: this.lastObjectUniversalIdentifier,
     });
 
     const navFolderPath = customPath

packages/twenty-sdk/src/cli/utilities/entity/__tests__/get-navigation-menu-item-base-file.spec.ts

@@ -19,25 +19,35 @@ describe('getNavigationMenuItemBaseFile', () => {
     expect(result).toContain('position: 0');
   });
 
-  it('should include viewUniversalIdentifier when provided', () => {
+  it('should include viewUniversalIdentifier when type is VIEW', () => {
     const result = getNavigationMenuItemBaseFile({
       name: 'linked-item',
+      type: 'VIEW',
       viewUniversalIdentifier: 'view-uuid-123',
     });
 
+    expect(result).toContain("type: 'VIEW'");
     expect(result).toContain("viewUniversalIdentifier: 'view-uuid-123'");
-    expect(result).not.toContain('// Link to a view:');
   });
 
-  it('should include commented link options when viewUniversalIdentifier is not provided', () => {
+  it('should default to VIEW type when no type is provided', () => {
     const result = getNavigationMenuItemBaseFile({
       name: 'unlinked-item',
     });
 
-    expect(result).toContain('// Link to a view:');
+    expect(result).toContain("type: 'VIEW'");
     expect(result).toContain('// viewUniversalIdentifier:');
-    expect(result).toContain('// targetObjectUniversalIdentifier:');
-    expect(result).toContain('// link:');
+  });
+
+  it('should include targetObjectUniversalIdentifier when type is OBJECT', () => {
+    const result = getNavigationMenuItemBaseFile({
+      name: 'object-item',
+      type: 'OBJECT',
+      targetObjectUniversalIdentifier: 'obj-uuid-123',
+    });
+
+    expect(result).toContain("type: 'OBJECT'");
+    expect(result).toContain("targetObjectUniversalIdentifier: 'obj-uuid-123'");
   });
 
   it('should generate unique UUID when not provided', () => {

packages/twenty-sdk/src/cli/utilities/entity/entity-navigation-menu-item-template.ts

@@ -4,22 +4,35 @@ import { v4 } from 'uuid';
 export const getNavigationMenuItemBaseFile = ({
   name,
   universalIdentifier = v4(),
+  type,
   viewUniversalIdentifier,
+  targetObjectUniversalIdentifier,
 }: {
   name: string;
   universalIdentifier?: string;
+  type?: 'OBJECT' | 'VIEW' | 'LINK' | 'FOLDER';
   viewUniversalIdentifier?: string;
+  targetObjectUniversalIdentifier?: string;
 }) => {
   const kebabCaseName = kebabCase(name);
 
-  const linkConfig = viewUniversalIdentifier
-    ? `  viewUniversalIdentifier: '${viewUniversalIdentifier}',`
-    : `  // Link to a view:
-  // viewUniversalIdentifier: '...',
-  // Or link to an object:
-  // targetObjectUniversalIdentifier: '...',
-  // Or link to an external URL:
-  // link: 'https://example.com',`;
+  let typeAndConfig: string;
+
+  if (type === 'OBJECT' && targetObjectUniversalIdentifier) {
+    typeAndConfig = `  type: 'OBJECT',
+  targetObjectUniversalIdentifier: '${targetObjectUniversalIdentifier}',`;
+  } else if (type === 'VIEW' && viewUniversalIdentifier) {
+    typeAndConfig = `  type: 'VIEW',
+  viewUniversalIdentifier: '${viewUniversalIdentifier}',`;
+  } else if (type === 'LINK') {
+    typeAndConfig = `  type: 'LINK',
+  link: 'https://example.com',`;
+  } else if (type === 'FOLDER') {
+    typeAndConfig = `  type: 'FOLDER',`;
+  } else {
+    typeAndConfig = `  type: 'VIEW',
+  // viewUniversalIdentifier: '...',`;
+  }
 
   return `import { defineNavigationMenuItem } from 'twenty-sdk';
 
@@ -28,7 +41,7 @@ export default defineNavigationMenuItem({
   name: '${kebabCaseName}',
   icon: 'IconList',
   position: 0,
-${linkConfig}
+${typeAndConfig}
 });
 `;
 };