diff --git a/.changeset/five-suns-tickle.md b/.changeset/five-suns-tickle.md new file mode 100644 index 000000000000..740fc3640604 --- /dev/null +++ b/.changeset/five-suns-tickle.md @@ -0,0 +1,6 @@ +--- +'@rocket.chat/i18n': minor +'@rocket.chat/meteor': minor +--- + +Adds `Recent` button on the new sidebar Search section to replicate the previous behavior of focusing the search bar - show recent chats. diff --git a/apps/meteor/client/sidebarv2/header/SearchList.tsx b/apps/meteor/client/sidebarv2/header/SearchList.tsx index b132af80f674..066b82ce7681 100644 --- a/apps/meteor/client/sidebarv2/header/SearchList.tsx +++ b/apps/meteor/client/sidebarv2/header/SearchList.tsx @@ -1,4 +1,4 @@ -import { Box } from '@rocket.chat/fuselage'; +import { Box, SidebarV2GroupTitle } from '@rocket.chat/fuselage'; import { useTranslation, useUserPreference, useSetting } from '@rocket.chat/ui-contexts'; import type { MouseEventHandler, ReactElement } from 'react'; import React, { useMemo, useRef } from 'react'; @@ -12,9 +12,9 @@ import { useTemplateByViewMode } from '../hooks/useTemplateByViewMode'; import Row from '../search/Row'; import { useSearchItems } from './hooks/useSearchItems'; -type SearchListProps = { filterText: string; onEscSearch: () => void }; +type SearchListProps = { filterText: string; onEscSearch: () => void; showRecentList?: boolean }; -const SearchList = ({ filterText, onEscSearch }: SearchListProps) => { +const SearchList = ({ filterText, onEscSearch, showRecentList }: SearchListProps) => { const t = useTranslation(); const boxRef = useRef(null); @@ -58,12 +58,13 @@ const SearchList = ({ filterText, onEscSearch }: SearchListProps) => { flexShrink={1} h='full' w='full' - pbs={8} + pbs={showRecentList ? 0 : 8} aria-live='polite' aria-atomic='true' aria-busy={isLoading} onClick={handleClick} > + {showRecentList && } { return '(Ctrl+K)'; })(); +const isRecentButton = (node: EventTarget) => (node as HTMLElement).title === 'Recent'; + const SearchSection = () => { const t = useTranslation(); + const focusManager = useFocusManager(); const user = useUser(); + const [recentButtonPressed, setRecentButtonPressed] = useState(false); const { formState: { isDirty }, @@ -62,12 +68,15 @@ const SearchSection = () => { const { filterText } = watch(); const { ref: filterRef, ...rest } = register('filterText'); + const showRecentList = Boolean(recentButtonPressed && !filterText); + const inputRef = useRef(null); const wrapperRef = useRef(null); const mergedRefs = useMergedRefs(filterRef, inputRef); const handleEscSearch = useCallback(() => { resetField('filterText'); + setRecentButtonPressed(false); inputRef.current?.blur(); }, [resetField]); @@ -83,6 +92,11 @@ const SearchSection = () => { event.preventDefault(); setFocus('filterText'); }, + 'Shift+$mod+K': (event) => { + event.preventDefault(); + setRecentButtonPressed(true); + focusManager.focusNext({ accept: (node) => isRecentButton(node) }); + }, 'Escape': (event) => { event.preventDefault(); handleEscSearch(); @@ -92,12 +106,12 @@ const SearchSection = () => { return (): void => { unsubscribe(); }; - }, [handleEscSearch, setFocus]); + }, [focusManager, handleEscSearch, setFocus]); const placeholder = [t('Search'), shortcut].filter(Boolean).join(' '); return ( - + { {user && !isDirty && ( <> - + setRecentButtonPressed(!recentButtonPressed)} + pressed={recentButtonPressed} + /> + {recentButtonPressed ? : } )} - {isDirty && } + {(isDirty || recentButtonPressed) && ( + + + + )} ); }; diff --git a/packages/i18n/src/locales/en.i18n.json b/packages/i18n/src/locales/en.i18n.json index 92056badc0b3..9273b890f260 100644 --- a/packages/i18n/src/locales/en.i18n.json +++ b/packages/i18n/src/locales/en.i18n.json @@ -6643,5 +6643,6 @@ "Sidepanel_navigation": "Secondary navigation for teams", "Sidepanel_navigation_description": "Display channels and/or discussions associated with teams by default. This allows team owners to customize communication methods to best meet their team’s needs. This is currently in feature preview and will be a premium capability once fully released.", "Show_channels_description": "Show team channels in second sidebar", - "Show_discussions_description": "Show team discussions in second sidebar" + "Show_discussions_description": "Show team discussions in second sidebar", + "Recent": "Recent" }