Add search records actions to the command menu (#9892)

Closes https://github.com/twentyhq/core-team-issues/issues/253 and
https://github.com/twentyhq/core-team-issues/issues/256.

- Created `CommandMenuList`, a component used at the root level of the
command menu and inside the search page of the command menu
- Refactored record agnostic actions
- Added shortcuts to the action menu entries (`/` key for the search)
and updated the design of the shortcuts
- Reordered actions at the root level of the command menu


https://github.com/user-attachments/assets/e1339cc4-ef5d-45c5-a159-6817a54b92e9
This commit is contained in:
Raphaël Bosi
2025-01-29 18:23:40 +01:00
committed by GitHub
parent 03f3ccd060
commit ce296fae4f
52 changed files with 1539 additions and 1361 deletions

View File

@ -1,6 +1,6 @@
import { useLocation } from 'react-router-dom';
import { useRecoilState, useSetRecoilState } from 'recoil';
import { IconSearch, IconSettings, getOsControlSymbol } from 'twenty-ui';
import { IconSearch, IconSettings } from 'twenty-ui';
import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
import { CurrentWorkspaceMemberFavoritesFolders } from '@/favorites/components/CurrentWorkspaceMemberFavoritesFolders';
@ -28,7 +28,6 @@ const StyledInnerContainer = styled.div`
export const MainNavigationDrawerItems = () => {
const isMobile = useIsMobile();
const { toggleCommandMenu } = useCommandMenu();
const location = useLocation();
const setNavigationMemorizedUrl = useSetRecoilState(
navigationMemorizedUrlState,
@ -42,6 +41,8 @@ export const MainNavigationDrawerItems = () => {
const { t } = useLingui();
const { openRecordsSearchPage } = useCommandMenu();
return (
<>
{!isMobile && (
@ -49,8 +50,8 @@ export const MainNavigationDrawerItems = () => {
<NavigationDrawerItem
label={t`Search`}
Icon={IconSearch}
onClick={toggleCommandMenu}
keyboard={[getOsControlSymbol(), 'K']}
onClick={openRecordsSearchPage}
keyboard={['/']}
/>
<NavigationDrawerItem
label={t`Settings`}