add button for chat channel settings

src/components/Chat.jsx

@@ -16,6 +16,7 @@ import { MAX_CHAT_MESSAGES } from '../core/constants';
 
 import {
   showUserAreaModal,
+  showChatModal,
   setChatChannel,
   fetchChatMessages,
   setChatInputMessage,
@@ -29,6 +30,7 @@ function escapeRegExp(string) {
 }
 
 const Chat = ({
+  showExpand,
   channels,
   messages,
   chatChannel,
@@ -40,11 +42,14 @@ const Chat = ({
   fetchMessages,
   fetching,
   blocked,
+  triggerModal,
 }) => {
   const listRef = useRef();
+  const targetRef = useRef();
   const [selection, setSelection] = useState(null);
   const [nameRegExp, setNameRegExp] = useState(null);
   const [blockedIds, setBlockedIds] = useState([]);
+  const [btnSize, setBtnSize] = useState(20);
 
   const { stayScrolled } = useStayScrolled(listRef, {
     initialScroll: Infinity,
@@ -77,6 +82,13 @@ const Chat = ({
     setNameRegExp(regExp);
   }, [ownName]);
 
+  useEffect(() => {
+    setTimeout(() => {
+      const fontSize = Math.round(targetRef.current.offsetHeight / 10);
+      setBtnSize(Math.min(28, fontSize));
+    }, 330);
+  }, [targetRef]);
+
   useEffect(() => {
     const bl = [];
     for (let i = 0; i < blocked.length; i += 1) {
@@ -112,8 +124,36 @@ const Chat = ({
   }
 
   return (
-    <div style={{ display: 'relative', width: '100%', height: '100%' }}>
+    <div
-      <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+      ref={targetRef}
+      style={{
+        display: 'flex',
+        position: 'relative',
+        width: '100%',
+        height: '100%',
+        flexDirection: 'column',
+        height: '100%',
+      }}
+    >
+      <div
+        className="chatlink"
+        style={{
+          fontSize: btnSize,
+        }}
+      >
+        <span
+          role="button"
+          tabIndex={-1}
+        >⚙</span>
+        &nbsp;
+        {(showExpand) &&
+          <span
+            onClick={triggerModal}
+            role="button"
+            tabIndex={-1}
+          >↷</span>
+        }
+      </div>
       <ul
         className="chatarea"
         ref={listRef}
@@ -180,7 +220,6 @@ const Chat = ({
         </div>
       )}
     </div>
-    </div>
   );
 };
 
@@ -212,6 +251,9 @@ function mapDispatchToProps(dispatch) {
     open() {
       dispatch(showUserAreaModal());
     },
+    triggerModal() {
+      dispatch(showChatModal(true));
+    },
     setChannel(channelId) {
       dispatch(setChatChannel(channelId));
     },

src/components/ChatBox.jsx

@@ -40,13 +40,7 @@ function ChatBox({
         className={(chatOpen && render) ? 'chatbox show' : 'chatbox'}
         onTransitionEnd={onTransitionEnd}
       >
-        <div
+        <Chat showExpand={true} />
-          id="chatlink"
-          onClick={triggerModal}
-          role="button"
-          tabIndex={-1}
-        >↷</div>
-        <Chat />
       </div>
     )
   );

src/routes/api/startdm.js

@@ -60,7 +60,7 @@ async function startDm(req: Request, res: Response) {
     });
     return;
   }
-  if (blockDm) {
+  if (targetUser.blockDm) {
     res.status(401);
     res.json({
       errors: ['Target user doesn\'t allo DMs'],

src/styles/dark-round.css

@@ -102,7 +102,7 @@ tr:nth-child(even) {
   color: #94ff94;
 }
 
-#chatlink {
+.chatlink {
   color: #f9edde;
 }
 

src/styles/dark.css

@@ -99,7 +99,7 @@ tr:nth-child(even) {
   color: #94ff94;
 }
 
-#chatlink {
+.chatlink {
   color: #f9edde;
 }
 

src/styles/default.css

@@ -473,13 +473,15 @@ tr:nth-child(even) {
   margin-left: 5px;
   margin-right: 5px;
 }
-#chatlink {
+.chatlink {
   position: absolute;
-  font-weight: bold;
-  font-size: 20px;
-  right: 17px;
   top: 5px;
+  right: 17px;
+  font-weight: bold;
   color: #4a4a49; 
+  transition: font-size 0.2s;
+}
+.chatlink > span {
   cursor: pointer;
 }