fix missing trash x off icon (#12699)

## Context
Icon does not exist in tabler-icon it seems, had to create a new one
manually.

Also added a reload current user when roles are updated to update the
state accordingly

<img width="419" alt="Screenshot 2025-06-18 at 13 06 23"
src="https://github.com/user-attachments/assets/2667883e-c392-4f68-bc04-7471b9bdd6fd"
/>

packages/twenty-front/src/modules/settings/roles/role-permissions/objects-permissions/constants/settingsRoleObjectPermissionIconConfig.ts

@@ -7,6 +7,7 @@ import {
   IconTrash,
   IconTrashOff,
   IconTrashX,
+  IconTrashXOff,
 } from 'twenty-ui/display';
 
 type SettingsRoleObjectPermissionIconConfig = {
@@ -38,6 +39,6 @@ export const SETTINGS_ROLE_OBJECT_PERMISSION_ICON_CONFIG: Record<
   },
   canDestroyObjectRecords: {
     Icon: IconTrashX,
-    IconForbidden: IconTrashX,
+    IconForbidden: IconTrashXOff,
   },
 };

packages/twenty-front/src/modules/settings/roles/role/components/SettingsRole.tsx

@@ -1,3 +1,4 @@
+import { useAuth } from '@/auth/hooks/useAuth';
 import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons/SaveAndCancelButtons';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { GET_ROLES } from '@/settings/roles/graphql/queries/getRolesQuery';
@@ -82,6 +83,8 @@ export const SettingsRole = ({ roleId, isCreateMode }: SettingsRoleProps) => {
     settingsPersistedRoleFamilyState(roleId),
   );
 
+  const { loadCurrentUser } = useAuth();
+
   const { enqueueSnackBar } = useSnackBar();
 
   if (!isDefined(settingsRolesIsLoading)) {
@@ -268,6 +271,8 @@ export const SettingsRole = ({ roleId, isCreateMode }: SettingsRoleProps) => {
         });
       }
     }
+
+    await loadCurrentUser();
   };
 
   return (

packages/twenty-front/src/modules/settings/roles/role/components/SettingsRoleCreateEffect.tsx

@@ -32,7 +32,7 @@ export const SettingsRoleCreateEffect = ({
 
     const newRole = {
       id: roleId,
-      label: t`Role name`,
+      label: t`Untitled role`,
       description: '',
       icon: 'IconUser',
       canUpdateAllSettings: true,

packages/twenty-front/src/modules/settings/roles/role/components/SettingsRoleLabelContainer.tsx

@@ -3,6 +3,7 @@ import { useRecoilState } from 'recoil';
 import { settingsDraftRoleFamilyState } from '@/settings/roles/states/settingsDraftRoleFamilyState';
 import { TitleInput } from '@/ui/input/components/TitleInput';
 import styled from '@emotion/styled';
+import { t } from '@lingui/core/macro';
 
 const ROLE_LABEL_EDIT_HOTKEY_SCOPE = 'role-label-edit';
 
@@ -42,7 +43,7 @@ export const SettingsRoleLabelContainer = ({
         sizeVariant="md"
         value={settingsDraftRole.label}
         onChange={handleChange}
-        placeholder="Role name"
+        placeholder={t`Role name`}
         hotkeyScope={ROLE_LABEL_EDIT_HOTKEY_SCOPE}
       />
     </StyledHeaderTitle>

packages/twenty-ui/src/assets/icons/trash-x-off.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-trash-x ">
+  <path d="M3 3l18 18"></path>
+  <path d="M4 7h16"></path>
+  <path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"></path>
+  <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path>
+  <path d="M10 12l4 4m0 -4l-4 4"></path>
+</svg>

packages/twenty-ui/src/display/icon/components/IconTrashXOff.tsx

@@ -0,0 +1,14 @@
+import { useTheme } from '@emotion/react';
+
+import IconTrashXOffRaw from '@assets/icons/trash-x-off.svg?react';
+import { IconComponentProps } from '@ui/display/icon/types/IconComponent';
+
+type IconTrashXOffProps = Pick<IconComponentProps, 'size' | 'stroke'>;
+
+export const IconTrashXOff = (props: IconTrashXOffProps) => {
+  const theme = useTheme();
+  const size = props.size ?? theme.icon.size.lg;
+  const stroke = props.stroke ?? theme.icon.stroke.md;
+
+  return <IconTrashXOffRaw height={size} width={size} strokeWidth={stroke} />;
+};

packages/twenty-ui/src/display/index.ts

@@ -35,6 +35,7 @@ export { IconMicrosoft } from './icon/components/IconMicrosoft';
 export { IconMicrosoftCalendar } from './icon/components/IconMicrosoftCalendar';
 export { IconMicrosoftOutlook } from './icon/components/IconMicrosoftOutlook';
 export { IconRelationManyToOne } from './icon/components/IconRelationManyToOne';
+export { IconTrashXOff } from './icon/components/IconTrashXOff';
 export { IconTwentyStar } from './icon/components/IconTwentyStar';
 export { IconTwentyStarFilled } from './icon/components/IconTwentyStarFilled';
 export { IllustrationIconArray } from './icon/components/IllustrationIconArray';