Chore: Convert sidebar/item (#25634)

<!-- This is a pull request template, you do not need to uncomment or remove the comments, they won't show up in the PR text. -->

<!-- Your Pull Request name should start with one of the following tags
  [NEW] For new features
  [IMPROVE] For an improvement (performance or little improvements) in existing features
  [FIX] For bug fixes that affect the end-user
  [BREAK] For pull requests including breaking changes
  Chore: For small tasks
  Doc: For documentation
-->

<!-- Checklist!!! If you're unsure about any of them, don't hesitate to ask. We're here to help! This is simply a reminder of what we are going to look for before merging your code. 
  - I have read the Contributing Guide - https://github.com/RocketChat/Rocket.Chat/blob/develop/.github/CONTRIBUTING.md#contributing-to-rocketchat doc
  - I have signed the CLA - https://cla-assistant.io/RocketChat/Rocket.Chat
  - Lint and unit tests pass locally with my changes
  - I have added tests that prove my fix is effective or that my feature works (if applicable)
  - I have added necessary documentation (if applicable)
  - Any dependent changes have been merged and published in downstream modules
-->

## Proposed changes (including videos or screenshots)
<!-- CHANGELOG -->
<!--
  Describe the big picture of your changes here to communicate to the maintainers why we should accept this pull request.
  If it fixes a bug or resolves a feature request, be sure to link to that issue below.
  This description will appear in the release notes if we accept the contribution.
-->

<!-- END CHANGELOG -->

## Issue(s)
<!-- Link the issues being closed by or related to this PR. For example, you can use #594 if this PR closes issue number 594 -->

## Steps to test or reproduce
<!-- Mention how you would reproduce the bug if not mentioned on the issue page already. Also mention which screens are going to have the changes if applicable -->

## Further comments
<!-- If this is a relatively large or complex change, kick off the discussion by explaining why you chose the solution you did and what alternatives you considered, etc... -->

apps/meteor/client/sidebar/Item/Condensed.js → apps/meteor/client/sidebar/Item/Condensed.tsx

@@ -1,8 +1,23 @@
-import { Sidebar, ActionButton } from '@rocket.chat/fuselage';
+import { Sidebar, ActionButton, IconProps } from '@rocket.chat/fuselage';
 import { useMutableCallback, usePrefersReducedMotion } from '@rocket.chat/fuselage-hooks';
-import React, { memo, useState } from 'react';
+import React, { FC, memo, ReactElement, useState } from 'react';
 
-const Condensed = ({ icon, title = '', titleIcon, avatar, actions, href, menuOptions, unread, menu, badges, threadUnread, ...props }) => {
+type CondensedProps = {
+	title: ReactElement | string;
+	titleIcon?: ReactElement;
+	avatar: ReactElement | boolean;
+	icon?: IconProps['name'];
+	actions?: ReactElement;
+	href?: string;
+	unread?: boolean;
+	menu?: () => ReactElement;
+	menuOptions?: any;
+	selected?: boolean;
+	badges?: ReactElement;
+	clickable?: boolean;
+};
+
+const Condensed: FC<CondensedProps> = ({ icon, title = '', avatar, actions, href, unread, menu, badges, ...props }) => {
 	const [menuVisibility, setMenuVisibility] = useState(!!window.DISABLE_ANIMATION);
 
 	const isReduceMotionEnabled = usePrefersReducedMotion();
@@ -15,12 +30,12 @@ const Condensed = ({ icon, title = '', titleIcon, avatar, actions, href, menuOpt
 	};
 
 	return (
-		<Sidebar.Item {...props} href={href} clickable={!!href}>
+		<Sidebar.Item {...props} {...({ href } as any)} clickable={!!href}>
 			{avatar && <Sidebar.Item.Avatar>{avatar}</Sidebar.Item.Avatar>}
 			<Sidebar.Item.Content>
 				<Sidebar.Item.Wrapper>
 					{icon}
-					<Sidebar.Item.Title data-qa='sidebar-item-title' className={unread && 'rcx-sidebar-item--highlighted'}>
+					<Sidebar.Item.Title data-qa='sidebar-item-title' className={(unread && 'rcx-sidebar-item--highlighted') as string}>
 						{title}
 					</Sidebar.Item.Title>
 				</Sidebar.Item.Wrapper>

apps/meteor/client/sidebar/Item/Extended.js → apps/meteor/client/sidebar/Item/Extended.tsx

@@ -1,39 +1,39 @@
-import { Sidebar, ActionButton } from '@rocket.chat/fuselage';
+import { Sidebar, ActionButton, IconProps } from '@rocket.chat/fuselage';
 import { useMutableCallback, usePrefersReducedMotion } from '@rocket.chat/fuselage-hooks';
-import React, { memo, useState } from 'react';
+import React, { memo, useState, VFC } from 'react';
 
 import { useShortTimeAgo } from '../../hooks/useTimeAgo';
 
-/**
- * @param {Object} props
- * @param {React.ReactNode} props.icon
- * @param {React.ReactNode} props.title
- * @param {any} props.avatar
- * @param {any} props.actions
- * @param {any} props.href
- * @param {any} props.time
- * @param {any} props.menu
- * @param {any} props.menuOptions
- * @param {React.ReactNode} props.subtitle
- * @param {any} props.titleIcon
- * @param {any} props.badges
- * @param {any} props.threadUnread
- * @param {any} props.unread
- * @param {any} props.selected
- */
-const Extended = ({
+type ExtendedProps = {
+	icon?: IconProps['name'];
+	title?: React.ReactNode;
+	avatar?: React.ReactNode | boolean;
+	actions?: React.ReactNode;
+	href?: string;
+	time?: any;
+	menu?: () => React.ReactNode;
+	subtitle?: React.ReactNode;
+	badges?: React.ReactNode;
+	unread?: boolean;
+	selected?: boolean;
+	menuOptions?: any;
+	titleIcon?: React.ReactNode;
+	threadUnread?: boolean;
+};
+
+const Extended: VFC<ExtendedProps> = ({
 	icon,
 	title = '',
 	avatar,
 	actions,
 	href,
 	time,
 	menu,
-	menuOptions,
+	menuOptions: _menuOptions,
 	subtitle = '',
-	titleIcon,
+	titleIcon: _titleIcon,
 	badges,
-	threadUnread,
+	threadUnread: _threadUnread,
 	unread,
 	selected,
 	...props
@@ -52,23 +52,21 @@ const Extended = ({
 	};
 
 	return (
-		<Sidebar.Item aria-selected={selected} selected={selected} highlighted={unread} {...props} href={href} clickable={!!href}>
+		<Sidebar.Item aria-selected={selected} selected={selected} highlighted={unread} {...props} {...(href as any)} clickable={!!href}>
 			{avatar && <Sidebar.Item.Avatar>{avatar}</Sidebar.Item.Avatar>}
 			<Sidebar.Item.Content>
 				<Sidebar.Item.Content>
 					<Sidebar.Item.Wrapper>
 						{icon}
-						<Sidebar.Item.Title data-qa='sidebar-item-title' className={unread && 'rcx-sidebar-item--highlighted'}>
+						<Sidebar.Item.Title data-qa='sidebar-item-title' className={(unread && 'rcx-sidebar-item--highlighted') as string}>
 							{title}
 						</Sidebar.Item.Title>
 						{time && <Sidebar.Item.Time>{formatDate(time)}</Sidebar.Item.Time>}
 					</Sidebar.Item.Wrapper>
 				</Sidebar.Item.Content>
 				<Sidebar.Item.Content>
 					<Sidebar.Item.Wrapper>
-						<Sidebar.Item.Subtitle tabIndex='-1' className={unread && 'rcx-sidebar-item--highlighted'}>
-							{subtitle}
-						</Sidebar.Item.Subtitle>
+						<Sidebar.Item.Subtitle className={(unread && 'rcx-sidebar-item--highlighted') as string}>{subtitle}</Sidebar.Item.Subtitle>
 						<Sidebar.Item.Badge>{badges}</Sidebar.Item.Badge>
 						{menu && (
 							<Sidebar.Item.Menu {...handleMenuEvent}>

apps/meteor/client/sidebar/Item/ExtendedSkeleton.js → apps/meteor/client/sidebar/Item/ExtendedSkeleton.tsx

@@ -1,9 +1,9 @@
 import { Box, Skeleton } from '@rocket.chat/fuselage';
-import React from 'react';
+import React, { VFC } from 'react';
 
 import Extended from './Extended';
 
-const ExtendedSkeleton = ({ showAvatar }) => (
+const ExtendedSkeleton: VFC<{ showAvatar: boolean }> = ({ showAvatar }) => (
 	<Box height='x44'>
 		<Extended
 			title={<Skeleton width='100%' />}

apps/meteor/client/sidebar/Item/Medium.js → apps/meteor/client/sidebar/Item/Medium.tsx

@@ -1,8 +1,22 @@
 import { Sidebar, ActionButton } from '@rocket.chat/fuselage';
 import { useMutableCallback, usePrefersReducedMotion } from '@rocket.chat/fuselage-hooks';
-import React, { memo, useState } from 'react';
+import React, { memo, useState, VFC } from 'react';
 
-const Medium = ({ icon, title = '', titleIcon, avatar, actions, href, menuOptions, badges, unread, threadUnread, menu, ...props }) => {
+type MediumProps = {
+	title: React.ReactNode;
+	titleIcon?: React.ReactNode;
+	avatar: React.ReactNode | boolean;
+	icon?: string;
+	actions?: React.ReactNode;
+	href?: string;
+	unread?: boolean;
+	menu?: () => React.ReactNode;
+	badges?: React.ReactNode;
+	selected?: boolean;
+	menuOptions?: any;
+};
+
+const Medium: VFC<MediumProps> = ({ icon, title = '', avatar, actions, href, badges, unread, menu, ...props }) => {
 	const [menuVisibility, setMenuVisibility] = useState(!!window.DISABLE_ANIMATION);
 
 	const isReduceMotionEnabled = usePrefersReducedMotion();
@@ -15,12 +29,12 @@ const Medium = ({ icon, title = '', titleIcon, avatar, actions, href, menuOption
 	};
 
 	return (
-		<Sidebar.Item {...props} href={href} clickable={!!href}>
+		<Sidebar.Item {...props} {...({ href } as any)} clickable={!!href}>
 			{avatar && <Sidebar.Item.Avatar>{avatar}</Sidebar.Item.Avatar>}
 			<Sidebar.Item.Content>
 				<Sidebar.Item.Wrapper>
 					{icon}
-					<Sidebar.Item.Title data-qa='sidebar-item-title' className={unread && 'rcx-sidebar-item--highlighted'}>
+					<Sidebar.Item.Title data-qa='sidebar-item-title' className={(unread && 'rcx-sidebar-item--highlighted') as string}>
 						{title}
 					</Sidebar.Item.Title>
 				</Sidebar.Item.Wrapper>

apps/meteor/client/sidebar/Item/skeletons/CondensedSkeleton.js → apps/meteor/client/sidebar/Item/skeletons/CondensedSkeleton.tsx

@@ -1,9 +1,9 @@
 import { Box, Skeleton } from '@rocket.chat/fuselage';
-import React from 'react';
+import React, { VFC } from 'react';
 
 import Condensed from '../Condensed';
 
-const CondensedSkeleton = ({ showAvatar }) => (
+const CondensedSkeleton: VFC<{ showAvatar: boolean }> = ({ showAvatar }) => (
 	<Box height='x28'>
 		<Condensed
 			title={<Skeleton width='100%' />}

apps/meteor/client/sidebar/Item/skeletons/MediumSkeleton.js → apps/meteor/client/sidebar/Item/skeletons/MediumSkeleton.tsx

@@ -1,9 +1,9 @@
 import { Box, Skeleton } from '@rocket.chat/fuselage';
-import React from 'react';
+import React, { VFC } from 'react';
 
 import Medium from '../Medium';
 
-const MediumSkeleton = ({ showAvatar }) => (
+const MediumSkeleton: VFC<{ showAvatar: boolean }> = ({ showAvatar }) => (
 	<Box height='x36'>
 		<Medium
 			title={<Skeleton width='100%' />}