fix: alexweininger#4 pinned or saved files

dist/index.html

@@ -8,6 +8,7 @@
   <div class="tab-header">
     <button id="online-tab-link" class="tablinks">Online</button>
     <button id="local-tab-link" class="tablinks">Local</button>
+    <button id="pinned-tab-link" class="tablinks"><img src="assets/thumbtack-solid.svg" id="pinned-icon"></button>
   </div>
   <div class="tabcontent-container">
     <div id="online" class="tabcontent">
@@ -22,6 +23,12 @@
         </ul>
       </div>
     </div>
+    <div id="pinned" class="tabcontent">
+      <div id="pinned-div">
+        <ul id="pinned-list">
+        </ul>
+      </div>
+    </div>
     <div id="settings" class="tabcontent">
       <div id="settings-div">
         <p>Settings coming soon!</p>

dist/style.css

@@ -25,7 +25,7 @@ body {
 #more_icon {
 	width: 32px;
 	height: 32px;
-	margin-top: 8px;
+	margin-top: 0px;
 }
 
 #more_icon:hover {
@@ -38,7 +38,7 @@ body {
 	background-color: #f1f1f1;
 	border-bottom: 1px solid #ddd;
 	display: grid;
-	grid-template-columns: 50% 50%;
+	grid-template-columns: 45% 45% 10%;
 	height: 32px;
 	margin: 0;
 	overflow: hidden;
@@ -121,6 +121,7 @@ div.left {
 
 
 #link-list,
+#pinned-list,
 #file-list {
 	display: inline-block;
 	font-size: 14px;
@@ -221,6 +222,32 @@ li {
 	height: 16px;
 }
 
+#pinned-icon {
+	width: 20px;
+	height: 20px;
+	display: flex;
+	align-items: center;
+}
+
+#pin_icon_online {
+	width: 20px;
+	height: 20px;
+	margin-top: 15px;
+}
+
+#pin_icon_local {
+	width: 20px;
+	height: 20px;
+	margin: 0 0 0 3px;
+}
+
+#remove_icon {
+	width: 20px;
+	height: 20px;
+	margin-top: 15px;
+}
+
+
 #online-count-display {
 	height: inherit;
 	margin: 0 0 0 3px;

package.json

@@ -24,6 +24,9 @@
     "webpack-merge": "~4.1.4"
   },
   "dependencies": {
-    "chrome-options": "^1.0.0"
+    "@types/lodash": "^4.14.144",
+    "@types/node": "^12.11.5",
+    "chrome-options": "^1.0.0",
+    "lodash": "^4.17.15"
   }
 }