Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: show Recent chats on the new sidebar #33489

Merged
merged 7 commits into from
Oct 18, 2024
Merged
Show file tree
Hide file tree
Changes from 6 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/five-suns-tickle.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
'@rocket.chat/i18n': minor
'@rocket.chat/meteor': minor
---

Added `Recent` button on the new sidebar Search section to replicate the previous behavior of focusing the search bar - show recent chats.
ggazzo marked this conversation as resolved.
Show resolved Hide resolved
9 changes: 5 additions & 4 deletions apps/meteor/client/sidebarv2/header/SearchList.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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<HTMLDivElement>(null);
Expand Down Expand Up @@ -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 && <SidebarV2GroupTitle title={t('Recent')} />}
<Virtuoso
style={{ height: '100%', width: '100%' }}
totalCount={items.length}
Expand Down
37 changes: 31 additions & 6 deletions apps/meteor/client/sidebarv2/header/SearchSection.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
import { useFocusManager } from '@react-aria/focus';
import { css } from '@rocket.chat/css-in-js';
import { Box, Icon, TextInput, Palette, SidebarV2Section } from '@rocket.chat/fuselage';
import { Box, Icon, TextInput, Palette, SidebarV2Section, IconButton } from '@rocket.chat/fuselage';
import { useMergedRefs, useOutsideClick } from '@rocket.chat/fuselage-hooks';
import { useTranslation, useUser } from '@rocket.chat/ui-contexts';
import React, { useCallback, useEffect, useRef } from 'react';
import React, { useCallback, useEffect, useRef, useState } from 'react';
import { FocusScope } from 'react-aria';
import { useForm } from 'react-hook-form';
import tinykeys from 'tinykeys';

Expand Down Expand Up @@ -48,9 +50,13 @@ const shortcut = ((): string => {
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 },
Expand All @@ -62,12 +68,15 @@ const SearchSection = () => {
const { filterText } = watch();
const { ref: filterRef, ...rest } = register('filterText');

const showRecentList = Boolean(recentButtonPressed && !filterText);

const inputRef = useRef<HTMLInputElement>(null);
const wrapperRef = useRef<HTMLDivElement>(null);
const mergedRefs = useMergedRefs(filterRef, inputRef);

const handleEscSearch = useCallback(() => {
resetField('filterText');
setRecentButtonPressed(false);
inputRef.current?.blur();
}, [resetField]);

Expand All @@ -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();
Expand All @@ -92,12 +106,12 @@ const SearchSection = () => {
return (): void => {
unsubscribe();
};
}, [handleEscSearch, setFocus]);
}, [focusManager, handleEscSearch, setFocus]);

const placeholder = [t('Search'), shortcut].filter(Boolean).join(' ');

return (
<Box className={['rcx-sidebar', isDirty && wrapperStyle]} ref={wrapperRef} role='search'>
<Box className={['rcx-sidebar', (isDirty || showRecentList) && wrapperStyle]} ref={wrapperRef} role='search'>
<SidebarV2Section>
<TextInput
placeholder={placeholder}
Expand All @@ -110,12 +124,23 @@ const SearchSection = () => {

{user && !isDirty && (
<>
<Sort />
<IconButton
small
icon='clock'
title={t('Recent')}
onClick={() => setRecentButtonPressed(!recentButtonPressed)}
pressed={recentButtonPressed}
/>
{recentButtonPressed ? <IconButton icon='sort' disabled small /> : <Sort />}
<CreateRoom />
</>
)}
</SidebarV2Section>
{isDirty && <SearchList filterText={filterText} onEscSearch={handleEscSearch} />}
{(isDirty || recentButtonPressed) && (
<FocusScope>
<SearchList filterText={filterText} onEscSearch={handleEscSearch} showRecentList={showRecentList} />
</FocusScope>
)}
</Box>
);
};
Expand Down
3 changes: 2 additions & 1 deletion packages/i18n/src/locales/en.i18n.json
Original file line number Diff line number Diff line change
Expand Up @@ -6642,5 +6642,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"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please consider Recent messages

}
Loading