admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

322 compact command chips dropdown (#10456)

Browse Source 
Closes https://github.com/twentyhq/core-team-issues/issues/322



https://github.com/user-attachments/assets/d4806f04-e217-40f5-9707-93334bbd49ea

---------

Co-authored-by: Devessier <baptiste@devessier.fr>
This commit is contained in:
Raphaël Bosi
2025-02-25 16:42:38 +01:00
committed by GitHub
parent a1c7e3279c
commit 9997cf5a4e
9 changed files with 139 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
packages/twenty-front/src/modules/command-menu/hooks/useCommandMenu.ts
View File

@ -7,6 +7,7 @@ import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousH
import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope';
import { IconDotsVertical, IconSearch, useIcons } from 'twenty-ui';
import { COMMAND_MENU_CONTEXT_CHIP_GROUPS_DROPDOWN_ID } from '@/command-menu/constants/CommandMenuContextChipGroupsDropdownId';
import { useCopyContextStoreStates } from '@/command-menu/hooks/useCopyContextStoreAndActionMenuStates';
import { useResetContextStoreStates } from '@/command-menu/hooks/useResetContextStoreStates';
import {
@ -25,6 +26,7 @@ import { mainContextStoreComponentInstanceIdState } from '@/context-store/states
import { ContextStoreViewType } from '@/context-store/types/ContextStoreViewType';
import { viewableRecordIdState } from '@/object-record/record-right-drawer/states/viewableRecordIdState';
import { viewableRecordNameSingularState } from '@/object-record/record-right-drawer/states/viewableRecordNameSingularState';
import { useDropdownV2 } from '@/ui/layout/dropdown/hooks/useDropdownV2';
import { emitRightDrawerCloseEvent } from '@/ui/layout/right-drawer/utils/emitRightDrawerCloseEvent';
import { t } from '@lingui/core/macro';
import { useCallback } from 'react';
@ -46,6 +48,8 @@ export const useCommandMenu = () => {
const { copyContextStoreStates } = useCopyContextStoreStates();
const { resetContextStoreStates } = useResetContextStoreStates();
const { closeDropdown } = useDropdownV2();
const openCommandMenu = useRecoilCallback(
({ snapshot, set }) =>
() => {
@ -53,6 +57,8 @@ export const useCommandMenu = () => {
.getLoadable(isCommandMenuOpenedState)
.getValue();
setHotkeyScopeAndMemorizePreviousScope(AppHotkeyScope.CommandMenuOpen);
if (isCommandMenuOpened) {
return;
}
@ -63,7 +69,6 @@ export const useCommandMenu = () => {
});
set(isCommandMenuOpenedState, true);
setHotkeyScopeAndMemorizePreviousScope(AppHotkeyScope.CommandMenuOpen);
set(hasUserSelectedCommandState, false);
},
[
@ -77,8 +82,9 @@ export const useCommandMenu = () => {
({ set }) =>
() => {
set(isCommandMenuOpenedState, false);
closeDropdown(COMMAND_MENU_CONTEXT_CHIP_GROUPS_DROPDOWN_ID);
},
[],
[closeDropdown],
);
const onCommandMenuCloseAnimationComplete = useRecoilCallback(
@ -115,6 +121,7 @@ export const useCommandMenu = () => {
}: CommandMenuNavigationStackItem & {
resetNavigationStack?: boolean;
}) => {
closeDropdown(COMMAND_MENU_CONTEXT_CHIP_GROUPS_DROPDOWN_ID);
set(commandMenuPageState, page);
set(commandMenuPageInfoState, {
title: pageTitle,
@ -136,7 +143,7 @@ export const useCommandMenu = () => {
openCommandMenu();
};
},
[openCommandMenu],
[closeDropdown, openCommandMenu],
);
const openRootCommandMenu = useCallback(() => {
@ -144,6 +151,7 @@ export const useCommandMenu = () => {
page: CommandMenuPages.Root,
pageTitle: 'Command Menu',
pageIcon: IconDotsVertical,
resetNavigationStack: true,
});
}, [navigateCommandMenu]);