diff --git a/src/client/chat--left.scss b/src/client/chat--left.scss index 1f8ff7c..517b5a3 100644 --- a/src/client/chat--left.scss +++ b/src/client/chat--left.scss @@ -11,7 +11,7 @@ } .left.open { - width: 18em; + width: 25em; } .bar__brandItem .muted { diff --git a/src/client/chat--right.jsx b/src/client/chat--right.jsx index 82b8f70..d71525a 100644 --- a/src/client/chat--right.jsx +++ b/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 = [ - { - icon: '🙃', - label: 'Present', - }, - ] - .concat(ids.length > 0 ? [{icon: '☢️', label: 'Blocked'}] : []); + const buttons = [] + .concat(channelUsers.length > 0 ? [{icon: '🙃', label: 'Present'}] : []) + .concat(blockedIds.length > 0 ? [{icon: '☢️', label: 'Blocked'}] : []); + if (0 === buttons.length) { + return null; + } return (
- {0 === active &&