add search inside saved items pane. fixes #26

src/index.html

@@ -507,8 +507,8 @@
 		<div id="js-saved-items-pane" class="saved-items-pane">
 			<button class="btn  saved-items-pane__close-btn" id="js-saved-items-pane-close-btn">X</button>
 			<div class="flex flex-v-center" style="justify-content: space-between;">
-
 				<h3>My Library <span id="savedItemCountEl"></span></h3>
+
 				<div class="main-header__btn-wrap">
 					<a d-click="exportItems" href="" class="btn btn-icon">Export
 					</a>
@@ -516,8 +516,9 @@
 					</a>
 				</div>
 			</div>
-			<div id="js-saved-items-wrap" class="saved-items-pane__container">
+			<input type="" id="searchInput" class="search-input" d-input="onSearchInputChange" placeholder="Search your creations here...">
 
+			<div id="js-saved-items-wrap" class="saved-items-pane__container">
 			</div>
 		</div>
 

src/script.js

@@ -5,7 +5,7 @@ addLibraryModal, addLibraryModal, notificationsBtn, notificationsModal, notifica
 notificationsModal, notificationsBtn, codepenBtn, saveHtmlBtn, saveBtn, settingsBtn,
 onboardModal, settingsModal, notificationsBtn, onboardShowInTabOptionBtn, editorThemeLinkTag,
 onboardDontShowInTabOptionBtn, TextareaAutoComplete, savedItemCountEl, indentationSizeValueEl,
-runBtn
+runBtn, searchInput
 */
 /* eslint-disable no-extra-semi */
 ;(function (alertsService) {
@@ -70,6 +70,7 @@ runBtn
 		, prefs = {}
 		, codeInPreview = { html: null, css: null, js: null }
 		, isSavedItemsPaneOpen = false
+		, editorWithFocus
 
 		// DOM nodes
 		, frame = $('#demo-frame')
@@ -336,6 +337,13 @@ runBtn
 			savedItemsPane.classList.toggle('is-open');
 		}
 		isSavedItemsPaneOpen = savedItemsPane.classList.contains('is-open');
+		if (isSavedItemsPaneOpen) {
+			searchInput.focus();
+		} else {
+			searchInput.value = '';
+			// Give last focused editor, focus again
+			editorWithFocus.focus();
+		}
 		document.body.classList[isSavedItemsPaneOpen ? 'add' : 'remove']('overlay-visible');
 	}
 
@@ -353,7 +361,7 @@ runBtn
 				d.resolve([]);
 			}
 
-			savedItems = savedItems || [];
+			savedItems = savedItems || {};
 			trackEvent('fn', 'fetchItems', itemIds.length);
 			for (let i = 0; i < itemIds.length; i++) {
 
@@ -892,6 +900,9 @@ runBtn
 				}
 			}
 		});
+		cm.on('focus', (editor) => {
+			editorWithFocus = editor;
+		});
 		cm.on('change', function onChange(editor, change) {
 			clearTimeout(updateTimer);
 
@@ -1258,20 +1269,33 @@ runBtn
 		trackEvent('ui', 'saveBtnClick', currentItem.id ? 'saved' : 'new');
 		saveItem();
 	};
+	scope.onSearchInputChange = function (e) {
+		const text = e.target.value;
+		let el;
+		for (let [itemId, item] of Object.entries(savedItems)) {
+			el = $(`#js-saved-items-pane [data-item-id=${itemId}]`);
+			if (item.title.toLowerCase().indexOf(text) === -1) {
+				el.classList.add('hide');
+			} else {
+				el.classList.remove('hide');
+			}
+		}
+	};
 
 	function compileNodes() {
-		var nodes = [].slice.call($all('[d-click]'));
+
+		function attachListenerForEvent(eventName) {
+			var nodes;
+			nodes = $all(`[d-${eventName}]`);
 			nodes.forEach(function (el) {
-			el.addEventListener('click', function (e) {
+				el.addEventListener(eventName, function (e) {
-				scope[el.getAttribute('d-click')].call(window, e)
+					scope[el.getAttribute(`d-${eventName}`)].call(window, e)
 				});
 			});
-		nodes = [].slice.call($all('[d-change]'));
+		}
-		nodes.forEach(function (el) {
+		attachListenerForEvent('click');
-			el.addEventListener('change', function (e) {
+		attachListenerForEvent('change');
-				scope[el.getAttribute('d-change')].call(window, e)
+		attachListenerForEvent('input');
-			});
-		})
 	}
 
 	function init () {
@@ -1434,9 +1458,9 @@ runBtn
 				selectedItemElement = $('.js-saved-item-tile.selected');
 				if (selectedItemElement) {
 					selectedItemElement.classList.remove('selected');
-					selectedItemElement.nextElementSibling.classList.add('selected');
+					selectedItemElement.nextUntil('.js-saved-item-tile:not(.hide)').classList.add('selected');
 				} else {
-					$('.js-saved-item-tile:first-child').classList.add('selected');
+					$('.js-saved-item-tile:not(.hide)').classList.add('selected');
 				}
 				$('.js-saved-item-tile.selected').scrollIntoView(false);
 			} else if (event.keyCode === 38 && isSavedItemsPaneOpen) {
@@ -1445,7 +1469,7 @@ runBtn
 					selectedItemElement.classList.remove('selected');
 					selectedItemElement.previousElementSibling.classList.add('selected');
 				} else {
-					$('.js-saved-item-tile:first-child').classList.add('selected');
+					$('.js-saved-item-tile:not(.hide)').classList.add('selected');
 				}
 				$('.js-saved-item-tile.selected').scrollIntoView(false);
 			} else if (event.keyCode === 13 && isSavedItemsPaneOpen) {

src/style.css

@@ -373,7 +373,16 @@ li.CodeMirror-hint-active {
 	background: none;
 	border: 0;
 	color: rgba(255,255,255,0.6);
-	width: calc(100vw - 400px);
+	width: calc(100vw - 420px);
+}
+.search-input {
+	background: rgba(255, 255, 255, 0.1);
+	padding: 10px 20px;
+	border: 0;
+	width: 100%;
+	font-size: 16px;
+	color: white;
+	border-radius: 4px;
 }
 .modal {
 	position: fixed;

src/utils.js

@@ -2,9 +2,32 @@
 	window.DEBUG = document.cookie.indexOf('wmdebug') > -1;
 
 	window.$ = document.querySelector.bind(document);
-	window.$all = document.querySelectorAll.bind(document);
+	window.$all = (selector) => [...document.querySelectorAll(selector)] ;
 	var alphaNum = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
 
+	/**
+	 * The following 2 functions are supposed to find the next/previous sibling until the
+	 * passed `selector` is matched. But for now it actually finds the next/previous
+	 * element of `this` element in the list of `selector` matched element inside `this`'s
+	 * parent.
+	 * @param  Selector that should match for next siblings
+	 * @return element Next element that mathes `selector`
+	 */
+	Node.prototype.nextUntil = function (selector) {
+		var siblings = [...this.parentNode.querySelectorAll(selector)];
+		var index = siblings.indexOf(this);
+		return siblings[index + 1];
+	};
+	/*
+	 * @param  Selector that should match for next siblings
+	 * @return element Next element that mathes `selector`
+	 */
+	Node.prototype.previousUntil = function (selector) {
+		var siblings = [...this.parentNode.querySelectorAll(selector)];
+		var index = siblings.indexOf(this);
+		return siblings[index - 1];
+	};
+
 	// https://github.com/substack/semver-compare/blob/master/index.js
 	function semverCompare(a, b) {
 		var pa = a.split('.');