Chore: Keyboard shortcuts contextualBar rewrite

apps/meteor/client/views/room/contextualBar/KeyboardShortcuts/KeyboardShortcutSection.tsx

@@ -0,0 +1,19 @@
+import { Box, Divider } from '@rocket.chat/fuselage';
+import React, { ReactElement } from 'react';
+
+type KeyboardShortcutSectionProps = {
+	title: string;
+	command: string;
+};
+
+const KeyboardShortcutSection = ({ title, command }: KeyboardShortcutSectionProps): ReactElement => (
+	<Box is='section' mb='x16'>
+		<Box fontScale='p2m' fontWeight='700'>
+			{title}
+		</Box>
+		<Divider />
+		<Box fontScale='p2'>{command}</Box>
+	</Box>
+);
+
+export default KeyboardShortcutSection;

apps/meteor/client/views/room/contextualBar/KeyboardShortcuts/KeyboardShortcuts.stories.tsx

@@ -2,16 +2,16 @@ import { ComponentMeta, ComponentStory } from '@storybook/react';
 import React from 'react';
 
 import VerticalBar from '../../../../components/VerticalBar';
-import KeyboardShortcutsWithClose from './KeyboardShortcutsWithClose';
+import KeyboardShortcutsWithData from './KeyboardShortcutsWithData';
 
 export default {
 	title: 'Room/Contextual Bar/KeyboardShortcut',
-	component: KeyboardShortcutsWithClose,
+	component: KeyboardShortcutsWithData,
 	parameters: {
 		layout: 'fullscreen',
 	},
 	decorators: [(fn) => <VerticalBar height='100vh'>{fn()}</VerticalBar>],
-} as ComponentMeta<typeof KeyboardShortcutsWithClose>;
+} as ComponentMeta<typeof KeyboardShortcutsWithData>;
 
-export const Default: ComponentStory<typeof KeyboardShortcutsWithClose> = (args) => <KeyboardShortcutsWithClose {...args} />;
+export const Default: ComponentStory<typeof KeyboardShortcutsWithData> = (args) => <KeyboardShortcutsWithData {...args} />;
 Default.storyName = 'KeyboardShortcuts';

apps/meteor/client/views/room/contextualBar/KeyboardShortcuts/KeyboardShortcuts.tsx

@@ -0,0 +1,31 @@
+import { useTranslation } from '@rocket.chat/ui-contexts';
+import React, { memo, ReactElement } from 'react';
+
+import VerticalBar from '../../../../components/VerticalBar';
+import KeyboardShortcutSection from './KeyboardShortcutSection';
+
+const KeyboardShortcuts = ({ handleClose }: { handleClose: () => void }): ReactElement => {
+	const t = useTranslation();
+
+	return (
+		<>
+			<VerticalBar.Header>
+				<VerticalBar.Icon name='keyboard' />
+				<VerticalBar.Text>{t('Keyboard_Shortcuts_Title')}</VerticalBar.Text>
+				{handleClose && <VerticalBar.Close onClick={handleClose} />}
+			</VerticalBar.Header>
+			<VerticalBar.ScrollableContent>
+				<KeyboardShortcutSection title={t('Keyboard_Shortcuts_Open_Channel_Slash_User_Search')} command={t('Keyboard_Shortcuts_Keys_1')} />
+				<KeyboardShortcutSection title={t('Keyboard_Shortcuts_Mark_all_as_read')} command={t('Keyboard_Shortcuts_Keys_8')} />
+				<KeyboardShortcutSection title={t('Keyboard_Shortcuts_Edit_Previous_Message')} command={t('Keyboard_Shortcuts_Keys_2')} />
+				<KeyboardShortcutSection title={t('Keyboard_Shortcuts_Move_To_Beginning_Of_Message')} command={t('Keyboard_Shortcuts_Keys_3')} />
+				<KeyboardShortcutSection title={t('Keyboard_Shortcuts_Move_To_Beginning_Of_Message')} command={t('Keyboard_Shortcuts_Keys_4')} />
+				<KeyboardShortcutSection title={t('Keyboard_Shortcuts_Move_To_End_Of_Message')} command={t('Keyboard_Shortcuts_Keys_5')} />
+				<KeyboardShortcutSection title={t('Keyboard_Shortcuts_Move_To_End_Of_Message')} command={t('Keyboard_Shortcuts_Keys_6')} />
+				<KeyboardShortcutSection title={t('Keyboard_Shortcuts_New_Line_In_Message')} command={t('Keyboard_Shortcuts_Keys_7')} />
+			</VerticalBar.ScrollableContent>
+		</>
+	);
+};
+
+export default memo(KeyboardShortcuts);

apps/meteor/client/views/room/contextualBar/KeyboardShortcuts/KeyboardShortcutsWithData.tsx

@@ -0,0 +1,12 @@
+import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
+import React, { ReactElement } from 'react';
+
+import { ToolboxContextValue } from '../../lib/Toolbox/ToolboxContext';
+import KeyboardShortcuts from './KeyboardShortcuts';
+
+const KeyboardShortcutsWithData = ({ tabBar }: { tabBar: ToolboxContextValue['tabBar'] }): ReactElement => {
+	const handleClose = useMutableCallback(() => tabBar?.close());
+	return <KeyboardShortcuts handleClose={handleClose} />;
+};
+
+export default KeyboardShortcutsWithData;

apps/meteor/client/views/room/contextualBar/KeyboardShortcuts/index.ts

@@ -1 +1 @@
-export { default } from './KeyboardShortcutsWithClose';
+export { default } from './KeyboardShortcutsWithData';