Object icon visual parity (#19374)

## Summary

Aligns **object metadata** icons with the **tinted tile** look
everywhere we show a workspace object, and **retires** the
navigation-only `NavigationMenuItemStyleIcon` wrapper in favor of
**shared** UI primitives under `@/ui/display` and `@/object-metadata`.

## What changed

### Global tinted icon building blocks (`@/ui/display`)

- **`TintedIconTile`** / **`StyledTintedIconTileContainer`** support
optional **`size`** and **`stroke`**, and grow the tile when **`size`**
is set so layouts match previous `theme.icon` usage.
- Shared helpers and constants for theme color parsing and tinted
backgrounds/borders/icon color (e.g.
**`getTintedIconTileStyleFromColor`**, **`parseThemeColor`**,
**`getColorFromTheme`**, related constants).

### Object metadata icon (`@/object-metadata`)

- **`ObjectMetadataIcon`** composes **`TintedIconTile`** with
**`getObjectColorWithFallback`**, forwards optional **`size`** /
**`stroke`** for **visual parity** with old `getIcon` + explicit sizing.
- **`getSelectOptionIconFromObjectMetadataItem`** returns an
**`IconComponent`** for selects/menus that expect a component, not a
React node.

### Navigation module cleanup

- **Removed** **`NavigationMenuItemStyleIcon`**; call sites use
**`ObjectMetadataIcon`**, **`TintedIconTile`**, and/or the shared
**`getTintedIconTileStyleFromColor`** pipeline so the same treatment is
**not** tied to the navigation package.
- **`NavigationMenuItemIcon`**, view/link overlays, DnD handle, and
sidebar editor flows updated to use the shared pattern where they render
object (or tinted) icons.

### Product surfaces updated (non-exhaustive)

- **Settings:** role object picker/rows, data model
tables/graph/overview, object preview summary, webhooks entity list,
morph relation multiselect.
- **Workflows:** create/update/delete/upsert/find records, triggers,
filters, variables dropdowns, AI agent object rows, object dropdowns.
- **Shell:** side panel object filter / data sources / folder chrome
where object icons appear.
- **Records:** index header icon, show breadcrumb styling.
- **Activity:** timeline event icon when linked object metadata applies.
- **`NavigationDrawerItem`:** tinted branch aligned with shared
**`TintedIconTile`** behavior.

---------

Co-authored-by: Etienne <45695613+etiennejouan@users.noreply.github.com>

packages/twenty-front/src/modules/object-metadata/components/ObjectMetadataIcon.tsx

@@ -0,0 +1,32 @@
+import { type EnrichedObjectMetadataItem } from '@/object-metadata/types/EnrichedObjectMetadataItem';
+import { getObjectColorWithFallback } from '@/object-metadata/utils/getObjectColorWithFallback';
+import { TintedIconTile, useIcons } from 'twenty-ui/display';
+
+export type ObjectMetadataIconInput = Pick<
+  EnrichedObjectMetadataItem,
+  'icon' | 'nameSingular' | 'color' | 'isSystem'
+>;
+
+export type ObjectMetadataIconProps = {
+  objectMetadataItem?: ObjectMetadataIconInput | null;
+  size?: number;
+  stroke?: number;
+};
+
+export const ObjectMetadataIcon = ({
+  objectMetadataItem,
+  size,
+  stroke,
+}: ObjectMetadataIconProps) => {
+  const { getIcon } = useIcons();
+  const Icon = getIcon(objectMetadataItem?.icon);
+
+  return (
+    <TintedIconTile
+      Icon={Icon}
+      color={getObjectColorWithFallback(objectMetadataItem)}
+      size={size}
+      stroke={stroke}
+    />
+  );
+};

packages/twenty-front/src/modules/object-metadata/hooks/useObjectMetadataSelectHelpers.ts

@@ -0,0 +1,23 @@
+import { type IconComponent, useIcons } from 'twenty-ui/display';
+import { type ThemeColor } from 'twenty-ui/theme';
+
+import { type EnrichedObjectMetadataItem } from '@/object-metadata/types/EnrichedObjectMetadataItem';
+import { getObjectColorWithFallback } from '@/object-metadata/utils/getObjectColorWithFallback';
+
+type ObjectMetadataItemForSelectIcon = Pick<
+  EnrichedObjectMetadataItem,
+  'icon' | 'nameSingular' | 'color' | 'isSystem'
+>;
+
+export const useObjectMetadataSelectHelpers = () => {
+  const { getIcon } = useIcons();
+
+  const getSelectIconPropsFromObjectMetadataItem = (
+    objectMetadataItem: ObjectMetadataItemForSelectIcon,
+  ): { Icon: IconComponent; iconThemeColor: ThemeColor } => ({
+    Icon: getIcon(objectMetadataItem.icon),
+    iconThemeColor: getObjectColorWithFallback(objectMetadataItem),
+  });
+
+  return { getSelectIconPropsFromObjectMetadataItem };
+};

packages/twenty-front/src/modules/object-metadata/utils/getObjectColorWithFallback.ts

@@ -2,6 +2,7 @@ import { isNonEmptyString } from '@sniptt/guards';
 
 import { type EnrichedObjectMetadataItem } from '@/object-metadata/types/EnrichedObjectMetadataItem';
 import { CoreObjectNameSingular } from 'twenty-shared/types';
+import { isDefined } from 'twenty-shared/utils';
 import { type ThemeColor, MAIN_COLOR_NAMES } from 'twenty-ui/theme';
 
 const SYSTEM_OBJECT_COLOR: ThemeColor = 'gray';
@@ -37,11 +38,15 @@ const getColorForCustomObject = (seed: string): ThemeColor => {
 };
 
 export const getObjectColorWithFallback = (
-  objectMetadataItem: Pick<
-    EnrichedObjectMetadataItem,
-    'nameSingular' | 'color' | 'isSystem'
-  >,
+  objectMetadataItem:
+    | Pick<EnrichedObjectMetadataItem, 'nameSingular' | 'color' | 'isSystem'>
+    | null
+    | undefined,
 ): ThemeColor => {
+  if (!isDefined(objectMetadataItem)) {
+    return SYSTEM_OBJECT_COLOR;
+  }
+
   if (objectMetadataItem.isSystem) {
     return SYSTEM_OBJECT_COLOR;
   }