display tab pinned status

Author: lxieyang

package.json

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

src/pages/Sidebar/Sidebar.jsx

@@ -98,6 +98,7 @@ class Sidebar extends Component {
           faviconUrl: tab.faviconUrl,
           title: tab.title,
           url: tab.url,
+          pinned: tab.pinned,
           status: 'complete',
           combinedText: [
             tab.title, // title
@@ -111,7 +112,6 @@ class Sidebar extends Component {
           id: tab.id,
           index: tab.index,
           active: tab.active,
-          pinned: tab.pinned,
           muted: tab.muted,
         });
         if (tab.active) {
@@ -120,7 +120,6 @@ class Sidebar extends Component {
               id: tab.id,
               index: tab.index,
               active: tab.active,
-              pinned: tab.pinned,
               muted: tab.muted,
             },
           });
@@ -153,6 +152,7 @@ class Sidebar extends Component {
       faviconUrl: favicon,
       title: tab.title,
       url: tab.url,
+      pinned: tab.pinned,
       status: tab.status,
       combinedText: [
         tab.title, // title
@@ -182,7 +182,6 @@ class Sidebar extends Component {
           id: tab.id,
           index: tab.index,
           active: tab.active,
-          pinned: tab.pinned,
           muted: tab.muted,
         };
         tabOrders.push(tabObj);
@@ -201,7 +200,12 @@ class Sidebar extends Component {
   };
 
   handleTabUpdated = (tabId, changes, tab) => {
-    if (changes.status === 'complete' || changes.title) {
+    if (
+      changes.status === 'complete' ||
+      changes.title ||
+      changes.pinned === true ||
+      changes.pinned === false
+    ) {
       this.updateTabsDictWithTab(tab, getFavicon(tab.url));
       if (changes.status === 'complete') {
         setTimeout(() => {

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

@@ -46,6 +46,8 @@
   /* border-radius: 6px; */
 
   transition: 0.1s all ease-in;
+
+  position: relative;
 }
 
 .ActiveTabContainer {
@@ -56,6 +58,22 @@
   background-color: rgb(244, 245, 247);
 }
 
+.PinnedIconContainer {
+  position: absolute;
+  top: -3px;
+  left: 1px;
+  padding-left: 1px;
+  padding-top: 0px;
+}
+
+.PinnedIcon {
+  width: 8px;
+  height: 8px;
+  opacity: 0.7;
+  color: rgb(66, 66, 66);
+  transform: rotate(-45deg);
+}
+
 .TabFaviconContainer {
   flex-shrink: 0;
   margin-right: 8px;

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

@@ -8,6 +8,7 @@ import { ContextMenu, MenuItem, ContextMenuTrigger } from 'react-contextmenu';
 
 import { MdClose } from 'react-icons/md';
 import { MdRefresh } from 'react-icons/md';
+import { FaThumbtack } from 'react-icons/fa';
 
 import './Tab.css';
 
@@ -174,7 +175,12 @@ const Tab = ({
                     : null,
                 ].join(' ')}
               >
-                {/* <div className="Ordinal">{tabOrder.index + 1}</div> */}
+                {pinned && (
+                  <div className="PinnedIconContainer">
+                    <FaThumbtack className="PinnedIcon" />
+                  </div>
+                )}
+
                 <div className="TabFaviconContainer">
                   {status === 'loading' ? (
                     <Loader