- added arrow navigation to search

- version bump

package.json

@@ -2,7 +2,7 @@
   "name": "cider",
   "applicationId": "Cider",
   "productName": "Cider",
-  "version": "1.5.4",
+  "version": "1.5.5",
   "description": "A new cross-platform Apple Music experience based on Electron and Vue.js written from scratch with performance in mind.",
   "license": "AGPL-3.0",
   "main": "./build/index.js",

src/renderer/main/vueapp.js

@@ -22,6 +22,7 @@ const app = new Vue({
     lzListing: ipcRenderer.sendSync("get-i18n-listing"),
     search: {
       term: "",
+      cursor: -1,
       hints: [],
       showHints: false,
       results: {},
@@ -3875,6 +3876,17 @@ const app = new Vue({
           break;
       }
     },
+    searchCursor(e) {
+      if(e.keyCode == '40') {
+        if((this.search.hints.length - 1) < this.search.cursor + 1) return
+        this.search.cursor++
+        this.search.term = this.search.hints[this.search.cursor]
+      }else if(e.keyCode == '38'){
+        if(this.search.cursor == 0) return
+        this.search.cursor--
+        this.search.term = this.search.hints[this.search.cursor]
+      }
+    },
     async searchQuery(term = this.search.term) {
       let self = this;
       if (term == "") {

src/renderer/style.less

@@ -724,6 +724,7 @@ input[type="range"].web-slider::-webkit-slider-runnable-track {
 
 .search-hints-container {
   top: 44px;
+  background: rgb(30 30 30);
   #cmenu.container();
 
   .search-hints {
@@ -731,6 +732,10 @@ input[type="range"].web-slider::-webkit-slider-runnable-track {
 
     .search-hint {
       #cmenu.item();
+
+      &.active {
+        background: var(--keyColor);
+      }
     }
   }
 }

src/renderer/views/app/chrome-top.ejs

@@ -280,15 +280,16 @@
                     <input type="search" spellcheck="false" @click="$root.appRoute('search');"
                            @focus="search.showHints = true"
                            @blur="setTimeout(()=>{search.showHints = false}, 300)"
-                           v-on:keyup.enter="searchQuery();search.showHints = false" @change="$root.appRoute('search');"
+                           v-on:keyup.enter="searchQuery();search.showHints = false;search.cursor = -1" @change="$root.appRoute('search');"
+                           v-on:keyup="searchCursor"
                            @input="getSearchHints()"
                            :placeholder="$root.getLz('term.search') + '...'" v-model="search.term" ref="searchInput"
                            class="search-input" />
 
                     <div class="search-hints-container" v-if="search.showHints && search.hints.length != 0">
                         <div class="search-hints">
-                            <button class="search-hint text-overflow-elipsis" v-for="hint in search.hints"
-                                    @click="search.term = hint;search.showHints = false;searchQuery(hint)">
+                            <button class="search-hint text-overflow-elipsis" :class="{active: (search.cursor == index)}" v-for="(hint, index) in search.hints"
+                                    @click="search.term = hint;search.showHints = false;searchQuery(hint);search.cursor = -1">
                                 {{ hint }}
                             </button>
                         </div>

src/renderer/views/components/sidebar.ejs

@@ -10,7 +10,8 @@
                             @click="$root.appRoute('search');"
                             @focus="$root.search.showHints = true"
                             @blur="$root.setTimeout(()=>{$root.search.showHints = false}, 300)"
-                            v-on:keyup.enter="$root.searchQuery();$root.search.showHints = false"
+                            v-on:keyup.enter="$root.searchQuery();$root.search.showHints = false;$root.search.cursor = -1"
+                            v-on:keyup="$root.searchCursor"
                             @change="$root.appRoute('search');"
                             @input="$root.getSearchHints()"
                             :placeholder="$root.getLz('term.search') + '...'"
@@ -27,7 +28,7 @@
                             <button
                                     class="search-hint text-overflow-elipsis"
                                     v-for="hint in $root.search.hints"
-                                    @click="$root.search.term = hint;$root.search.showHints = false;$root.searchQuery(hint)"
+                                    @click="$root.search.term = hint;$root.search.showHints = false;$root.searchQuery(hint);$root.search.cursor = -1"
                             >
                                 {{ hint }}
                             </button>