poping out selected item

src/js/control-view.js

@@ -57,6 +57,7 @@ module.exports = {
       selected_items_to_delete: [],
       search_query: "",
       filtered_files: [],
+      selected_folder_index: null,
     };
   },
 
@@ -296,6 +297,7 @@ module.exports = {
     },
 
     populateFiles(index) {
+      this.selected_folder_index = index;
       this.filtered_files = this.state.gcode_list[index].files.map(item => item.file_name);
     },
 

src/pug/templates/control-view.pug

@@ -323,11 +323,12 @@ script#control-view-template(type="text/x-template")
           message.error-message(:show.sync="deleteGCode")
             h3(slot="header") Select files to delete:
             div(slot="body")
-              input.search-bar(type="text" v-model="search_query" placeholder="Search Files...")
+              input.search-bar(type="text", v-model="search_query", placeholder="Search Files...")
               .container
                 .folders
                   h3 Folders
-                  div(v-for="(index, folder) in state.gcode_list" :key="index" @click="populateFiles(index)" class="folder-item") {{ folder.name }}
+                  div(v-for="(index, folder) in state.gcode_list", :key="index", @click="populateFiles(index)",
+                    class="folder-item", :class="{ selected: index === selected_folder_index }") {{ folder.name }}
                 .files
                   h3 Files
                   label.file-item(v-for="item in gcode_filtered_files" :key="item")

src/stylus/style.styl

@@ -292,12 +292,6 @@ span.unit
   .drop-down-container
     height 50px
   
-  .gcode_container
-    display grid
-    overflow-y scroll
-    max-height 400px
-    margin-bottom 10px
-  
   .container
     display flex
     width 100%
@@ -320,6 +314,10 @@ span.unit
     margin-bottom 10px
     width 50%
   
+  .folder-item.selected
+    font-weight bold
+    background-color #add1ad
+
   table
     border-collapse collapse