display muted status

Author: lxieyang

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vertical-tabs-chrome-extension",
-  "version": "1.5.1",
+  "version": "1.5.2",
   "description": "A chrome extension that presents your tabs vertically.",
   "license": "MIT",
   "repository": {

src/pages/Sidebar/Sidebar.jsx

@@ -106,21 +106,21 @@ class Sidebar extends Component {
           ]
             .join(' ')
             .toLowerCase(),
+          mutedInfo: tab.mutedInfo,
+          audible: tab.audible,
         };
 
         tabOrders.push({
           id: tab.id,
           index: tab.index,
           active: tab.active,
-          muted: tab.muted,
         });
         if (tab.active) {
           this.setState({
             activeTab: {
               id: tab.id,
               index: tab.index,
               active: tab.active,
-              muted: tab.muted,
             },
           });
         }
@@ -160,6 +160,8 @@ class Sidebar extends Component {
       ]
         .join(' ')
         .toLowerCase(),
+      mutedInfo: tab.mutedInfo,
+      audible: tab.audible,
     };
     this.setState({ tabsDict });
   };
@@ -182,7 +184,6 @@ class Sidebar extends Component {
           id: tab.id,
           index: tab.index,
           active: tab.active,
-          muted: tab.muted,
         };
         tabOrders.push(tabObj);
         if (tab.active) {
@@ -204,7 +205,9 @@ class Sidebar extends Component {
       changes.status === 'complete' ||
       changes.title ||
       changes.pinned === true ||
-      changes.pinned === false
+      changes.pinned === false ||
+      changes.mutedInfo ||
+      changes.audible !== undefined
     ) {
       this.updateTabsDictWithTab(tab, getFavicon(tab.url));
       if (changes.status === 'complete') {

src/pages/Sidebar/containers/TabsList/Tab/Tab.css

@@ -61,7 +61,7 @@
   border-top-right-radius: 8px;
   /* border-radius: 6px; */
 
-  transition: 0.1s all ease-in;
+  transition: all 0.1s ease-in;
 
   position: relative;
 }
@@ -117,14 +117,34 @@
 .TabTitleContainer {
   flex: 1;
   min-width: 0;
+
+  display: flex;
+  align-items: center;
 }
 
 .TabTitle {
+  flex: 1;
+}
+
+.Truncated {
   white-space: nowrap;
   overflow-x: hidden;
   text-overflow: ellipsis;
 }
 
+.MutedIconContainer {
+  margin-left: 2px;
+  margin-right: 2px;
+  width: 16px;
+  height: 16px;
+  align-items: center;
+  color: rgb(124, 128, 130);
+}
+
+.MutedIconContainer.Dark {
+  color: rgb(190, 193, 198);
+}
+
 .Ordinal {
   width: 20px;
   text-align: right;

src/pages/Sidebar/containers/TabsList/Tab/Tab.jsx

@@ -9,6 +9,7 @@ import { ContextMenu, MenuItem, ContextMenuTrigger } from 'react-contextmenu';
 
 import { MdClose } from 'react-icons/md';
 import { MdRefresh } from 'react-icons/md';
+import { MdVolumeOff } from 'react-icons/md';
 import { FaThumbtack } from 'react-icons/fa';
 
 import './Tab.css';
@@ -19,7 +20,8 @@ const Tab = ({
   index,
   active,
   pinned,
-  muted,
+  mutedInfo,
+  audible,
   faviconUrl,
   title,
   url,
@@ -106,9 +108,9 @@ const Tab = ({
     chrome.tabs.update(id, { pinned: !pinned });
   };
 
-  const muteTabClickedHandler = (e, tabId) => {
-    chrome.tabs.update(id, { muted: !muted });
-  };
+  // const muteTabClickedHandler = (e, tabId) => {
+  //   chrome.tabs.update(id, { muted: !muted });
+  // };
 
   const closeTabClickedHandler = (e, tabId) => {
     e.stopPropagation();
@@ -212,13 +214,29 @@ const Tab = ({
                     />
                   )}
                 </div>
+
                 <div
                   className="TabTitleContainer"
                   title={displayTabInFull ? url : `${title}\n\n${url}`}
                 >
-                  <div className={displayTabInFull ? null : 'TabTitle'}>
+                  <div
+                    className={[
+                      'TabTitle',
+                      displayTabInFull ? null : 'Truncated',
+                    ].join(' ')}
+                  >
                     {title}
                   </div>
+                  {mutedInfo.muted && audible && (
+                    <div
+                      className={[
+                        'MutedIconContainer',
+                        isDark ? 'Dark' : null,
+                      ].join(' ')}
+                    >
+                      <MdVolumeOff size={'16px'} />
+                    </div>
+                  )}
                 </div>
 
                 <div

src/pages/Sidebar/containers/TabsList/TabsList.jsx

@@ -135,7 +135,8 @@ class TabsList extends Component {
                       index={tabOrder.index}
                       active={tabOrder.active}
                       pinned={tabOrder.pinned}
-                      muted={tabOrder.muted}
+                      mutedInfo={tabOrder.mutedInfo}
+                      audible={tabOrder.audible}
                       faviconUrl={tabOrder.faviconUrl}
                       title={tabOrder.title}
                       url={tabOrder.url}

src/pages/Sidebar/containers/TabsList/react-contextmenu.css

@@ -42,7 +42,6 @@
 .react-contextmenu-item:hover {
   color: #fff;
   background-color: rgb(31, 92, 209);
-  border-color: rgb(31, 92, 209);
 }
 
 .react-contextmenu-item:focus {