add message viz toggle component to be able to toggle one chat message at a time; address https://github.com/owncast/owncast/issues/568

web/pages/chat.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { Table, Typography, Tooltip, Button } from "antd";
-import { CheckCircleFilled, ExclamationCircleFilled, StopOutlined } from "@ant-design/icons";
+import { CheckCircleFilled, ExclamationCircleFilled } from "@ant-design/icons";
 import classNames from 'classnames';
 import { ColumnsType } from 'antd/es/table';
 import format from 'date-fns/format'
@@ -8,6 +8,7 @@ import format from 'date-fns/format'
 import { CHAT_HISTORY, fetchData, FETCH_INTERVAL, UPDATE_CHAT_MESSGAE_VIZ } from "../utils/apis";
 import { MessageType } from '../types/chat';
 import { isEmptyObject } from "../utils/format";
+import MessageVisiblityToggle from "./components/message-visiblity-toggle";
 
 const { Title } = Typography;
 
@@ -80,6 +81,11 @@ export default function Chat() {
     },
   };
 
+  const updateMessage = message => {		
+    const messageIndex = messages.findIndex(m => m.id === message.id);	
+    messages.splice(messageIndex, 1, message)		
+    setMessages([...messages]);		
+  };
 
   const resetBulkOutcome = () => {
     outcomeTimeout = setTimeout(() => {
@@ -179,7 +185,13 @@ export default function Chat() {
       className: 'toggle-col',
       filters: [{ text: 'Visible messages', value: true }, { text: 'Hidden messages', value: false }],
       onFilter: (value, record) => record.visible === value,
-      render: visible => visible ? null : <StopOutlined title="This message is hidden" />,
+      render: (visible, record) => (
+        <MessageVisiblityToggle
+          isVisible={visible}
+          message={record}
+          setMessage={updateMessage}
+        />
+      ),
       width: 30,
     },
   ];
@@ -235,4 +247,3 @@ export default function Chat() {
   </div>)
 }
 
-

web/styles/chat.scss

@@ -4,13 +4,12 @@
     min-width: 20px;
   }
   .ant-table-tbody > tr > td {
-    transition: background 0.15s;
+    transition: background-color 0.15s;
   }
   .ant-table-row.hidden {
     .ant-table-cell {
-      color: #444450; 
+      color: rgba(0,0,0,.25)
     }
-
   }
   .ant-table-cell {
     font-size: 12px;
@@ -43,16 +42,18 @@
   .bulk-editor {
     margin: .5rem 0;
     padding: .5rem;
-    border: 1px solid #333;
+    border: 1px solid #ccc;
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: flex-end;
     border-radius: 4px;
+    opacity: .5;
 
     &.active {
+      opacity: 1;
       .label {
-        color: #ccc;
+        color: #000;
       }
     }
 
@@ -79,8 +80,28 @@
   align-items: center;
   flex-wrap: nowrap;
   justify-content: flex-end;
+  transition: opacity .15s;
 
   .outcome-icon {
     margin-right: .5rem;
   }
+  &.hidden {
+    opacity: .25;
+    &:hover {
+      opacity: 1;
+    }
+  }
+  .ant-btn {
+    .anticon {
+      opacity: .5;
+    }
+    &:hover {
+      .anticon {
+        opacity: 1;
+      }
+    }
+  }
+  .ant-btn-text:hover {
+    background-color: rgba(0,0,0,.1)
+  }
 }

web/styles/globals.scss

@@ -71,6 +71,10 @@ code {
     background-color: rgb(44,44,44) !important;
     color:lightgrey !important;
   }
+.ant-btn {
+  transition-duration: .15s;
+  transition-delay: 0s;
+}
 
   // Hide extra toolbar buttons.
   .button-type-undo, .button-type-redo, .button-type-clear, .button-type-image, .button-type-wrap, .button-type-quote, .button-type-strikethrough, .button-type-code-inline, .button-type-code-block {