Gekidou - Sidebar UI components (#5955)

* Squash, rebase, test fixes

* PR Feedback addressed

* fix snapshot tests with SafeAreaProvider

* Addresses feedback

* Adds Category & Channel error

* Tests fixed

* MyChannel count

* finalize DM and GM avatars and icon as well as other small fixes

Co-authored-by: Elias Nahum <nahumhbl@gmail.com>

app/components/channel_icon/dm_avatar/dm_avatar.tsx

@@ -0,0 +1,37 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+
+import ProfilePicture from '@components/profile_picture';
+import {useTheme} from '@context/theme';
+import {makeStyleSheetFromTheme} from '@utils/theme';
+
+import type UserModel from '@typings/database/models/servers/user';
+
+type Props = {
+    author?: UserModel;
+}
+
+const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
+    status: {
+        backgroundColor: theme.sidebarBg,
+        borderWidth: 0,
+    },
+}));
+
+const DmAvatar = ({author}: Props) => {
+    const theme = useTheme();
+    const style = getStyleSheet(theme);
+    return (
+        <ProfilePicture
+            author={author}
+            size={24}
+            showStatus={true}
+            statusSize={12}
+            statusStyle={style.status}
+        />
+    );
+};
+
+export default DmAvatar;