flow: safety, ui, sizing

src/client/chat--left.scss

@@ -11,7 +11,7 @@
 }
 
 .left.open {
-  width: 18em;
+  width: 25em;
 }
 
 .bar__brandItem .muted {

src/client/chat--right.jsx

@@ -4,6 +4,7 @@ import classnames from 'classnames';
 import React, {useState} from 'react';
 import {useSelector} from 'react-redux';
 
+import {channelUsersSelector} from '~/common/state/chat';
 import {blockedSelector} from '~/common/state/user';
 
 import useBreakpoints from '~/client/hooks/useBreakpoints';
@@ -18,16 +19,16 @@ export default function ChatRight() {
   const [active, setActive] = useState(0);
   const [isOpen, setIsOpen] = useState(false);
   const channel = useChannel();
-  const ids = useSelector((state) => blockedSelector(state, channel));
+  const blockedIds = useSelector((state) => blockedSelector(state, channel));
+  const channelUsers = useSelector((state) => channelUsersSelector(state, channel));
   const toggleOpen = () => setIsOpen(!isOpen);
   const showsAsOpen = isOpen || desktop || !tablet;
-  const buttons = [
+  const buttons = []
-    {
+    .concat(channelUsers.length > 0 ? [{icon: '🙃', label: 'Present'}] : [])
-      icon: '🙃',
+    .concat(blockedIds.length > 0 ? [{icon: '☢️', label: 'Blocked'}] : []);
-      label: 'Present',
+  if (0 === buttons.length) {
-    },
+    return null;
-  ]
+  }
-    .concat(ids.length > 0 ? [{icon: '☢️', label: 'Blocked'}] : []);
   return (
     <div
       className={classnames('right', 'flexed', showsAsOpen ? 'open' : 'closed')}
@@ -42,8 +43,8 @@ export default function ChatRight() {
           setActive(active);
         }}
       />
-      {0 === active && <ChatRightUsers />}
+      {0 === active && channelUsers.length > 0 && <ChatRightUsers />}
-      {1 === active && ids.length > 0 && <ChatRightBlocked ids={ids} />}
+      {1 === active && blockedIds.length > 0 && <ChatRightBlocked blockedIds={blockedIds} />}
     </div>
   );
 }

src/client/chat--right.scss

@@ -11,7 +11,7 @@
 }
 
 .right.open {
-  width: 18em;
+  width: 25em;
 }
 
 .right__buttons {

src/common/state/chat.js

@@ -15,7 +15,7 @@ export const channelSelector = createSelector(
 
 export const channelUsersSelector = createSelector(
   [channelSelector],
-  ({users}) => users,
+  (channel) => (channel ? channel.users : []),
 );
 
 export const messagesSelector = (state) => state.chat.messages;