add option to remove item.

src/index.html

@@ -354,6 +354,7 @@
 		.saved-item-tile {
 			padding: 20px;
 			background-color: #2f302b;
+			position: relative;
 			/*border: 1px solid rgba(255,255,255,0.1);*/
 			margin: 20px 0;
 			display: block;
@@ -363,6 +364,12 @@
 		.saved-item-tile:hover {
 			background: rgba(255,255,255,0.1);
 		}
+		.saved-item-tile__close-btn {
+			padding: 20px;
+			position: absolute;
+			right: -5px;
+			top: -5px;
+		}
 		.saved-items-pane__container {
 			overflow-y: scroll;
     		max-height: calc(100vh - 90px);
@@ -472,6 +479,7 @@
 			padding: 10px;
 			background: #9f3b4e;
 			border-radius: 3px;
+			z-index: 6;
 			transform: translateY(-100%);
 			transition: 0.3s ease;
 		}

src/script.js

@@ -115,7 +115,7 @@
 		} else {
 			options.sizes = [ 33.33, 33.33, 33.33 ];
 		}
-		console.log('reset spliiting', options.sizes)
+		utils.log('reset spliiting', options.sizes)
 		codeSplitInstance = Split(['#js-html-code', '#js-css-code', '#js-js-code'], options);
 		mainSplitInstance = Split(['#js-code-side', '#js-demo-side' ], {
 			direction: (currentLayoutMode === 2 ? 'vertical' : 'horizontal'),
@@ -125,7 +125,7 @@
 	}
 	function toggleLayout(mode) {
 		if (currentLayoutMode === mode) {
-			console.log('setsize', currentItem.sizes || [ 33.33, 33.33, 33.33 ]);
+			utils.log('setsize', currentItem.sizes || [ 33.33, 33.33, 33.33 ]);
 			codeSplitInstance.setSizes(currentItem.sizes || [ 33.33, 33.33, 33.33 ]);
 			currentLayoutMode = mode;
 			return;
@@ -165,7 +165,7 @@
 				chrome.storage.local.set({
 					items: result.items
 				});
-			})
+			});
 		}
 	}
 
@@ -204,16 +204,20 @@
 	}
 
 	function populateItemsInSavedPane(items) {
-		if (!items || !items.length) { return; }
 		var html = '';
-		// TODO: sort desc. by updation date
+		if (items.length) {
-		items.sort(function (a, b) {
+			// TODO: sort desc. by updation date
-			return b.updatedOn - a.updatedOn;
+			items.sort(function (a, b) {
-		});
+				return b.updatedOn - a.updatedOn;
-		items.forEach(function (item) {
+			});
-			html += '<a class="js-saved-item-tile saved-item-tile" data-item-id="' + item.id + '">'
+			items.forEach(function (item) {
-				+ '<h3>' + item.title + '</h3><span>Last updated: ' + item.updatedOn + '</span></a>';
+				html += '<div class="js-saved-item-tile saved-item-tile" data-item-id="' + item.id + '">'
-		})
+					+ '<a class="js-saved-item-tile__close-btn  saved-item-tile__close-btn">X</a>'
+					+ '<h3>' + item.title + '</h3><span>Last updated: ' + item.updatedOn + '</span></div>';
+			});
+		} else {
+			html += 'Nothing saved here.'
+		}
 		savedItemsPane.querySelector('#js-saved-items-wrap').innerHTML = html;
 		toggleSavedItemsPane();
 	}
@@ -228,8 +232,12 @@
 	}
 	function openSavedItemsPane() {
 		chrome.storage.local.get('items', function (result) {
-			var itemIds = Object.getOwnPropertyNames(result.items),
+			var itemIds = Object.getOwnPropertyNames(result.items || {}),
 				items = [];
+			if (!itemIds.length) {
+				populateItemsInSavedPane([]);
+				return;
+			}
 
 			savedItems = savedItems || [];
 			for (var i = 0; i < itemIds.length; i++) {
@@ -265,6 +273,28 @@
 		refreshEditor();
 		alertsService.add('Saved item loaded');
 	}
+	function removeItem(itemId) {
+		var itemTile = document.querySelector('.js-saved-item-tile[data-item-id="' + itemId + '"]');
+		itemTile.remove();
+		// Remove from items list
+		chrome.storage.local.get({
+			items: {}
+		}, function (result) {
+			delete result.items[itemId]
+			chrome.storage.local.set({
+				items: result.items
+			});
+		});
+
+		// Remove individual item too.
+		chrome.storage.local.remove(itemId, function () {
+			alertsService.add('Item removed.');
+			// This item is open in the editor. Lets open a new one.
+			if (currentItem.id === itemId) {
+				createNewItem();
+			}
+		});
+	}
 
 	function refreshEditor() {
 		titleInput.value = currentItem.title || 'Untitled';
@@ -628,6 +658,10 @@
 				openItem(e.target.dataset.itemId);
 				toggleSavedItemsPane();
 			}
+			if (e.target.classList.contains('js-saved-item-tile__close-btn')) {
+				utils.log('removing', e.target.parentElement)
+				removeItem(e.target.parentElement.dataset.itemId);
+			}
 		});
 
 		titleInput.addEventListener('blur', function () {