Files
twenty_crm/packages/twenty-front/src/modules/command-menu/components/ResetContextToSelectionCommandButton.tsx
Raphaël Bosi 04bc42aa47 Improve command menu chip design (#9915)
Before:

<img width="236" alt="Capture d’écran 2025-01-29 à 17 07 13"
src="https://github.com/user-attachments/assets/edc277f3-3e50-405a-9981-3ac63e270f3f"
/>
<img width="259" alt="Capture d’écran 2025-01-29 à 17 07 23"
src="https://github.com/user-attachments/assets/81863c50-5b96-4cbf-bc15-ab437d839fa1"
/>
<img width="224" alt="Capture d’écran 2025-01-29 à 17 07 41"
src="https://github.com/user-attachments/assets/c0783544-6928-4b05-bf86-66d37ddca5e5"
/>

After:

<img width="230" alt="Capture d’écran 2025-01-29 à 17 03 49"
src="https://github.com/user-attachments/assets/c47be446-32fa-40d1-af25-207ed91c0ea2"
/>
<img width="254" alt="Capture d’écran 2025-01-29 à 17 04 15"
src="https://github.com/user-attachments/assets/99b9ab30-c77d-4392-8ef6-2a1a5fb00047"
/>
<img width="218" alt="Capture d’écran 2025-01-29 à 17 04 37"
src="https://github.com/user-attachments/assets/6e214a42-438d-495f-9855-fd5397fcc6d3"
/>
2025-01-29 16:37:59 +00:00

56 lines
2.1 KiB
TypeScript

import { CommandMenuContextRecordChip } from '@/command-menu/components/CommandMenuContextRecordChip';
import { CommandMenuItem } from '@/command-menu/components/CommandMenuItem';
import { useResetPreviousCommandMenuContext } from '@/command-menu/hooks/useResetPreviousCommandMenuContext';
import { contextStoreCurrentObjectMetadataIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataIdComponentState';
import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { t } from '@lingui/core/macro';
import { useRecoilValue } from 'recoil';
import { IconArrowBackUp, isDefined } from 'twenty-ui';
export const ResetContextToSelectionCommandButton = () => {
const contextStoreTargetedRecordsRule = useRecoilComponentValueV2(
contextStoreTargetedRecordsRuleComponentState,
'command-menu-previous',
);
const contextStoreCurrentObjectMetadataId = useRecoilComponentValueV2(
contextStoreCurrentObjectMetadataIdComponentState,
'command-menu-previous',
);
const objectMetadataItems = useRecoilValue(objectMetadataItemsState);
const objectMetadataItem = objectMetadataItems.find(
(objectMetadataItem) =>
objectMetadataItem.id === contextStoreCurrentObjectMetadataId,
);
const { resetPreviousCommandMenuContext } =
useResetPreviousCommandMenuContext();
if (
!isDefined(objectMetadataItem) ||
(contextStoreTargetedRecordsRule.mode === 'selection' &&
contextStoreTargetedRecordsRule.selectedRecordIds.length === 0)
) {
return null;
}
return (
<CommandMenuItem
id="reset-context-to-selection"
Icon={IconArrowBackUp}
label={t`Reset to`}
RightComponent={
<CommandMenuContextRecordChip
objectMetadataItemId={objectMetadataItem.id}
instanceId="command-menu-previous"
/>
}
onClick={resetPreviousCommandMenuContext}
/>
);
};