From 40fcc9d1988bdc642fa200b57f5afc028b6673cf Mon Sep 17 00:00:00 2001
From: Guilherme Gazzo <guilherme@gazzo.xyz>
Date: Tue, 22 Dec 2020 19:06:43 -0300
Subject: [PATCH 01/10] Small Fixes

---
 client/components/Header/Header.tsx            |  4 ++--
 client/components/ScrollableContentWrapper.tsx | 10 +++++-----
 client/components/VerticalBar.js               |  2 +-
 client/views/room/Header/Header.js             |  4 ++--
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/client/components/Header/Header.tsx b/client/components/Header/Header.tsx
index 65121623afa4e..a93ecb00bc4f7 100644
--- a/client/components/Header/Header.tsx
+++ b/client/components/Header/Header.tsx
@@ -9,7 +9,7 @@ const Row: FC = (props: any) => <Box alignItems='center' flexShrink={1} flexGrow
 
 const HeaderIcon: FC<{ icon: JSX.Element | { name: string; color?: string } | null}> = ({ icon }) => icon && <Box display='flex' flexShrink={0} alignItems='center' size={18} overflow='hidden' justifyContent='center'>{React.isValidElement(icon) ? icon : <Icon color='info' size='x18' { ...{ name: (icon as any).name }} />}</Box>;
 
-const ToolBox: FC = (props: any) => <ButtonGroup small {...props}/>;
+const ToolBox: FC = (props: any) => <ButtonGroup mi='x4' medium {...props}/>;
 
 const ToolBoxAction: FC = ({ id, icon, title, action, className, tabId, index, ...props }: any) => <ActionButton
 	className={className}
@@ -38,7 +38,7 @@ const Avatar: FC = (props: any) => <Button width='x36' {...props}/>;
 const HeaderDivider: FC = () => <Divider { ...{ mbs: 'neg-x2', mbe: 0 } as any} />;
 
 const Header: FC & { ToolBoxAction: FC; Badge: FC<BadgeProps> } = (props: any) => <Box rcx-room-header is='header' height='x64' display='flex' justifyContent='center' flexDirection='column' overflow='hidden' flexShrink={0}>
-	<Box height='x64' pi='x24' display='flex' flexGrow={1} justifyContent='center' alignItems='center' overflow='hidden' flexDirection='row' {...props}/>
+	<Box height='x64' mi='neg-x4' pi='x24' display='flex' flexGrow={1} justifyContent='center' alignItems='center' overflow='hidden' flexDirection='row' {...props}/>
 	<HeaderDivider/>
 </Box>;
 
diff --git a/client/components/ScrollableContentWrapper.tsx b/client/components/ScrollableContentWrapper.tsx
index 1b8c1badd19da..f7f8ad776108f 100644
--- a/client/components/ScrollableContentWrapper.tsx
+++ b/client/components/ScrollableContentWrapper.tsx
@@ -1,4 +1,4 @@
-import React, { CSSProperties, FC } from 'react';
+import React, { CSSProperties, FC, useMemo } from 'react';
 import SimpleBar from 'simplebar-react';
 import 'simplebar/src/simplebar.css';
 
@@ -6,19 +6,19 @@ import { useDir } from '../hooks/useDir';
 
 
 const styleDefault = {
-	maxHeight: '100%', flexGrow: 1,
+	maxHeight: '100%', flexGrow: 1, overflowY: 'auto', willChange: 'transform',
 };
 
-
 type CustomScrollbarsProps = {
 	onScroll?: Function;
 	ref: React.Ref<unknown>;
 	style?: CSSProperties;
 }
 
-const ScrollableContentWrapper: FC<CustomScrollbarsProps> = React.memo(React.forwardRef(({ onScroll, children, style = styleDefault }, ref) => {
+const ScrollableContentWrapper: FC<CustomScrollbarsProps> = React.memo(React.forwardRef(({ onScroll, children, style }, ref) => {
 	const dir = useDir();
-	return <SimpleBar data-simplebar-direction={dir} direction={dir} style={style} scrollableNodeProps={{ ref, onScroll }} children={children}/>;
+	const simpleBarStyle: CSSProperties = useMemo(() => ({ ...style, ...styleDefault }), [style]) as CSSProperties;
+	return <SimpleBar data-simplebar-direction={dir} direction={dir} style={simpleBarStyle} scrollableNodeProps={{ ref, onScroll }} children={children}/>;
 }));
 
 export default ScrollableContentWrapper;
diff --git a/client/components/VerticalBar.js b/client/components/VerticalBar.js
index 5417caecdbffa..2de1fca1af473 100644
--- a/client/components/VerticalBar.js
+++ b/client/components/VerticalBar.js
@@ -106,7 +106,7 @@ function VerticalBarAction({ name, ...props }) {
 }
 
 function VerticalBarActions(props) {
-	return <ButtonGroup small {...props} />;
+	return <ButtonGroup medium {...props} />;
 }
 
 function VerticalBarActionBack(props) {
diff --git a/client/views/room/Header/Header.js b/client/views/room/Header/Header.js
index 2a4afa134d209..2253e09e654bf 100644
--- a/client/views/room/Header/Header.js
+++ b/client/views/room/Header/Header.js
@@ -36,10 +36,10 @@ const RoomHeader = ({ room }) => {
 	const { isMobile } = useLayout();
 	const avatar = <RoomAvatar room={room}/>;
 	return <Header>
-		<Header.ToolBox>
+		{ (isMobile || room.prid) && <Header.ToolBox>
 			{ isMobile && <Burger/>}
 			{ room.prid && <BackToRoom small={!isMobile} prid={room.prid}/>}
-		</Header.ToolBox>
+		</Header.ToolBox> }
 		{ avatar && <Header.Avatar>{avatar}</Header.Avatar> }
 		<Header.Content>
 			<Header.Content.Row>

From 48a4f46e2e685d6187e0bdb36abe8331c15234a1 Mon Sep 17 00:00:00 2001
From: Guilherme Gazzo <guilherme@gazzo.xyz>
Date: Tue, 22 Dec 2020 21:00:31 -0300
Subject: [PATCH 02/10] Close tab if click on an opened tab

---
 client/views/room/providers/ToolboxProvider.tsx | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/client/views/room/providers/ToolboxProvider.tsx b/client/views/room/providers/ToolboxProvider.tsx
index 77ece0c4f6afc..6380a3168d822 100644
--- a/client/views/room/providers/ToolboxProvider.tsx
+++ b/client/views/room/providers/ToolboxProvider.tsx
@@ -68,19 +68,22 @@ export const ToolboxProvider = ({ children, room }: { children: ReactNode; room:
 	const tab = params?.tab;
 	const context = params?.context;
 
-	const open = useMutableCallback((actionId, context) => {
+	const close = useMutableCallback(() => {
 		router.push({
 			...params,
-			tab: actionId,
-			context,
+			tab: '',
+			context: '',
 		});
 	});
 
-	const close = useMutableCallback(() => {
+	const open = useMutableCallback((actionId, context) => {
+		if (actionId === activeTabBar[0]?.id) {
+			return close();
+		}
 		router.push({
 			...params,
-			tab: '',
-			context: '',
+			tab: actionId,
+			context,
 		});
 	});
 

From d42d75044945b24e924b424c5eff76f69497d6e9 Mon Sep 17 00:00:00 2001
From: Guilherme Gazzo <guilherme@gazzo.xyz>
Date: Tue, 22 Dec 2020 21:00:39 -0300
Subject: [PATCH 03/10] File Icon

---
 package-lock.json | 68 +++++++++++++++++++++++------------------------
 package.json      | 18 ++++++-------
 2 files changed, 43 insertions(+), 43 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 0ab1e066e9f86..d93a299d106ab 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5095,9 +5095,9 @@
 			}
 		},
 		"@rocket.chat/css-in-js": {
-			"version": "0.20.0",
-			"resolved": "https://registry.npmjs.org/@rocket.chat/css-in-js/-/css-in-js-0.20.0.tgz",
-			"integrity": "sha512-RCemmoddjvQPvDxBHvBZjzhupt0dnWp9mwpTXvcI1Zm9bFA+Iulx/BmD8FbRzJjJ4xqXavi/HrSqnwY996SJew==",
+			"version": "0.20.1",
+			"resolved": "https://registry.npmjs.org/@rocket.chat/css-in-js/-/css-in-js-0.20.1.tgz",
+			"integrity": "sha512-0bgLOKs7+GbuDfI6kdW4eNohkpXmjpSUW8deA6FCsI+Mstatt5uJl/kBm+leyMCJHJk7jDUL37yr5snDsM/t1w==",
 			"requires": {
 				"@emotion/hash": "^0.8.0",
 				"stylis": "^4.0.3"
@@ -5111,9 +5111,9 @@
 			}
 		},
 		"@rocket.chat/emitter": {
-			"version": "0.20.0",
-			"resolved": "https://registry.npmjs.org/@rocket.chat/emitter/-/emitter-0.20.0.tgz",
-			"integrity": "sha512-lGYvCCQoL9P3FvvRMVhkG7Akbm1uhydSpWgGKzITkxQWeSMjtxYo9q3Rh/uyDKncvLvbALkBJs9YqLvDHT4A4w=="
+			"version": "0.20.1",
+			"resolved": "https://registry.npmjs.org/@rocket.chat/emitter/-/emitter-0.20.1.tgz",
+			"integrity": "sha512-BeY0z6jbYuE7VRv147dUY9BhsLI6qR7/T6x/clCi534jUHRG+hB0Wt9dehtieCiClU3buICgZIl6V/ZQbhjEdw=="
 		},
 		"@rocket.chat/eslint-config": {
 			"version": "0.3.0",
@@ -5125,29 +5125,29 @@
 			}
 		},
 		"@rocket.chat/fuselage": {
-			"version": "0.20.0",
-			"resolved": "https://registry.npmjs.org/@rocket.chat/fuselage/-/fuselage-0.20.0.tgz",
-			"integrity": "sha512-4iAxIpmDfyZJB7sziYkuy1kFJ2+uy+aPG5Jqu+IQwHPiG2p3RseLjgObUFX15i+OWiK+/WfKjiWKcWUkkrbCTg==",
+			"version": "0.20.1",
+			"resolved": "https://registry.npmjs.org/@rocket.chat/fuselage/-/fuselage-0.20.1.tgz",
+			"integrity": "sha512-a5qeYW60Z9/ZNpMLlSRIpD3utnaK1XV413yjLU2diHGTzPB6FVKBI5piqJmy4o5YTIcxyDtMZVDPWhH5ZixvEg==",
 			"requires": {
-				"@rocket.chat/css-in-js": "^0.20.0",
-				"@rocket.chat/fuselage-tokens": "^0.20.0",
+				"@rocket.chat/css-in-js": "^0.20.1",
+				"@rocket.chat/fuselage-tokens": "^0.20.1",
 				"invariant": "^2.2.4",
 				"react-keyed-flatten-children": "^1.2.0"
 			}
 		},
 		"@rocket.chat/fuselage-hooks": {
-			"version": "0.20.0",
-			"resolved": "https://registry.npmjs.org/@rocket.chat/fuselage-hooks/-/fuselage-hooks-0.20.0.tgz",
-			"integrity": "sha512-E5v/tXaOM3rgrMaYGXS6sLrSdOLFMs6wekVArAgBZzevTxZ72kP6q/gFgkKpSD0ZtdUO37URV1Ml59yEO281ig==",
+			"version": "0.20.1",
+			"resolved": "https://registry.npmjs.org/@rocket.chat/fuselage-hooks/-/fuselage-hooks-0.20.1.tgz",
+			"integrity": "sha512-GrK7S2zEmWqm+Ia/e/3b4wmPQIL47ZaC5puLL1xeyQ236jIBPKVuI73cz8+HC0ZkyY2IkO+yhAHm4x+bJztfQA==",
 			"requires": {
-				"@rocket.chat/fuselage-tokens": "^0.20.0",
+				"@rocket.chat/fuselage-tokens": "^0.20.1",
 				"use-subscription": "^1.4.1"
 			}
 		},
 		"@rocket.chat/fuselage-polyfills": {
-			"version": "0.20.0",
-			"resolved": "https://registry.npmjs.org/@rocket.chat/fuselage-polyfills/-/fuselage-polyfills-0.20.0.tgz",
-			"integrity": "sha512-IHOV7MakqHAfqynXOq0UL+udbaQ/hrwPEcTz+0G8j2tK+kUZDQ1A2E/NhgnM0OkCU8q8N8XDJSy79XEFVeQcqg==",
+			"version": "0.20.1",
+			"resolved": "https://registry.npmjs.org/@rocket.chat/fuselage-polyfills/-/fuselage-polyfills-0.20.1.tgz",
+			"integrity": "sha512-SU3vQSbrRsuMyMeu8i6eZetNty5yguemS+T3nqY+XF+HXyPKZkkw2CYxBJxQQwtAjk4tjp2zZ9BesdGcBw2NAA==",
 			"requires": {
 				"@juggle/resize-observer": "^3.1.2",
 				"clipboard-polyfill": "^3.0.1",
@@ -5157,22 +5157,22 @@
 			}
 		},
 		"@rocket.chat/fuselage-tokens": {
-			"version": "0.20.0",
-			"resolved": "https://registry.npmjs.org/@rocket.chat/fuselage-tokens/-/fuselage-tokens-0.20.0.tgz",
-			"integrity": "sha512-KRJkaBQbgn12l9yA5mcnG/AsmCDIGhBKzBihKZraIQuRmYPqg1nO98r5aXZvQwbJHkArJh5xp0goI4shiB4Tzw=="
+			"version": "0.20.1",
+			"resolved": "https://registry.npmjs.org/@rocket.chat/fuselage-tokens/-/fuselage-tokens-0.20.1.tgz",
+			"integrity": "sha512-tRzWNvdb9T7nU3U9ZbMue84yvs21aP44tVsV/Gz+UNjWG1cEmpnB73dIj+52orzM+VcU7YSJ+Tv+K8Z87fHCeA=="
 		},
 		"@rocket.chat/fuselage-ui-kit": {
-			"version": "0.20.0",
-			"resolved": "https://registry.npmjs.org/@rocket.chat/fuselage-ui-kit/-/fuselage-ui-kit-0.20.0.tgz",
-			"integrity": "sha512-YEhckwX2YYhVyZSx4n8/143dgeUJJILA2fk53aQbky+vPZ4dKRX5qx6M8vKRHI89dMtlgW1cU4LQcc5mrOSJ4g==",
+			"version": "0.20.1",
+			"resolved": "https://registry.npmjs.org/@rocket.chat/fuselage-ui-kit/-/fuselage-ui-kit-0.20.1.tgz",
+			"integrity": "sha512-TW0h4E+6W0z1qb4QeTQQxYWbHnFIv2nA+NJlU3IX4zHkpjptPA8afgDlf4QDQSZ5XNmcEFLl3dfnMpZgiqWVxw==",
 			"requires": {
-				"@rocket.chat/fuselage-polyfills": "^0.20.0"
+				"@rocket.chat/fuselage-polyfills": "^0.20.1"
 			}
 		},
 		"@rocket.chat/icons": {
-			"version": "0.20.0",
-			"resolved": "https://registry.npmjs.org/@rocket.chat/icons/-/icons-0.20.0.tgz",
-			"integrity": "sha512-ynIzrYe485HqKf+aIVkS9lmCoylZDjoOXe0bJejunIv0vjf3q4v9H1V8v2S4CDssoZiLtC6BdsiGzaEuc6EbTQ=="
+			"version": "0.20.1",
+			"resolved": "https://registry.npmjs.org/@rocket.chat/icons/-/icons-0.20.1.tgz",
+			"integrity": "sha512-izbaupM6jAc/VVIYVzcLB/y4E6TX6skDWIFr8SDzU+FFcIv/oI98qYjLBa4qOH5S0IBi75hrgwdY/wvKhcEvzw=="
 		},
 		"@rocket.chat/livechat": {
 			"version": "1.7.6",
@@ -5225,9 +5225,9 @@
 			}
 		},
 		"@rocket.chat/mp3-encoder": {
-			"version": "0.20.0",
-			"resolved": "https://registry.npmjs.org/@rocket.chat/mp3-encoder/-/mp3-encoder-0.20.0.tgz",
-			"integrity": "sha512-iQOibT3xnqsVXMmyOZalnItQBmhbD+snWUwEplanB4FFaFiaZTBMUBoClazEgZc8GD8E6Dm/j9G4CYdgZSW91w==",
+			"version": "0.20.1",
+			"resolved": "https://registry.npmjs.org/@rocket.chat/mp3-encoder/-/mp3-encoder-0.20.1.tgz",
+			"integrity": "sha512-rcbgiPntCnIIGQpIF0ckiLUI+5fujWEWJWIaQrRH0sJaXb28Oica0PXss1jjLd7dBbjgQ607ZGcOJqvxrARJxA==",
 			"requires": {
 				"lamejs": "git+https://github.com/zhuker/lamejs.git"
 			}
@@ -5275,9 +5275,9 @@
 			}
 		},
 		"@rocket.chat/ui-kit": {
-			"version": "0.20.0",
-			"resolved": "https://registry.npmjs.org/@rocket.chat/ui-kit/-/ui-kit-0.20.0.tgz",
-			"integrity": "sha512-t3Zl9fp1jxyRjsC1YH5ss/PS5eOAJbNUyUi9AV2vpl+jEGic3lA51k8zs6fWcMVncQKXHV9hrDKXaG9ZhaslYA=="
+			"version": "0.20.1",
+			"resolved": "https://registry.npmjs.org/@rocket.chat/ui-kit/-/ui-kit-0.20.1.tgz",
+			"integrity": "sha512-HddN7y/8nXPZbYwDJpG/lVlozAomvShhkTKYvsRwQ3i8Tx04iMVmuNawhSITjlxouiNLDQfoNwebOdY8gB6+/A=="
 		},
 		"@samverschueren/stream-to-observable": {
 			"version": "0.3.1",
diff --git a/package.json b/package.json
index 0c0c08f523643..d1c37073cdba5 100644
--- a/package.json
+++ b/package.json
@@ -138,15 +138,15 @@
 		"@nivo/line": "^0.61.1",
 		"@nivo/pie": "^0.61.1",
 		"@rocket.chat/apps-engine": "1.21.0-alpha.4235",
-		"@rocket.chat/css-in-js": "^0.20.0",
-		"@rocket.chat/emitter": "^0.20.0",
-		"@rocket.chat/fuselage": "^0.20.0",
-		"@rocket.chat/fuselage-hooks": "^0.20.0",
-		"@rocket.chat/fuselage-polyfills": "^0.20.0",
-		"@rocket.chat/fuselage-ui-kit": "^0.20.0",
-		"@rocket.chat/icons": "^0.20.0",
-		"@rocket.chat/mp3-encoder": "^0.20.0",
-		"@rocket.chat/ui-kit": "^0.20.0",
+		"@rocket.chat/css-in-js": "^0.20.1",
+		"@rocket.chat/emitter": "^0.20.1",
+		"@rocket.chat/fuselage": "^0.20.1",
+		"@rocket.chat/fuselage-hooks": "^0.20.1",
+		"@rocket.chat/fuselage-polyfills": "^0.20.1",
+		"@rocket.chat/fuselage-ui-kit": "^0.20.1",
+		"@rocket.chat/icons": "^0.20.1",
+		"@rocket.chat/mp3-encoder": "^0.20.1",
+		"@rocket.chat/ui-kit": "^0.20.1",
 		"@slack/client": "^4.12.0",
 		"@types/fibers": "^3.1.0",
 		"@types/mkdirp": "^1.0.1",

From 11cd09c57c4dc18c0da82635a01b27d3e0e8d943 Mon Sep 17 00:00:00 2001
From: Guilherme Gazzo <guilhermegazzo@gmail.com>
Date: Wed, 23 Dec 2020 00:13:09 -0300
Subject: [PATCH 04/10] Update client/components/ScrollableContentWrapper.tsx

Co-authored-by: Tasso Evangelista <tasso.evangelista@rocket.chat>
---
 client/components/ScrollableContentWrapper.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/components/ScrollableContentWrapper.tsx b/client/components/ScrollableContentWrapper.tsx
index f7f8ad776108f..0594560bd615d 100644
--- a/client/components/ScrollableContentWrapper.tsx
+++ b/client/components/ScrollableContentWrapper.tsx
@@ -17,7 +17,7 @@ type CustomScrollbarsProps = {
 
 const ScrollableContentWrapper: FC<CustomScrollbarsProps> = React.memo(React.forwardRef(({ onScroll, children, style }, ref) => {
 	const dir = useDir();
-	const simpleBarStyle: CSSProperties = useMemo(() => ({ ...style, ...styleDefault }), [style]) as CSSProperties;
+	const simpleBarStyle = useMemo(() => ({ ...style, ...styleDefault }), [style]) as CSSProperties;
 	return <SimpleBar data-simplebar-direction={dir} direction={dir} style={simpleBarStyle} scrollableNodeProps={{ ref, onScroll }} children={children}/>;
 }));
 

From 3195906568f0acc36130f9ba69fb7917df93e25a Mon Sep 17 00:00:00 2001
From: Guilherme Gazzo <guilhermegazzo@gmail.com>
Date: Wed, 23 Dec 2020 00:14:41 -0300
Subject: [PATCH 05/10] Update ScrollableContentWrapper.tsx

---
 client/components/ScrollableContentWrapper.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/client/components/ScrollableContentWrapper.tsx b/client/components/ScrollableContentWrapper.tsx
index 0594560bd615d..2f0ce8de6c798 100644
--- a/client/components/ScrollableContentWrapper.tsx
+++ b/client/components/ScrollableContentWrapper.tsx
@@ -1,4 +1,4 @@
-import React, { CSSProperties, FC, useMemo } from 'react';
+import React, { CSSProperties, FC, useMemo, memo, forwardRef } from 'react';
 import SimpleBar from 'simplebar-react';
 import 'simplebar/src/simplebar.css';
 
@@ -15,10 +15,10 @@ type CustomScrollbarsProps = {
 	style?: CSSProperties;
 }
 
-const ScrollableContentWrapper: FC<CustomScrollbarsProps> = React.memo(React.forwardRef(({ onScroll, children, style }, ref) => {
+const ScrollableContentWrapper: FC<CustomScrollbarsProps> = forwardRef(({ onScroll, children, style }, ref) => {
 	const dir = useDir();
 	const simpleBarStyle = useMemo(() => ({ ...style, ...styleDefault }), [style]) as CSSProperties;
 	return <SimpleBar data-simplebar-direction={dir} direction={dir} style={simpleBarStyle} scrollableNodeProps={{ ref, onScroll }} children={children}/>;
-}));
+});
 
-export default ScrollableContentWrapper;
+export default memo(ScrollableContentWrapper);

From 872e3d4744798a7371564b729f406ef03a99a09a Mon Sep 17 00:00:00 2001
From: Guilherme Gazzo <guilherme@gazzo.xyz>
Date: Wed, 23 Dec 2020 01:35:27 -0300
Subject: [PATCH 06/10] TS sad

---
 client/components/ScrollableContentWrapper.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/components/ScrollableContentWrapper.tsx b/client/components/ScrollableContentWrapper.tsx
index 2f0ce8de6c798..b6481867b2f98 100644
--- a/client/components/ScrollableContentWrapper.tsx
+++ b/client/components/ScrollableContentWrapper.tsx
@@ -15,10 +15,10 @@ type CustomScrollbarsProps = {
 	style?: CSSProperties;
 }
 
-const ScrollableContentWrapper: FC<CustomScrollbarsProps> = forwardRef(({ onScroll, children, style }, ref) => {
+const ScrollableContentWrapper: FC<CustomScrollbarsProps> = memo(forwardRef(({ onScroll, children, style }, ref) => {
 	const dir = useDir();
 	const simpleBarStyle = useMemo(() => ({ ...style, ...styleDefault }), [style]) as CSSProperties;
 	return <SimpleBar data-simplebar-direction={dir} direction={dir} style={simpleBarStyle} scrollableNodeProps={{ ref, onScroll }} children={children}/>;
-});
+}));
 
-export default memo(ScrollableContentWrapper);
+export default ScrollableContentWrapper;

From 69048a1352f82e406fd1bb34381d5610b7880d41 Mon Sep 17 00:00:00 2001
From: Guilherme Gazzo <guilherme@gazzo.xyz>
Date: Wed, 23 Dec 2020 02:00:53 -0300
Subject: [PATCH 07/10] forwardRef

---
 client/components/ScrollableContentWrapper.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/client/components/ScrollableContentWrapper.tsx b/client/components/ScrollableContentWrapper.tsx
index b6481867b2f98..ee3f24dcedb1e 100644
--- a/client/components/ScrollableContentWrapper.tsx
+++ b/client/components/ScrollableContentWrapper.tsx
@@ -1,4 +1,4 @@
-import React, { CSSProperties, FC, useMemo, memo, forwardRef } from 'react';
+import React, { CSSProperties, useMemo, memo, forwardRef } from 'react';
 import SimpleBar from 'simplebar-react';
 import 'simplebar/src/simplebar.css';
 
@@ -15,10 +15,10 @@ type CustomScrollbarsProps = {
 	style?: CSSProperties;
 }
 
-const ScrollableContentWrapper: FC<CustomScrollbarsProps> = memo(forwardRef(({ onScroll, children, style }, ref) => {
+const ScrollableContentWrapper = forwardRef<HTMLElement, CustomScrollbarsProps>(({ onScroll, children, style }, ref) => {
 	const dir = useDir();
 	const simpleBarStyle = useMemo(() => ({ ...style, ...styleDefault }), [style]) as CSSProperties;
 	return <SimpleBar data-simplebar-direction={dir} direction={dir} style={simpleBarStyle} scrollableNodeProps={{ ref, onScroll }} children={children}/>;
-}));
+});
 
-export default ScrollableContentWrapper;
+export default memo(ScrollableContentWrapper);

From 91aa74f027bfd3fe4c0b4900cc077de0cb021df7 Mon Sep 17 00:00:00 2001
From: Guilherme Gazzo <guilherme@gazzo.xyz>
Date: Wed, 23 Dec 2020 10:33:51 -0300
Subject: [PATCH 08/10] Fix

---
 client/components/ScrollableContentWrapper.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/components/ScrollableContentWrapper.tsx b/client/components/ScrollableContentWrapper.tsx
index ee3f24dcedb1e..50ddc45778cdf 100644
--- a/client/components/ScrollableContentWrapper.tsx
+++ b/client/components/ScrollableContentWrapper.tsx
@@ -15,7 +15,7 @@ type CustomScrollbarsProps = {
 	style?: CSSProperties;
 }
 
-const ScrollableContentWrapper = forwardRef<HTMLElement, CustomScrollbarsProps>(({ onScroll, children, style }, ref) => {
+const ScrollableContentWrapper = forwardRef<unknown, CustomScrollbarsProps>(({ onScroll, children, style }, ref) => {
 	const dir = useDir();
 	const simpleBarStyle = useMemo(() => ({ ...style, ...styleDefault }), [style]) as CSSProperties;
 	return <SimpleBar data-simplebar-direction={dir} direction={dir} style={simpleBarStyle} scrollableNodeProps={{ ref, onScroll }} children={children}/>;

From 669f57ead39b4f6a59f998c01f0c170dee407160 Mon Sep 17 00:00:00 2001
From: Guilherme Gazzo <guilherme@gazzo.xyz>
Date: Wed, 23 Dec 2020 16:11:14 -0300
Subject: [PATCH 09/10] ...

---
 client/components/ScrollableContentWrapper.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/components/ScrollableContentWrapper.tsx b/client/components/ScrollableContentWrapper.tsx
index 50ddc45778cdf..106765f581186 100644
--- a/client/components/ScrollableContentWrapper.tsx
+++ b/client/components/ScrollableContentWrapper.tsx
@@ -11,8 +11,8 @@ const styleDefault = {
 
 type CustomScrollbarsProps = {
 	onScroll?: Function;
-	ref: React.Ref<unknown>;
 	style?: CSSProperties;
+	children?: React.ReactNode;
 }
 
 const ScrollableContentWrapper = forwardRef<unknown, CustomScrollbarsProps>(({ onScroll, children, style }, ref) => {

From e9300c3e91e0d9784a297820158f6c5b957ccde5 Mon Sep 17 00:00:00 2001
From: Guilherme Gazzo <guilherme@gazzo.xyz>
Date: Wed, 23 Dec 2020 18:08:56 -0300
Subject: [PATCH 10/10] hmmm maybe in a near future

---
 client/views/room/Header/ToolBox/ToolBox.tsx | 28 ++++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/client/views/room/Header/ToolBox/ToolBox.tsx b/client/views/room/Header/ToolBox/ToolBox.tsx
index cb020c187468e..1da0815ab6270 100644
--- a/client/views/room/Header/ToolBox/ToolBox.tsx
+++ b/client/views/room/Header/ToolBox/ToolBox.tsx
@@ -1,7 +1,7 @@
-import React, { memo, useContext, useEffect, ReactNode, useRef } from 'react';
+import React, { memo, useContext, ReactNode, useRef } from 'react';
 import { Menu, Option, BoxProps, MenuProps } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
-import tinykeys from 'tinykeys';
+// import tinykeys from 'tinykeys';
 
 // used to open the menu option by keyboard
 import Header from '../../../../components/Header';
@@ -44,20 +44,20 @@ const ToolBox = ({ className }: { className: BoxProps['className'] }): JSX.Eleme
 		openTabBar(actions[index].id);
 	});
 
-	const open = useMutableCallback((index) => {
-		openTabBar(actions[index].id);
-	});
+	// const open = useMutableCallback((index) => {
+	// 	openTabBar(actions[index].id);
+	// });
 
-	useEffect(() => {
-		if (!visibleActions.length) {
-			return;
-		}
-		const unsubscribe = tinykeys(window, Object.fromEntries(new Array(visibleActions.length).fill(true).map((_, index) => [`$mod+${ index + 1 }`, (): void => { open(index); }])));
+	// useEffect(() => {
+	// 	if (!visibleActions.length) {
+	// 		return;
+	// 	}
+	// 	const unsubscribe = tinykeys(window, Object.fromEntries(new Array(visibleActions.length).fill(true).map((_, index) => [`$mod+${ index + 1 }`, (): void => { open(index); }])));
 
-		return (): void => {
-			unsubscribe();
-		};
-	}, [visibleActions.length, open]);
+	// 	return (): void => {
+	// 		unsubscribe();
+	// 	};
+	// }, [visibleActions.length, open]);
 
 	return <>
 		{ visibleActions.map(({ renderAction, id, icon, title, action = actionDefault }, index) => {