refactor(react): sidebar components structure

packages/status-react/src/components/main-sidebar/components/channels/channel-item.tsx

@@ -3,9 +3,9 @@ import React from 'react'
 import { BellIcon } from '~/src/icons/bell-icon'
 import { ContextMenu, ContextMenuTrigger } from '~/src/system/context-menu'
 
-import { SidebarItem } from './sidebar-item'
+import { SidebarItem } from '../sidebar-item'
 
-import type { SidebarItemProps } from './sidebar-item'
+import type { SidebarItemProps } from '../sidebar-item'
 
 interface Props extends SidebarItemProps {
   children: string

packages/status-react/src/components/main-sidebar/components/channels/index.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+
+import { Box } from '~/src/system'
+
+import { ChannelGroup } from './channel-group'
+import { ChannelItem } from './channel-item'
+
+const CHANNELS = {
+  Public: ['welcome', 'general', 'random'],
+  Other: ['random', 'general', 'welcome'],
+}
+
+export const Channels = () => {
+  return (
+    <Box>
+      {Object.entries(CHANNELS).map(([group, channels]) => (
+        <ChannelGroup key={group} name={group}>
+          {channels.map(channel => (
+            <ChannelItem
+              key={group + channel}
+              to={`/${channel}`}
+              unread={channel === 'general'}
+              muted={channel === 'random'}
+            >
+              {channel}
+            </ChannelItem>
+          ))}
+        </ChannelGroup>
+      ))}
+    </Box>
+  )
+}

packages/status-react/src/components/main-sidebar/components/community-info/index.tsx

@@ -0,0 +1,41 @@
+import React from 'react'
+
+import { useCommunity } from '~/src/protocol/use-community'
+import { styled } from '~/src/styles/config'
+import { Avatar } from '~/src/system/avatar'
+import { DialogTrigger } from '~/src/system/dialog'
+import { Text } from '~/src/system/text'
+
+import { CommunityDialog } from './community-dialog'
+
+export const CommunityInfo = () => {
+  const { name, imageUrl, membersCount } = useCommunity()
+
+  return (
+    <DialogTrigger>
+      <Button>
+        <Avatar size={36} src={imageUrl} />
+        <div>
+          <Text>{name}</Text>
+          <Text color="gray" size={12}>
+            {membersCount} members
+          </Text>
+        </div>
+      </Button>
+      <CommunityDialog />
+    </DialogTrigger>
+  )
+}
+
+const Button = styled('button', {
+  padding: '4px 6px',
+  display: 'inline-flex',
+  alignSelf: 'flex-start',
+  gap: '$2',
+  borderRadius: 8,
+  alignItems: 'center',
+
+  '&:hover': {
+    background: '#E9EDF1',
+  },
+})

packages/status-react/src/components/main-sidebar/components/messages/chat-item.tsx

@@ -3,9 +3,9 @@ import React from 'react'
 import { BellIcon } from '~/src/icons/bell-icon'
 import { ContextMenu, ContextMenuTrigger } from '~/src/system'
 
-import { SidebarItem } from './sidebar-item'
+import { SidebarItem } from '../sidebar-item'
 
-import type { SidebarItemProps } from './sidebar-item'
+import type { SidebarItemProps } from '../sidebar-item'
 
 interface Props extends SidebarItemProps {
   children: string

packages/status-react/src/components/main-sidebar/components/messages/index.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+
+import { EditIcon } from '~/src/icons/edit-icon'
+import { Box } from '~/src/system'
+import { Grid } from '~/src/system/grid'
+import { Heading } from '~/src/system/heading'
+import { IconButton } from '~/src/system/icon-button'
+
+import { ChatItem } from './chat-item'
+
+const CHATS = ['vitalik.eth', 'pvl.eth', 'Climate Change']
+
+export const Messages = () => {
+  return (
+    <Box>
+      <Grid
+        flow="column"
+        align="center"
+        justify="between"
+        css={{ marginBottom: 16 }}
+      >
+        <Heading weight="600">Messages</Heading>
+        <IconButton label="New Chat" to="/new">
+          <EditIcon />
+        </IconButton>
+      </Grid>
+      {CHATS.map(chat => (
+        <ChatItem key={chat} to={`/${chat}`} unread={false} muted={false}>
+          {chat}
+        </ChatItem>
+      ))}
+    </Box>
+  )
+}

packages/status-react/src/components/main-sidebar/index.tsx

@@ -1,81 +1,21 @@
 import React from 'react'
 
-import { EditIcon } from '~/src/icons/edit-icon'
 import { styled } from '~/src/styles/config'
-import { Box } from '~/src/system'
-import { Avatar } from '~/src/system/avatar'
-import { DialogTrigger } from '~/src/system/dialog'
-import { Grid } from '~/src/system/grid'
-import { Heading } from '~/src/system/heading'
-import { IconButton } from '~/src/system/icon-button'
-import { Text } from '~/src/system/text'
 
-import { ChannelGroup } from './channel-group'
-import { ChannelItem } from './channel-item'
-import { ChatItem } from './chat-item'
-import { CommunityDialog } from './community-dialog'
-
-const CHANNELS = {
-  Public: ['welcome', 'general', 'random'],
-  Other: ['random', 'general', 'welcome'],
-}
-
-const CHATS = ['vitalik.eth', 'pvl.eth', 'Climate Change']
+import { Channels } from './components/channels'
+import { CommunityInfo } from './components/community-info'
+import { GetStarted } from './components/get-started'
+import { Messages } from './components/messages'
 
 export const MainSidebar = () => {
   return (
     <Wrapper>
-      <DialogTrigger>
-        <IdentityWrapper>
-          <Avatar size={36} />
-          <div>
-            <Text>CryptoKitties</Text>
-            <Text color="gray" size={12}>
-              186 members
-            </Text>
-          </div>
-        </IdentityWrapper>
-        <CommunityDialog
-          title="Crypto Kitties"
-          description="A community of cat lovers, meow!"
-        />
-      </DialogTrigger>
-
-      {Object.entries(CHANNELS).map(([group, channels]) => (
-        <ChannelGroup key={group} name={group}>
-          {channels.map(channel => (
-            <ChannelItem
-              key={group + channel}
-              to={`/${channel}`}
-              unread={channel === 'general'}
-              muted={channel === 'random'}
-            >
-              {channel}
-            </ChannelItem>
-          ))}
-        </ChannelGroup>
-      ))}
-
+      <CommunityInfo />
+      <Channels />
       <Separator />
-
-      <Box>
-        <Grid
-          flow="column"
-          align="center"
-          justify="between"
-          css={{ marginBottom: 16 }}
-        >
-          <Heading weight="600">Messages</Heading>
-          <IconButton label="New Chat" to="/new">
-            <EditIcon />
-          </IconButton>
-        </Grid>
-        {CHATS.map(chat => (
-          <ChatItem key={chat} to={`/${chat}`} unread={false} muted={false}>
-            {chat}
-          </ChatItem>
-        ))}
-      </Box>
+      <Messages />
+      <Separator />
+      <GetStarted />
     </Wrapper>
   )
 }
@@ -99,16 +39,3 @@ const Separator = styled('div', {
   height: 1,
   background: 'rgba(0, 0, 0, 0.1)',
 })
-
-const IdentityWrapper = styled('button', {
-  padding: '4px 6px',
-  display: 'inline-flex',
-  alignSelf: 'flex-start',
-  gap: '$2',
-  borderRadius: 8,
-  alignItems: 'center',
-
-  '&:hover': {
-    background: '#E9EDF1',
-  },
-})