Finished implementing basic search bar functionality

www/css/panel/queue.css

@@ -145,6 +145,12 @@ div.dragging-queue-entry{
 }
 
 /* Search Results */
+#queue-search-prompts-result-div:not(:empty){
+    resize: vertical;
+    overflow: scroll;
+    height: 5em;
+}
+
 .queue-search-prompts-result-entry-div{
     display: flex;
     flex-direction: row;
@@ -152,7 +158,7 @@ div.dragging-queue-entry{
     text-wrap: nowrap;
     margin: 0 0.15em;
     padding: 0 0.15em;
-    font-size: 0.8em
+    font-size: 0.8em;
 }
 
 .queue-search-prompts-result-entry-div p{

www/js/channel/panels/queuePanel/queuePanel.js

@@ -154,6 +154,7 @@ class queuePanel extends panelObj{
         this.client.socket.on("end", this.handleEnd.bind(this));
         this.client.socket.on("lock", this.handleScheduleLock.bind(this));
         this.client.socket.on("error", this.handleQueueError.bind(this));
+        this.client.socket.on("archiveSearch", this.handleArchiveResults.bind(this));
     }
 
     /**
@@ -183,6 +184,9 @@ class queuePanel extends panelObj{
         //Go Live
         this.goLiveOverwriteButton.addEventListener('click', this.goLive.bind(this));
         this.goLivePushbackButton.addEventListener('click', this.goLive.bind(this));
+        //search
+        this.searchButton.addEventListener('click', this.search.bind(this));
+        this.searchPrompt.addEventListener("keydown", this.search.bind(this));
         //Queue Date
         this.queueDateDecrement.addEventListener('click', this.decrementDate.bind(this));
         this.queueDateIncrement.addEventListener('click', this.incrementDate.bind(this));
@@ -304,26 +308,49 @@ class queuePanel extends panelObj{
         //Grab query
         const query = this.searchPrompt.value;
 
+        //If we don't have an event, or if we do it isn't a keeb event, or if it is we hit enter and we got a query
+        if((!event || !event.key || event.key == "Enter") && query){
+            //Clear out search result div
+            this.searchResultDiv.innerHTML = '';
+
             //If we're searching by URL
             if(utils.isURL(query)){
                 //Render local items matching provided URL
                 this.renderResults(client.searchQueue(undefined, query));
+                //Ask server to search archive by URL
+                client.socket.emit("getArchive", {url: query, search: true});
             }else{
                 //Render local items matching title
                 this.renderResults(client.searchQueue(query));
+                //Ask server to search archive by title
+                client.socket.emit("getArchive", {title: query, search: true});
+            }
         }
     }
 
-    renderResults(results){
+    handleArchiveResults(data){
+        //Reverse archive order to show newest first, and render as an array of raw entries
+        this.renderResults(data.archive.reverse(), true);
+    }
+
+    renderResults(results, rawEntry = false){
         //Keep track of whether or not we're on the first entry 
-        let notFirst = false;
+        let notFirst = this.searchResultDiv.hasChildNodes();
+
+        for(let entry of results){
+            //If we where handed an entry raw from a map
+            if(rawEntry){
+                //Yoink the actual media object
+                entry = entry[1];
+            }
 
-        for(const entry of results){
             //Create entry div
             const entryDiv = document.createElement('div');
             entryDiv.classList.add('queue-search-prompts-result-entry-div');
 
+            //if this shit aint da first one
             if(notFirst){
+                //MAKE IT SO, PILOT -ronin from tf|2 or something
                 entryDiv.classList.add('not-first');
             }