const HorizontalSeparatorLine = styled.div` background-color: "#BF4F74"; width: 317px; height: 1px; background-color: #282933; margin-top: 1rem; margin-bottom: 1rem; `; const SideMenu = styled.div` background-color: #0e0e10; padding-top: 1rem; width: 317px; `; const users = props.usersList.map((u) => ({ ...u, unreadMessages: props.unreadMessages.chats[u.id] || 0, })); const channels = props.channelList.map((c) => ({ ...c, unreadMessages: props.unreadMessages.channels[c.name] || 0, })); return ( <SideMenu> <Widget src={`${props.componentOwnerId}/widget/Calimero.Curb.SideSelector.ChannelsHeader`} props={{ title: "Channel", onChange: () => props.onChangeChannelDialog(!props.openCreateChannel), }} /> <Widget src={`${props.componentOwnerId}/widget/Calimero.Curb.SideSelector.ChannelList`} props={{ channels: channels, selectChannel: (id) => { props.onChangeChannelSettings(-1); props.onChannelSelected(id); props.onChangeDMSelected(""); }, selectedChannelId: props.selectedChannel, componentOwnerId: props.componentOwnerId, }} /> <HorizontalSeparatorLine /> <Widget src={`${props.componentOwnerId}/widget/Calimero.Curb.SideSelector.DMSideSelector`} props={{ componentOwnerId: props.componentOwnerId, onChange: () => props.onChangeOpenDMs(!props.directMessagesOpen), open: props.directMessagesOpen, users: users, onSelectDM: (id) => { props.onChangeChannelSettings(-1); props.onChannelSelected(-1); props.onChangeDMSelected(id); }, selectedDM: props.selectedDM, }} /> </SideMenu> );